top left
The HTML Source Logo


 html
Top Right
    
 Getting StartedHow Do I...TroubleShootingPromotionContact Us
 html
HTML
SEARCH THE SITE
advanced search



CATEGORIES
Home
Getting Started
HTML Cheat Sheet
Webmaster Tools
HTML Help Forum
Color Codes
Link to us









































bottom
HTML HTML HTML HTML
Image Slide Show



How to do it

Well obviously, the first step is to choose the images you want in your slide show. In this example, well be using the following:

"image1.gif" "image2.gif" "image3.gif"
image1.gif image2.gif image3.gif

Next, place the following code into the <HEAD> section of your web page:
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="image1.gif"
var image2=new Image()
image2.src="image2.gif"
var image3=new Image()
image3.src="image3.gif"
//-->
</script>
Now, replace the image1.gif, image2.gif, and image3.gif with the actual names of your images.

If you want more than 3 images, just add another line like this:
var image4=new Image()
image4.src="image4.gif"
and so on...

Next, place the following code in the <BODY> section of your web page where you would like the slide show to appear:
<img src="image1.gif" name="slide" width=000 height=000>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
Now replace everything in BLUE text to fit your page.

Replace image1.gif with the name of your first image in your slide show.

Next replace the 000 in the width and height tag to the actual width and height (in pixels) of the images in your slideshow. (all images should be the same size)

Next replace the 3 in (step<3) with the number of images in your slideshow.

Finally, replace the 2500 in ("slideit()",2500) with the amount of time (in milliseconds) you want it to take before each image changes. Example, 2500 will be 2.5 seconds, 500 will be ever 0.5 seconds, and so on....

EXAMPLE

<html>
<head>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="image1.gif"
var image2=new Image()
image2.src="image2.gif"
var image3=new Image()
image3.src="image3.gif"
//-->
</script>
</head>
<body>
<img src="image1.gif" name="slide" width=128 height=80>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>
This will look like this:





Company   |   Careers   |   Partners   |   Advertising   |   Help
Privacy Policy   |   Trademark Notices   |   User Agreement
2001 TheHTMlSource.com, INC. All Rights Reserved.



Site hosted by Angelfire.com: Build your free website today!