Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Java Script 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.