Mouse Over

29 Mar 2011, 7:18 PM

#1

paul1981

New Zenner

Join Date:: Mar 2011
Posts:: 18
Plugin Contributions:: 0

Mouse Over

I hope this is the best section for this but I wanted to add a row of say 8 images in the product description and above the image will be the word Features, then when you mouse over the images the feature will be displayed in a text box above the image:

So

Features: Text appears here

Image 1 - Image 2 - Image 3 - Image 4 - Image 5

When you mouse over the image text will appear next to the word features.

I believe this will be javascript and I have some code here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head> <title></title> <script language="JavaScript" type="text/javascript"> <!-- function CngTxt(id,txt){ var obj=document.getElementById(id); if (txt){ obj.innerHTML=txt; } else { obj.innerHTML='some standard text'; } }

//-->
</script>

</head> <body> <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="20" height="20" onmouseover="CngTxt('Txt','Image One')" onmouseout="CngTxt('Txt')" > <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="20" height="20" onmouseover="CngTxt('Txt','Image Two')" onmouseout="CngTxt('Txt')" > <div id="Txt" style="width:100px;height:50px;border:solid black 1px;" >some standard text</div> </body> </html>

But I'm not sure where I could add this code, any suggestions?

At a guess I'd add the <head> part in a general <head> tag and the script will be in the actual product description box?

29 Mar 2011, 8:03 PM

#2

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,874
Plugin Contributions:: 8

Re: Mouse Over

Zen Cart has a mechanism to automatically include javascript without touching the PHP files. Put the script (the function definition only, no <script> or other tags) in a file named like jscript_yourjsfunction.js and save the file in /includes/templates/your_template/jscript/, as described at length in the wiki:
http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Javascript

function CngTxt(id,txt){
var obj=document.getElementById(id);
if (txt){ obj.innerHTML=txt; }
else { obj.innerHTML='some standard text'; }
}

Glenn . . . Future Relics Jewelry, NY Faerie Festival
Categories Dressing, Images for Titles, Smart Backgrounds, Additional Img Titles, Flexible Attributes, Ezpages Footer Columns, Model List...

29 Mar 2011, 8:05 PM

#3

paul1981

New Zenner

Join Date:: Mar 2011
Posts:: 18
Plugin Contributions:: 0

Re: Mouse Over

thanks very much, I'll give it a go tomorrow

30 Mar 2011, 7:17 PM

#4

paul1981

New Zenner

Join Date:: Mar 2011
Posts:: 18
Plugin Contributions:: 0

Re: Mouse Over

Brilliant thanks, just need to style the text box and job done!

31 Mar 2011, 2:36 PM

#5

IDEASLady

Totally Zenned

Join Date:: Aug 2005
Location:: Trujillo Alto, Puerto Rico
Posts:: 1,456
Plugin Contributions:: 4

Re: Mouse Over

Hey Paul are you planning to post this on the downloads area? I had a customer few days ago interested in something like that.

You can see that feature on this store: adata.co.uk/Catalogue/DVR/test/Zeus-10-Compact-4-Channel-500GB-ZEUSC4-500

IDEASLady
IDEAS Creative Studio

Your image... our business!

31 Mar 2011, 3:05 PM

#6

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,874
Plugin Contributions:: 8

Re: Mouse Over

The only part of this that is actually packageable as files to install is the jscript_whatever.js file described in my post. The rest is to be added to the product description, tailored to the particular product (plus any stylesheet rules, again tailored to the site/product). My take on a generic form for the description (where the "Features" switch is the desired behavior) would be```

<div id="Txt">Features</div> <img src="/images/yourimage.gif" width="20" height="20" onmouseover="CngTxt('Txt','Description<br />of features')" onmouseout="CngTxt('Txt')" > ``` Then add to your stylesheet something like #Txt {width: 100px; height: 50px; border: 1px solid black;} as well as whatever other styling you want.

The js file needs to be edited to make 'some standard text' read the same as the div content.

It would be good for Paul to post an example of what he actually ended up using.

Glenn . . . Future Relics Jewelry, NY Faerie Festival
Categories Dressing, Images for Titles, Smart Backgrounds, Additional Img Titles, Flexible Attributes, Ezpages Footer Columns, Model List...

31 Mar 2011, 3:20 PM

#7

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,874
Plugin Contributions:: 8

Re: Mouse Over

On inspection, the above is not a good description of how to do this. A better description of how this would work is (in the description text)

<div id="Txt">Features:</div>
<img src="/images/yourimage1.gif" width="20" height="20"
onmouseover="CngTxt('Txt','image1 feature')"
onmouseout="CngTxt('Txt')"
>
<img src="/images/yourimage2.gif" width="20" height="20"
onmouseover="CngTxt('Txt','image2 feature')"
onmouseout="CngTxt('Txt')"
>

Then add to your stylesheet something like

#Txt {width: 100px; height: 50px; border: 1px solid black;}

as well as whatever other styling you want.

Save yourimage1.gif and yourimage2.gif in the base /images/ folder.

The js file in this case would have 'some standard text' be '' (two single quotes) because there is no text after Features: if not on mouseover.

Glenn . . . Future Relics Jewelry, NY Faerie Festival
Categories Dressing, Images for Titles, Smart Backgrounds, Additional Img Titles, Flexible Attributes, Ezpages Footer Columns, Model List...