HTML and CSS Reference
In-Depth Information
EXAMPLE
13.27
<html>
<head><title>Preloading Images</title>
<script type="text/javascript">
1
window.onload=preLoad;
2
function preLoad(){
3
var linkId=document.getElementById("link1");
baby = new Array(); // global variable
baby[0]=new Image(); // Preload an image
baby[0].src="babysmile.jpg";
baby[1]=new Image();
baby[1].src="babygoo.jpg";
4
linkId.onmouseover=firstBaby;
// Event property on a link
5
linkId.onmouseout=secondBaby;
}
6
function firstBaby()
{
document.images["willy"].src=baby[1].src;
}
7
function secondBaby()
{
document.images["willy"].src=baby[0].src;
}
</script>
</head>
<body>
<h1>This is Baby William</h1>
8
<a id="link1"><img name="willy" src="babygoo.jpg"
width="220" height="250">
</a>
</body>
</html>
EXPLANATION
1
The
onload
property of the window object simulates the HTML
onLoad
event han-
dler of the body element. The function
preLoad()
will be called when a document
or frameset is completely loaded into its window or frame.
2
This function will be called as soon as the document has loaded. It will preload
the images and set up the event handling.
3
To apply a property to a link, we need to get a reference. The
getElementById()
method returns a reference,
linkID
, to the link object identified on line 8 with a
unique
id
.
4
The
mouseover
event handler property is assigned to
linkId
. Its value is a reference
to a function, called
firstBaby()
, and defined on line 6. The function will be called
when the
mouseover
event happens.
5
The
mouseout
event is a property of
linkId
. When the
mouseout
event happens the
function
secondBaby()
will be called.
