 How to create a clickable slide
show
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
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.
|
