Cut & Paste OnMouseover Slideshow
|
Description: Due to popular request, we've created a onMouseover slideshow script. The "slideshow" image changes image each time the mouse is moved over a different link. The image itself is hyperlinked, and its target url changes to match the link the mouse is on during each rollover. Use it to add graphical depiction to important links on your page!
Example:
| Air show links |
|
Directions
Step 1: Add the below to the <head> section of your page:
In the last line of the above code, input the names of all of the images you wish be used in the rollover effect:
preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif")
Step 2: Insert the below HTML code to your web page where you wish the initial rollover image to be positioned:
<a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>
Step 3: Finally, you now need associate the rollover effect script with certain text or image links that will trigger the rollover effect when the mouse is moved over them (in the above demo, "Plane 1", "Plane 2" etc). Insert the below onMouseover event handler inside the <a> tag of these links, like below:
<a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a>
where "0" inside the variable myimages[0] indicates that when the mouse moves over this link, the rollover image should be substituted with the first image defined in the function preloadimages() of Step 1. For each link, you'll need to change "0" to another integer, with the integer representing the position of the image you wish the rollover image to change to, again, as defined in function preloadimages(). If you'll totally confused at this point (I'll admit, even I am now!), the below are the HTML codes I used to construct the above demo. Examine it to see what I mean:
<script>
"
//myimages[0] would refer to "plane1.gif", myimages[1] would refer to
"plane2.gif" etc
preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif")
</script>
<a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane
1</a>
<a href="f15.htm" onMouseover="changeimage(myimages[1],this.href)">Plane
2</a>
<a href="su27.htm" onMouseover="changeimage(myimages[2],this.href)">Plane
3</a>
<a href="jet.htm" onMouseover="changeimage(myimages[3],this.href)">Plane
4</a>
<a href="boeing.htm" onMouseover="changeimage(myimages[4],this.href)">Plane
5</a>
There you have it!