| home / experts / dhtml / column1 |
 
|
|
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.
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.
First of all we must assemble the component parts by creating two images:
a regular
raised button:
and a pressed button:
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>
|
Our preference is for the interCap style. We are also committed advocates of the descriptive prefix naming convention.
|
This image now has a place in the images array, and can be referenced as:
document.images["imBut"]
NOTE
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:
document.images['imBut'].src = 'imButdown.gif'We call this script snippet in our <A> tag whenever our mouse button is down:
onMouseDown = "document.images['imBut'].src = 'imButdown.gif'"...and this one whenever our mouse button is released (up):
onMouseUp = "document.images['imBut'].src = 'imButup.gif'"
Resulting in:
<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>
IMPORTANT
Produced by Peter Belesis and
| ||||||||||||||||||||
All Rights Reserved. Legal Notices.
Created: 07/23/97
Revised: 09/28/97
URL: http://www.webreference.com/dhtml/column1/
