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
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.
Step by Step
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>
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:
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 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'"
<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>
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.