Jump to content
tnd1000

Slideshow - hyperlinking images

Recommended Posts

Hey there. I'm almost ready to launch my client's site, and there is one last problem with the current slideshow.

<script type="text/javascript"> var imgSlide;var pic = 0;window.onload = function (){ imgSlide = document.getElementById('img'); // preload imagesimages = new Array();images[0] = new Image();images[0].src = "image1.jpg";images[1] = new Image();images[1].src = "image2.jpg";images[2] = new Image();images[2].src = "image3.jpg"; } function slide(){imgSlide.src = images[pic].src;if(pic < 2) // images.length - 1 can be used here{pic++;}else{pic = 0 }timer = setTimeout(slide, 5000);} function prev(){if(timer)stopSlide(); if(pic == 0){ pic = 2; imgSlide.src = images[pic].src;}else{pic--;imgSlide.src = images[pic].src;}} function next(){if(timer)stopSlide(); if(pic == 2){ pic = 0;imgSlide.src = images[pic].src;}else{pic++;imgSlide.src = images[pic].src;}  } function stopSlide(){clearTimeout(timer);}  </script>

My problem is this: I need to hyperlink the images, so that each one will take the user to a certain page. I have seen variations of this function in different places, but I'm just not sure how to apply it to this code in particular. I'm sure it's a relatively simple fix, but I've looked at so many different JS codes today that my brain is a little scrambled.If someone could at least point me in the right direction, I would be very grateful. :)

Share this post


Link to post
Share on other sites

One way to do it is like the following... Surround the img tag with an <a> element and give it an id of "links" for example. Also, give its href the link you want for that first image. Then at the top include another global var for the links tag: var links; // put between var imgSlide and var pic Then within the window.onload function right after imgSlide = document.getElementById('img'); insert: links = document.getElementById("links"); Then make a new array with the links you want that will correspond with the images, for example: alinks = new Array("http://www.google.com","http://www.yahoo.com","http://www.aol.com");Say, the first image is the google logo, second yahoo logo, and third aol logo. Then in the slide() function right after: imgSlide.src = images[pic].src; add this: links.href = alinks[pic]; That should be it. Hopefully it will work for you. Good luck.

  • Like 1

Share this post


Link to post
Share on other sites

Ahh, I see. Thank you very much, Don!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...