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?
Thread: Mouse Over
Results 1 to 7 of 7
-
29 Mar 2011, 08:18 PM #1
New Zenner
- Join Date
- Mar 2011
- Posts
- 18
- Plugin Contributions
- 0
Mouse Over
-
29 Mar 2011, 09:03 PM #2
Black Belt
- Join Date
- Jul 2005
- Location
- Upstate NY
- Posts
- 22,010
- Plugin Contributions
- 25
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.p...s_-_Javascript
Code:function CngTxt(id,txt){ var obj=document.getElementById(id); if (txt){ obj.innerHTML=txt; } else { obj.innerHTML='some standard text'; } }
-
29 Mar 2011, 09:05 PM #3
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, 08:17 PM #4
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, 03:36 PM #5
Totally Zenned
- Join Date
- Aug 2005
- Location
- Trujillo Alto, Puerto Rico
- Posts
- 1,550
- Plugin Contributions
- 9
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-500IDEAS Girl
IDEAS Creative Group = Your image... our business!
-
31 Mar 2011, 04:05 PM #6
Black Belt
- Join Date
- Jul 2005
- Location
- Upstate NY
- Posts
- 22,010
- Plugin Contributions
- 25
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
Then add to your stylesheet something likeCode:<div id="Txt">Features</div> <img src="/images/yourimage.gif" width="20" height="20" onmouseover="CngTxt('Txt','Description<br />of features')" onmouseout="CngTxt('Txt')" >
#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.
-
31 Mar 2011, 04:20 PM #7
Black Belt
- Join Date
- Jul 2005
- Location
- Upstate NY
- Posts
- 22,010
- Plugin Contributions
- 25
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)
Then add to your stylesheet something likeCode:<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')" >
#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.
Reply With Quote
Similar Threads
-
IE 9 problems with mouse over
By possien in forum Templates, Stylesheets, Page LayoutReplies: 6Last Post: 23 Sep 2011, 08:27 AM -
mouse over option
By shanesoine in forum All Other Contributions/AddonsReplies: 0Last Post: 13 Apr 2011, 02:50 PM -
Image on mouse over?
By GoranCro in forum General QuestionsReplies: 9Last Post: 21 Oct 2009, 07:27 PM -
Mouse Over in English
By leigh_341 in forum Templates, Stylesheets, Page LayoutReplies: 2Last Post: 28 Apr 2009, 06:14 PM -
Mouse Over HOVER?
By kevinmc3 in forum Templates, Stylesheets, Page LayoutReplies: 0Last Post: 25 Sep 2006, 05:22 PM
