Tuesday, February 28, 2006
Introduction to Image Flipping
Blog Entry #31
I see that HTML Goodies is launching a new JavaScript primer series - as of this writing, Primers Number 1 and 2 have been posted. I've read through them both, with some disappointment; without offering a detailed critique, I'll point out that if the series' author, Mark Kahn, is going to hit the reader with the -= assignment operator and the parseInt( ) function in his first primer, then he is clearly not writing for the newbie (or so it would seem, anyway - I can't claim to read his mind on the matter). As I made clear in my first blog entry, the great strength of HTML Goodies is that it targets "Weekend Silicon Warriors" who are indeed often starting from scratch. Largely for this very reason, Joe Burns' 'classical' JavaScript primers, taken as a whole and notwithstanding their faults, still constitute the best JavaScript instructional material on the Web, and one can only hope that they are not eventually deleted from the HTML Goodies site.
And now, back to our regularly scheduled program...
In Blog Entry #15, we discussed the Image object and its properties, which collectively were once part of JavaScript but are now handled by the Document Object Model. We noted that many of the Image object's properties are read/write and also put together a demo that sets on command new values for the width, height, hspace, vspace, and border properties of a thumbnail image. However, we did not in that entry write the all-important Image src property, and we'll do that today as we dissect HTML Goodies' JavaScript Primers #15, "Image Flip Using OnMouseOver." The process of "image flip" (a.k.a. "image rollover"), in which one image is swapped for another by changing the source URL of an HTML <img> placeholder, receives its fair share of attention at HTML Goodies:
(a) In the HTML Goodies JavaScript Primers series, image flipping crops up in Primer #15, Primer #16, the Primer #23 Assignment, Primer #27, and Primer #28;
(b) The HTML Goodies "Web Graphics" section sports "So, You Want An Image Flip, Huh?" and "So You Want Another Image Flip, Huh?" tutorials;
(c) The Beyond HTML: JavaScript section of HTML Goodies features a "So, You Want A Dual Image Flip, Huh?" tutorial;
and this might not even be a complete list.
But back to Primer #15, which serves as a suitably straightforward introduction to the image flip topic; its simple script appears below:
<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>
As illustrated on Joe's demo page, the script uses mouseover and mouseout events to toggle back and forth between two image files, "menu1on.gif" and "menu1off.gif":
The "menu1on.gif" image =
The "menu1off.gif" image =
The image that initially loads along with the rest of the demo page, "menu1off.gif", is set by the <img> tag:
<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1">
This image element is itself a hyperlink whose anchor tag holds onMouseOver and onMouseOut commands for changing the image source. Consider the onMouseOver command, which replaces the "menu1off.gif" image with the "menu1on.gif" image:
onMouseOver="document.pic1.src='menu1on.gif';"
In accord with the right-to-left complexion of assignment statements, which we discussed in the previous post, this command says, "We will assign the value 'menu1on.gif' to the src property of the pic1 image object in the current document when we move the mouse cursor over this link." Operationally, there's nothing really new here: flipping images by assigning a new file to an image's src property is very much like linking to a Web page by assigning a new file to the window's location property (we covered window.location="http://www.some_web_page.com" commands in the onSubmit section of Blog Entry #10).
Finally, moving the mouse cursor away from the "menu1on.gif" image triggers the onMouseOut="document.pic1.src='menu1off.gif';" command, which reinstalls the "menu1off.gif" image. Pretty painless for our first image flip, eh?
Other code possibilities
(1) In the "Deconstructing the Script" section of Primer #15, Joe says, "Notice the IMG command is linked to the onMouse Event Handlers in the HREF command through that NAME='pic1' command. You'll need that to link the two commands together." However, we saw in Blog Entry #15 that it's not necessary to name an image object in order to write its properties; checking the source code of the demo page, we see that the "pic1" <img> is the third image of the document, allowing us, if desired, to retool the onMouseOver and onMouseOut commands as:
onMouseOver="document.images[2].src='menu1on.gif';" onMouseOut="document.images[2].src='menu1off.gif';"
and then leave out the NAME="pic1" in the <img> tag.
(2) On your own page, you might not want a flippable image to double as a link, in which case you have several options:
(a) You can leave the href attribute blank (href=""), as is done in the Primer #15 Assignment answer;
(b) You can replace the anchor tags with corresponding span tags
(<span onmouseover="document.images[x].src='imageA.gif';" onmouseout="document.images[x].src='imageB.gif';">
<img src="imageB.gif"></span>);
(c) For that matter, you can bring the onMouseOver and onMouseOut commands into the <img> tag itself and thus simplify their hierarchy statements as follows:
<img onmouseover="this.src='imageA.gif';" onmouseout="this.src='imageB.gif';" src="imageB.gif">
(The "this" special operator is briefly described here in Netscape's JavaScript 1.5 Core Reference.)
HTML Goodies' JavaScript Primers #16 is a close companion to Primer #15 - if truth be told, it does little more than functionize the Primer #15 Script - and we'll look at it briefly in the next post.
reptile7
- posted by A. Peak @ 2:21 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)