Mouse Over

**Paul1981** · 29 Mar 2011, 08:18 PM

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">

</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?

**gjh42** · 29 Mar 2011, 09:03 PM

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.p...s_-_Javascript

Code:

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

**Paul1981** · 29 Mar 2011, 09:05 PM

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

**Paul1981** · 30 Mar 2011, 08:17 PM

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

**ideasgirl** · 31 Mar 2011, 03:36 PM

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

**gjh42** · 31 Mar 2011, 04:05 PM

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

Code:

<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.

Thread: Mouse Over

Thread Tools

Search Thread

Display

Hybrid View

Mouse Over

Re: Mouse Over

Re: Mouse Over

Re: Mouse Over

Re: Mouse Over

Re: Mouse Over

Similar Threads

IE 9 problems with mouse over

mouse over option

Image on mouse over?

Mouse Over in English

Mouse Over HOVER?

Posting Permissions