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>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads
RSS Feed
