|
Home |
|
|
Profile |
|
|
Packages |
|
|
Store |
|
|
Web Help |
|
|
PC Help |
|
|
Calgary |
|
|
Greetings |
|
|
Comedy |
|
|
Games |
|
|
|
| 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!
CopyRight © 1997-1999 Website Abstraction. All rights reserved