Building a JavaScript image slideshow

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 in anyway. 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:

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

Notice the code

javascript:slidelink()

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.

The "meat" of this tutorial, slidelink() is the function that will dynamically change the url of the slideshow 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:

<script type="text/javascript">
<!--
var step=1
//a variable that will keep track of the image currently being displayed.
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>

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. This is realized through function slidelink().

Step 3: Throw everything together.

All that's left now is to toss everything into one bowl, and we have an interactive billboard that takes us to a different url depending on the image shown:

<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>

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