|
Easy Slide Show Code With Linked Slides
By Stephen Bucaro
A slide show is a great webpage element for a website that sells almost any
product. The slide show sequences through pictures of the products. But what
if the user sees the picture of a product that they're interested in? Wouldn't
it be nice if they could stop the slide show, go back to the previous picture,
click on the picture to get detailed information about the product? In this
article, you'll learn how to design a slide show that does all that and also
displays a "tool tip" description of the product.
To place the slide show on your webpage, simply paste the code for an html
span as shown below.
<span id="show"></span>
Next, paste the delimiter tags for a Java Script code block into the HEAD
section of your webpage as shown below.
<head>
<script language="JavaScript">
</script>
</head>
Inside the Java Script code block, place the declaration for variables named
i and timer, and an array named slide, as shown below.
<script language="JavaScript">
var i = 0, timer;
var slide = new Array();
</script>
Under the variable declarations, enter your list of slides, assigning them as
elements in the array as shown below.
slide[0] = "page1.htm,Dodge Neon,neon.jpg";
slide[1] = "page2.htm,Dodge Stratus,stratus.jpg";
slide[2] = "page3.htm,Dodge Viper,viper.jpg";
The definition of each slide is a character string in quotes. Each character
string consists of three parts separated by commas. The first part is the url
of the webpage that the user will be taken to when they click on the slide.
The second part is the text to be used in the slides tool tip. The third part
is the path to the image to be used for the slide.
Below the list of slides, paste the Java Script function that swaps the slides.
The code for the swapImage() function is shown below.
function swapImage()
{
var strArray = slide[i].split(",");
document.getElementById("show").innerHTML =
"<a href='" + strArray[0] + "'>" +
"<img alt='" + strArray[1] + "' " +
"border=0 width=140 height=68 src='" + strArray[2] + "'></a>";
}
The first line inside the swapImage() function splits the slide definition character
string at the commas and places the resulting elements in an array named strArray.
The remaining code uses the elements in that array to format html code that is
placed inside the span.
Note that this code predefines the images to be 140 x 68 pixels in size. In this
example, the images should all be the same size. Edit the width and height attributes
in the code to the size of your images. If the images are not all the same
size, your web page may grow and shrink as the different images are displayed.
You can use a graphics application to crop and resize your images so that they are
all the same size. Mofifying the code to display images of different sizes without
growing and shrinking your web page is not difficult, but I have left that out of
this example in order to simplify the code.
| 
Free Downloads
RSS Feed