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 Mouseover Pause

By Stephen Bucaro

On this Web site you'll find Java Script code for several different types of slide shows, for example code for a slide show with different size images, code for a slide show with linked slides, even a slide show that requires no Java Script. You'll find an easy slide show that uses minimal code. This article provides you with easy code for a JavaScript slide show with mouseover pause.

One of the problems with using minimal code is that the images should all be the same size. If the images are not all the same size, your web page may grow and shrink as the different images are displayed. You need to make provisions to maintain the format of your web page. Possibly place the slide show in a table cell with width and height set to the largest image.

• Move your mouse pointer over the image to pause the slide show.

In the demo slide show, the slides are pictures of the the first computers that I built. The first one is an IBM PC XT clone that I built in 1984 (that’s right, you’re all newbies to me). I resized all the images to the height of the smallest image, and then did some image editing to make them all the same width. You could also just put gray borders on either side of an image to pad it out.

You can use the example code to put a slide show of your own images on your own web page by following the four simple steps below.

<img id="slide" onMouseover="stopShow()" onMouseout="runShow()" src="firstimage.jpg" />

1. Give the html image element that you want to use for the slide show an id attribute, as shown above. For this example the id attribute is assigned the value slide. The source (src) for the image element would be the file name of, or path and file name to the first image in the slide show.

Note that the html image element also defines two events, onMouseover and onMouseout. The onMouseover event calls a function named stopShow. The onMouseout calls a function named runShow.

2. In the <body> tag of your webpage, enter the code to execute the runShow function for the onLoad event handler as shown below.

<body onLoad="runShow()">

3. Paste the following code in the <head> section of your web page.

<script type="text/javascript">
var i = 0;
var timer;
var path = new Array();

// LIST OF SLIDES
path[0] = "firstimage.jpg";
path[1] = "secondimage.jpg";
path[2] = "thirdimage.jpg";
path[3] = "fourthimage.jpg";

function swapImage()
{
   document.getElementById("slide").src=path[i];
   if(i < path.length - 1) i++; else i = 0;
   timer = setTimeout("swapImage()",2000);
}

function stopShow()
{
  clearTimeout(timer);
}

function runShow()
{
  swapImage();  
}
</script>