A slide show sequences through pictures of products. Wouldn't it be nice if the user could stop the slide show, go back to the previous picture, click on the picture to get detailed information about the product?
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Slide Show Code With Linked Slides

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268