New JavaScript Mouse Events: onMouseDown, onMouseUp

New JavaScript Mouse Events:
using onMouseDown and onMouseUp for dynamic buttons

Pass your mouse pointer over the round navigation buttons on the top right. This rollover effect is, of course, created with the onMouseOver and onMouseOut event handlers combined with the JavaScript 1.1 images array.

Now with JavaScript 1.2, in Communicator, and JScript 3.0, in Internet Explorer 4, we have 4 (count 'em, four) more mouse action event handlers to work with: onMouseDown, onMouseUp, onMouseMove, and onDbleClick. We will be discussing onMouseMove, the most powerful of the bunch, extensively in the weeks to come. For the present example, all we need are the first two.

It will come as no surprise to learn that onMouseDown and onMouseUp, are triggered whenever a mouse button is pressed or released. Essentially, they are the two component parts of the old onClick event handler. And they provide an additional dimension to our rollovers.

R.I.P. <INPUT TYPE=BUTTON>

Till now, whenever we needed a button that would appear pressed when we clicked on it, our only choice was to create a form with a <INPUT TYPE=BUTTON VALUE="Click Me!"> tag. Like so:

Every platform supplies their own generic button shape and colour leaving the web author with no control over the look of a live button. The new event handlers have eliminated this limitation.

In our HTML, we position the raised button appropriately and give the image a name (see sidebar), in this case: imBut.

<IMG NAME="imBut" SRC="imButup.gif" WIDTH=62 HEIGHT=28 BORDER=0>

This image now has a place in the images array, and can be referenced as:

document.images["imBut"]

NOTE: It can also be referenced by its index in the images array, established by the order in which it was loaded:
 document.images[index]
This is a dangerous way of referring to images in scripts. If you edit your page, and physically insert an image before a later referenced image, the latter image will automatically be assigned a different index and your code will have to be modified to reflect the change. This relative method of addressing is best used in scripts that perform tasks on the whole image array and need an integer reference for each element for counting purposes. For our use, the absolute method, using its string "name", is best.

We now have a named displayed image, and we know the filename/URL of the image we want to load over it to create our effect. Every element in the images array has a script-modifiable src property. We swap images with JavaScript:

<A HREF="yourlinkgoeshere.html"
   onMouseDown = "document.images['imBut'].src='imButdown.gif'"
   onMouseUp = "document.images['imBut'].src='imButUp.gif'">
<IMG NAME="imBut" SRC="imButup.gif" WIDTH=62 HEIGHT=28 BORDER=0></A&gt

IMPORTANT! To speed up the image swapping, don't forget to preload the pressed image. All images that are meant to be swapped should be preloaded. Otherwise, the new image will appear only after an internet connection is made and it is downloaded. Almost defeats the purpose of a rollover.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column1/