|
<html> <head></head> <body> <a href="../ausbin/1austin.html" onMouseover="document.welcome.src='welcoff.jpg'" onMouseout="document.welcome.src='welcon.jpg'"> <img src="welcon.jpg" name="welcome" border="0"></A> </body> </html> |
This Script demonstrates the easiest way to create an image rollover.
As in some of the preceding example, the JavaScript code is encased
within an html tag - <a href>. The html IMAGE tag sets the initial
link-image to
"welcon.jpg". When the user's curser passes over the link, the "onMouseover"
event handler is triggered. The event handler is
instructed to search within the document for the image named "welcome"
and change the source to "welcoff.jpg". When the user's curser moves off
of the link the "onMouseout"
event handler is triggered. "onMouseout" is instructed to again search the
document for the image named "welcome" and change the image's source back
to "welcon.jpg" (the original image).
The following code fragment highlights the portions that would be altered
if the script were to be cut and pasted into a new html page:
<a href="yourPage.html"
onMouseover="document.?name?.src='your2ndImage.jpg'"
onMouseout="document.?name?.src=
'your1stImage.jpg'">
<img src="your1stImage.jpg"
name="?name?" border="0"></A>
The problem with this type of image rollover is that the 1st time the user's curser is passed over image there is a delay of 1 or more seconds while the new image is being loaded. The next tutorial shows how to avoid this problem.