Site address: lonecoast.com
I am trying to make a product display that uses thumbnail images on one side of the page and a large close up of the image when a thumbnail is clicked that will show a large version of the thumbnail. I found a site that explained the code for this, and I got it to work. The code is this:
<head>
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";
obj.innerHTML = imgTag;
return;
}
</script>
</head>
<body>
<div id="image1">
<img src="product1.png">
</div>
<a id="one" href="#" onclick="changeIt('product1.png','image1');"> <src="product1thumbnail.png" /></a>
<a id="two" href="#" onclick="changeIt('product2.png','image1');"> <src="product 2thumbnail.png" /></a>
</body>
So, click image "product1thumbnail.png" and the other image switches to product1.png; click "product2thumbnail.png" and the other image changes to product2.png.
This works great. But now the next step is I want the enlarged view of the product to link to its respective site page. How do I make product1.png and product2.png clickable, so that product1.png links to product1.html and product2.png links to product2.html?
Add the link to the markup that is injected, here:
Thanks for the response.
Could you show me an example of how to do this? I tried putting the link around the part you mentioned:
var imgTag = "<a href="product1.html"><img src='"+imageName+"' border='0' /></a>";
But then the main image wouldn't change when I clicked the thumbnails. I'm sure that's not what you meant when you said add the link to this section of markup. Could you explain what you did mean?
And where do you put the variable to hold the different URLs? (A single example of how this is supposed to look would be very helpful.) Where there is a different link for each different product picture, I realize you have to add something to say where you are linking to for each, but I don't know how to set this for each image or where it should go.
Sorry my HTML skills are so remedial.
The quotes are messed up. I can't keep track of too many alternating single and double quotes either so I escape the HTML quotes instead.
There we go. That worked.
Ok, so the last part is how do I make it so that the page linked to changes when the product image changes? As it is, when I click a thumbnail to change the product image, all of the product images link to the same page. Do you list all of the pages you are linking to in the section we've been talking about:
var imgTag = '<a href=\"product1.html\" \"product2.html\" \"product3.html\"><img src=\"' + imageName + '\" border=\"0\" /></a>';
Not sure how to work the slashes and quotes exactly. And you must have to connect the id of the link to the id of the thumbnail that is clicked somehow. What does that look like?
I really appreciate all the help you've given me.
She lives!
Thank you so much for all the help.
Great! You are welcome.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)