The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Creating link in a web "slide show"?
kelpman
post May 30 2012, 09:48 AM
Post #1





Group: Members
Posts: 4
Joined: 30-May 12
Member No.: 17,193



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?

This post has been edited by kelpman: May 30 2012, 09:53 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th April 2024 - 08:17 PM