Dynamic Drive DHTML code library!
Dynamicdrive.com


.
spacer.gif (807 bytes)
.

Menu

Search DD
Recommend DD
Help Forums New
DHTML books
Advertising
Contact

Featured Script
Rollover buttons 

Turn regular form buttons into rollover menus with this script!
.

Partners

Free JavaScripts
.

Link to DD

Do you use scripts from Dynamic Drive? Please give something back by linking to us...
.
spacer.gif (807 bytes)

Home Small4.gif (1046 bytes) Image Effects Small4.gif (1046 bytes) Here

Blending Image Slideshow Script (Best seen with IE 4.x)

Credits: Dynamic Drive

Description: A cool JavaScript image slideshow that rotates among many images. Each time the image changes, so does the link associated with it. IE 4.x users will also see a special "blend-in" effect take place each time the image switches.

Demo:


Directions Developer's View

Step 1: Insert this into the <head> section of your page. Change "firstimage.gif", "secondimage.gif", and "thirdimage.gif" to your own:


If you want more than three images, add the below code to the above:

var image4=new Image()
image4.src="fourthimage.gif"

where "4" represents the fourth image. If you have a fifth image, add even more of those two lines, with "4" changed to "5".

Step 2: Insert the below into the <body> section of your page:


Step 3: Finally, insert the below into the <body> tag itself, like this:

<body onLoad="slideit()">

We're not quite out of the woods yet... Now, change "firstimage.gif" inside the <a> tag to your own (the first image). Change "var number_of_images=3" and "var speed=3" in the first two lines of the <script> tag to reflect your own configuration, where "number_of_images"  contains the number of images in the slideshow, and "speed" represents the pace at which the image slideshow changes (in seconds). In the last few lines of the <script> tags, you see:

"
"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"

Change "link1.htm, "link2.htm", and "link3.htm" to your own URLs; These URLs are the ones that will be associated with the first, second, and third image, respectively. If you have more than three images in the sideshow, add more of the below to the above code:

else if (whichimage==4)
window.location="link4.htm"

where "4" represents the fourth image. If you have a fifth image, add even more of those two lines, with "4" changed to "5".

Take a deep breathe...you're done!

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6


Copyright 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference