Jump to content

Slideshow - hyperlinking images


tnd1000

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

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...