Creating an image slide show (Two parts)

The slideshow we've just created is almost identical to the one in the beginning of this tutorial, except that its not clickable. We will now see how to extend this example to enable it to not only be "hyperlinked", but hyperlinked with a different url, depending on the image displayed.

A slideshow that's not clickable is essentially the same as a fancy animated gif. A slideshow that is, however, becomes an interactive billboard. In this section, we will enhance the old slideshow to make it into just that!

Don't panic- the road to interactivity does not require us to alter the original code, just add to it. All that's needed is the addition of a <a> tag surrounding the <img> tag, and a function that manipulates this <a> tag to match different links to each image in the slideshow.

Step 1: Surround the existing <img> tag with a <a> tag. Use a JavaScript URL in place of a standard URL to allow programmatic access to it:

The above is called a JavaScript URL, and when clicked on, will call and execute a JavaScript function, instead of load a document. By throwing out the standard link and replacing it with a JavaScript URL, a URL turns dynamic. Now, there really is nothing mysterious about a JavaScript URL- it simply executes a JavaScript function in place of loading a html document. In the above case, the function that will be executed is slidelink(), which we will actually implement in our next step

Step 2: Declare and implement function slidelink() inside the original slideshow script. This function will dynamically change the url of the slideshow when it's clicked on to match the image that's currently being displayed in the slideshow. The below lists the original slideshow script, with new additions highlighted in red:

<html>
<head>
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstcar.gif" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcar.gif"
slideimages[2] = new Image()
slideimages[2].src = "thirdcar.gif"

</script>
</head>
<body>
<a href="javascript:slidelink()"><img src="firstcar.gif" id="slide" width=100 height=56 /></a>

<script type="text/javascript">

//variable that will increment through the images
var step = 0
var whichimage = 0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 whichimage = step
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

function slidelink(){
 if (whichimage == 0)
  window.location = "link1.htm"
 else if (whichimage == 1)
  window.location = "link2.htm"
 else if (whichimage == 2)
  window.location = "link3.htm"
}

slideit()

</script>
</body>
</html>

The function slidelink() when executed (in this case, whenever the slideshow is clicked on) is able to tell which slide the slideshow is currently at, and redirect the user to the desired URL accordingly. How does it do that? We declared a new variable called "whichimage", which will be used to keep track of the image currently being shown (its index number). In other words, variable "whichimage" keeps track of whether the image currently in display is the first, second, or third image in the slideshow. How does this variable achieve that? By retrieving the number stored inside variable "step" just before it gets incremented during each image rotation. Once we are able to keep track of this information, we can write code that loads a different URL, depending on the image displayed.

In this tutorial, we've created a slideshow that cycles through three images; it could easily be modified to accommodate any number of images.

How to create a clickable slide show