reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

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.

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).

(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: