Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Blending Image Slideshow Script
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.
Insert into <HEAD>
<script language="JavaScript1.2"> function reapply(){ setTimeout("slideit()",2000) return true } window.onerror=reapply </script> <script language="JavaScript1.1"> <!-- var image1=new Image() image1.src="1.gif" var image2=new Image() image2.src="2.gif" var image3=new Image() image3.src="3.gif" //--> </script>
Insert into <BODY>
<a href="javascript:slidelink()" onMouseover="window.status='Click on the image to learn more about it!';return true" onMouseout="window.status=''"><img src="1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)"></a> <script> <!-- ////change number of images below var number_of_images=3 //change speed below (in seconds) var speed=3 var step=1 var whichimage=1 function slideit(){ if (!document.images) return if (document.all) slide.filters.blendTrans.apply() document.images.slide.src=eval("image"+step+".src") if (document.all) slide.filters.blendTrans.play() whichimage=step if (step<number_of_images) step++ else step=1 if (document.all) setTimeout("slideit()",speed*1000+3000) else setTimeout("slideit()",speed*1000) } function slidelink(){ if (whichimage==1) window.location="link1.htm" else if (whichimage==2) window.location="link2.htm" else if (whichimage==3) window.location="link3.htm" } //--> </script>
Other Options
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". 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".