Image Rotation w/Links

[raywood5]

I am building a site that has 3 main sections (Sec1, Sec2, Sec3) These 3 sections will be the main navigation going accross the top. On the home page will be a image approx 528 X 228. Each section will have a image relevant to the section. So when the user scrolls over the Sec1 navigation link that sections image will apear. An example of this can be seen here http://www.corkscrewsetc.com/

However, I would like each section pic to link to that section. I am using Javascript for this. Here is the code

<script language="JavaScript" type="text/JavaScript">
var image1= new Image();
var image2= new Image();
var image3= new Image();



image1.src = "img/image1.jpg";
image2.src = "img/image2.jpg";
image3.src = "img/image3.jpg";



function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");}
</script>

Then inserting the image using

<img name=picture src="img/iamge_main.jpg" width="528" height="228" border="0">

The rotation works fine but I would like to add links to each image.

Thanks in advance for any suggestions.

[tgreer]

Simply add the href (anchor) tags around your image source. You can change the href property programatically, just as you are doing with the src property of the images.

[raywood5]

Unfortunately I cannot figure out how to do that. I am not a real developer I know enough to get by. An example would really help.

[tgreer]

I mean, just do what you are already doing. Modify your image tag to be within an anchor tag:

<img name=picture src="img/iamge_main.jpg" width="528" height="228" border="0">

That's what you have now. Add an anchor (I also removed the "name" tag as it is deprecated, changing it to the "ID" tag, and wrapped the value in quotes).

<a id="picture_link" href=""><img id="picture" src="img/iamge_main.jpg" width="528" height="228" border="0"></a>

There, now you have a link. To change the link destination, you'd revise your JavaScript: function (you have to revise it anyway to be compliant and use the "id" property instead of "name"):

function doButtons(picimage) 
{
  document.getElementById('picture').src = picimage + ".src";
  document.getElementById('picture_link').href = "http://www.daniweb.com";
}

That should work, though I haven't tested it.