JavaScript (thing)

The two most common uses of JavaScript in web design, besides trivial (and evil) things like pop-ups, warning boxes, and changing the text of the status bar, are DHTML layering (fairly complex) and mouseover support. (Another common use is browser detection, but this is used mostly to resolve browser incompatibilities in regard to DHTML, so I tend to lump it in with that catagory.)

Now DHTML is rather complex, and I'm not going to cover it: if you're serious about that sort of web design, you'll probably do best to buy a book. To be honest, I wouldn't feel right about supporting that sort of thing anyway: I've found that most of the time the complexity it adds is unnecessary and detracts from the content.

Mouseovers, on the other hand, are a fairly well established feature in most good modern-day user interfaces. They feel right, at least to me. I think any site that uses images as links should at least consider them. The following JavaScript code is simple, light, and doesn't require any obnoxious browser-checking:

// mouseover.js

function load_image( handle, path ) {
        eval( handle + " = new Image;" );
        eval( handle + ".src = '" + path + "';" );
}

function change_image( dest, handle ) {
        document.images[dest].src = eval( handle + ".src" );
}

That's it, seven lines (or ten if you cound blank ones and comments). Now this can be used as a separate file (loaded with <script language="JavaScript" src="mouseover.js"></script>) or placed inline (that is, between <script> tags).

Usage:

Preloading images:

<!-- Load the images (so we don't have to wait for     -->
<!-- them to load when the mouse rolls over the image) -->
<script language="JavaScript">
// <!--
        load_image( "image_1", "button.png" );
        load_image( "image_1_over", "button_over.png" );
// -->
</script>

The actual mouseover use:

<img src="button.png" id="my_button"
        onMouseOver='change_image( "my_button", "image_1_over" );'
        onMouseOut='change_image( "my_button", "image_1" );'>

The above code will alternate between "button.png" and "button_over.png," depending on whether or not the mouse cursor is hovering over that particular image. It is also possible, instead of changing the image that is being moused-over (so to speak), to change another image (just replace the first parameter of change_image() with the id of the image you want to change) or to change more than one image at once (you could just as easily 'change_image( "my_button", "image_1_over" ); change_image( "alternate_button", "alternate_image" );').