HTML and CSS Reference
In-Depth Information
EXAMPLE
15.24 (
CONTINUED
)
else{
div3.className="black";
}
}
</script>
</head>
<body>
12
<div id="first"
style="position:absolute; top:50px">Roll over me! </div>
<div id="second"
style="position:absolute; top:100px">and then me,</div>
<div id="third"
style="position:absolute; top:150px">and me too.</div>
</body>
</html>
EXPLANATION
1
The style for this document is coming from an external style sheet. It's the same
style used in the previous example.
2
When the
onload
event is fired (when the page has been fully loaded) this anony-
mous function will be called, its purpose to color the text.
3
Now we get a reference to all three of the
div
s by their unique
id
s, assigned in the
HTML document on line 12.
4
If using Internet Explorer, the
addEventListener()
method is undefined. If it's not
undefined (i.e., the browser supports the DOM method), then this block of text
will be entered.
5
The event listeners are waiting for a
mouseover
or a
mouseout
event to occur on
each of the
div
s in the document. When the mouse rolls over a
div
, the
unColor-
Text()
function will be called, and when the mouse moves out of a
div
, the
Color-
Text()
function is called.
6
Internet Explorer has its own method for event listening, called the
attachEvent()
method. The event listed as an argument,
onmouseover
or
onmouseout
, must have
the prefix
on
or an error will occur.
7
The function
colorText()
takes one argument, a reference to the object where
the event occurred. It is called when the user rolls the mouse away from the
text in the
div
.
8
The type of the event is either passed to the function as a parameter,
e
, (W3C) or
is a property of the global window object,
window.event
(Internet Explorer)
.
9
The target refers to the HTML element for which the event occurred. W3C uses
the
currentTarget
property and Microsoft Internet Explorer uses the
srcElement
property.
Continues
