954,132 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Image Rotation w/Links

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 [HTML] iamge_main.jpg[/HTML]

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

Thanks in advance for any suggestions.

raywood5
Newbie Poster
10 posts since Jan 2005
Reputation Points: 10
Solved Threads: 1
 

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.

tgreer
Made Her Cry
Team Colleague
2,118 posts since Dec 2004
Reputation Points: 227
Solved Threads: 37
 

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.

raywood5
Newbie Poster
10 posts since Jan 2005
Reputation Points: 10
Solved Threads: 1
 

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

[html]iamge_main.jpg[/html]

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

[html]iamge_main.jpg[/html]

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

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

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

tgreer
Made Her Cry
Team Colleague
2,118 posts since Dec 2004
Reputation Points: 227
Solved Threads: 37
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You