HTML and CSS Reference
EXAMPLE 15.24 ( CONTINUED )
style="position:absolute; top:50px">Roll over me! </div>
style="position:absolute; top:100px">and then me,</div>
style="position:absolute; top:150px">and me too.</div>
The style for this document is coming from an external style sheet. It's the same
style used in the previous example.
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.
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.
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.
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.
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.
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 .
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) .
The target refers to the HTML element for which the event occurred. W3C uses
the currentTarget property and Microsoft Internet Explorer uses the srcElement