reptile7's JavaScript blog
Monday, October 16, 2006
 
Rollover Redux
Blog Entry #54

In Script Tips #2, #3, and #4, Joe goes over an image flip script that matches exactly, character for character, the Primer #15 Script that we discussed in Blog Entry #31; here it is again:

<a href="http://www.cnn.com"
onmouseover="document.pic1.src='menu1on.gif';"
onmouseout="document.pic1.src='menu1off.gif';">
<img src="menu1off.gif" border="0" name="pic1">
</a>

Joe provides neither a script demo nor the menu1off.gif and menu1on.gif images in Script Tips #2-4, but it's easy enough for me to give you a demo here; roll your mouse cursor over and away from the "CNN" image below:



(I've added a border="1" and subtracted the <a> tag code - clicking the image(s) will not take you to CNN's Web site. The menu1off.gif and menu1on.gif image files are small (<5 K) and do not need to be preloaded via the method outlined in Blog Entry #44.)

Is it worth our while to rediscuss the mechanics of the script above? Not really. But I can at least give you some new reference links in this post.

The anchor element

Links are treated generally in Chapter 12 of the W3C's HTML 4.01 Specification; Section 12.2 discusses the anchor element and its attributes, which interestingly (given that this is an HTML specification) include onmouseover and onmouseout.

'Classic' (pre-DOM) JavaScript divided links into link objects and anchor objects; a link object was an anchor element for which the href attribute was specified:

<a href="http://www.some_web_page.com">Text or image</a>

whereas an anchor object was an anchor element for which the name attribute was specified:

<a name="codeword"></a>

An anchor element having a href attribute and a name attribute was both a link object and an anchor object.

Using the 'object taxonomy' of the previous post, the link object and the anchor object are browser-related objects, and they've both been handed off to the DOM - sort of. In the DOM Level 2 HTML Specification, to my understanding, all anchor elements count as anchor objects, whereas "link object" refers to the link element associated with a document head. However, the DOM also defines document.links and document.anchors "collections" that correspond respectively to link and anchor objects in the classic JavaScript sense, thus allowing newer browsers to interpret relevant JavaScript code written in days of yore.

Because a major impetus of a standardization is to resolve 'inconsistencies of the past,' one wonders why the W3C doesn't use the document.links collection to refer to link elements in the document head, given that a document head can have more than one link element - that's what I would have done, anyway.

The onmouseover and onmouseout event handlers

Like its browser-related objects, classic JavaScript's event handlers - most of them - are now part of the DOM. Mozilla's DOM Reference has a page here for onmouseover and a page here for onmouseout. Strangely and incorrectly, the "Specification" sections of both pages contain a "Not part of specification" comment. Turning to the DOM Level 2 Events Specification, we see that the mouseover and mouseout events (as well as the click, mousedown, mouseup, and mousemove events) are indeed listed in the "Mouse event types" section thereof.

Moreover, the syntaxes given at Mozilla's onmouseover and onmouseout pages should be reversed; the event handling code should be assigned to the element.onmouseevent expression:

element.onmouseevent = event handling code;

and not vice versa.

This brings up an interesting point - an alternate, if more complicated, event handler syntax is possible (one that we saw in Blog Entry #24 during our discussion of the onunload event handler):

<a href="http://www.cnn.com" id="imageflip">
<img src="menu1off.gif" border="0" name="pic1">
</a>
<script type="text/javascript">
function overmouse( ) {
document.pic1.src="menu1on.gif"; }
function outmouse( ) {
document.pic1.src="menu1off.gif"; }
document.getElementById("imageflip").onmouseover = overmouse;
document.getElementById("imageflip").onmouseout = outmouse;
</script>

We briefly discussed the getElementById( ) method in Blog Entry #8; Mozilla's reference page for this method is here.
(Contra Blog Entry #8, the getElementById( ) method is not, and has never been, a JavaScript method; rather, it is a 'homegrown' DOM method that was introduced in the DOM Level 1 HTML Specification.)

Both onmouseover and onmouseout are also defined in the "Intrinsic events" section of Chapter 18 of the W3C's HTML 4.01 Specification.

Object/element hierarchy

OK, at the end of the previous post I promised you some hierarchy statements in this post, so here we go. Let's look at the statements that are assigned to the onmouseover and onmouseout event handlers:

document.pic1.src='menu1on.gif';
document.pic1.src='menu1off.gif';

From a classic JavaScript viewpoint, both the pic1 image object and the link object that contains it are immediate "descendants" of the document object - see the Navigator object hierarchy in Chapter 11 ("Using Navigator Objects") of the JavaScript 1.3 Client-Side Reference.

From a DOM viewpoint, the hierarchy situation is more complex. The pic1 <img> element is a child of its containing <a> element, which in turn is a child of the <body> element (anchor elements necessarily appear in the document body), which is a child of the <html> element, which is a child of the document as a whole; the pic1 image is still a descendant of the document, but not a direct descendant. Fortunately, the getElementById( ) method allows us to directly connect the root document with the pic1 image; if we assign pic1 to an id attribute (id="pic1") instead of a name attribute, then we can if desired write the image flip statements in a more up-to-date form as follows:

document.getElementById('pic1').src='menu1on.gif';
document.getElementById('pic1').src='menu1off.gif';

One more point about hierarchy: looking at the DOM tree appearing in W3Schools' HTML DOM Tutorial, to which I linked in the previous post, I was of the impression that the pic1 image and its src attribute (more generally, any HTML element and its attributes) constituted a DOM parent/child relationship; however, in the Attr Interface section of the DOM Level 3 Core Specification, the W3C states:

"The Attr interface represents an attribute in an Element object...Attr objects inherit the Node interface, but since they are not actually child nodes of the element they describe, the DOM does not consider them part of the document tree."

Before moving on - the W3C notes here that the border attribute of the img element has "been deprecated in favor of style sheets." A style="border-width:0px;" attribute can be substituted for border="0" in this regard.

Image flip via the CSS :hover pseudo-class

Lastly, Wikipedia has a "Rollover (web design)" entry with sample image flip code using a style block instead of the onmouseover/onmouseout event handlers and substituting a span element for the img element. The code below adapts the Wikipedia code to the Script Tips #2-4 script and executes successfully on my computer when using either MSIE 5.1.6 or Netscape 7.02:

<head>
<style type="text/css">
a {display:block; width:240px; height:30px;
background-image:url(image_path/menu1off.gif);}
a:hover {background-image:url(image_path/menu1on.gif);}
a span {display:none;}
</style></head>
<body>
<a href="http://www.cnn.com"><span>The images are displayed here.</span>
</a></body>

In the next entry, we'll examine a script that spans Script Tips #5-9 and is highlighted by the confirm( ) method, the ! logical operator, and the history object.

reptile7

Comments:
Wow. This really made my day. Thanks a lot!

Javascript Online Training Angularjs Training in CHennai
 
Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)