Simulate a Windows-like Button Using JavaScript
Have you ever seen these fancy custom graphic buttons on a Website? Have you
ever wondered how they're done? Well, the truth is that implementing them isn't
hard! Today, we're going to use the HTML
<img>
tag and
JavaScript to accomplish this effect.
Our button will have 3 different states, and a different image for each:
The first state is "up" or "normal", where the filename of
the image will be "ButtonSubmit.gif"
The second state is "over" and it will appear when the user's mouse
cursor is over the button. The filename of the image will be
"ButtonSubmit-over.gif"
The third state is "down" and appears when the button is clicked. The
filename of the image will be "ButtonSubmit-down.gif".
Let's take a look at the code:
<script>
function ReplaceImage(sImgName,sImgFile){
document.images[sImgName].src = sImgFile;
}
</script>
<a href="#" onMouseOver="ReplaceImage('ImgSubmit',
'ButtonSubmit_over.gif')"
onMouseDown="ReplaceImage('ImgSubmit','ButtonSubmit_down.gif')"
onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">
<img src="ButtonSubmit.gif" name="ImgSubmit"
border="0"></a>
The function ReplaceImage()
has 2 parameters: sImgName
and sImgFile
.
sImgName
is the name of the image object in the document.images
collection. sImgFile
is the actual image file path relative to the
current page location. The function simply replaces the old image displayed by
the image object with the one specified by sImgName
.
Let's name our image object "ImgSubmit
". Because Netscape
will only detect the mouse moving over and off links, we need to put the <img>
tag within a link tag. Of course our link won't lead anywhere: it simply
detects the cursor movements.
Now, we can use 3 important event handlers of the <a>
tag: onMouseOver
,
onMouseOut
and onMouseDown
. The first image displayed
in our page will be "ButtonSubmit.gif". When we move our cursor over
this image, we want it to be replaced with the
"ButtonSubmit-over.gif". To accomplish this, we simply use the onMouseOver
event handler for the link:
<a href="#" onMouseOver="ReplaceImage('ImgSubmit',
'ButtonSubmit-over.gif')">
Now that we've made this amendment to the script, when a user moves their cursor
over the button, the "ButtonSubmit.gif" image will be replaced with
"ButtonSubmit_over.gif".
But what will happen if the visitor moves the cursor off the image? The answer
is that nothing will change -- the image will remain the same
("ButtonSubmit-over.gif"). Why? Because we haven't used the onMouseOut
handler yet.
We need to detect the MouseOut
event and call the ReplaceImage()
function again, in order to bring the button to its initial state (i.e. to have
"ButtonSubmit.gif" displayed again). After we introduce the onMouseOut()
event handler, the code for our graphic button will look like this:
<a href="#" onMouseOver="ReplaceImage('ImgSubmit',
'ButtonSubmit-over.gif')"
onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">
<img src="ButtonSubmit.gif" name="ImgSubmit"
border="0"></a>
Now our button is almost perfect... I'll explain why I said "almost"!
At the moment, if a user clicks on the button, the image won't change. To allow
it to change, we need to make one last alteration to our code.
This time, we need to detect the MouseDown
event, and call ReplaceImage()
with "ButtonSubmit-down.gif" as a second parameter. This will simply
replace the already-displayed "ButtonSubmit-over.gif" with
"ButtonSubmit-down.gif". Finally, we've got the perfect Windows-like
button:
<a href="#" onMouseOver="ReplaceImage('ImgSubmit',
'ButtonSubmit-over.gif')"
onMouseDown="ReplaceImage('ImgSubmit','ButtonSubmit-down.gif')"
onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">
<img src="ButtonSubmit.gif" name="ImgSubmit"
border="0"></a>
In summary, to make a graphical button with images and JavaScript, we must:
-
place the image inside the
<a>
tag.
-
use
onMouseOver
, onMouseOut
and onMouseDown
event handlers to detect the movement of the mouse cursor down, over and out of
our link.
-
have each one of the 3 event handrs call
ReplaceImage()
function
with the appropriate image file as a second parameter.
You can see an example of a graphic button implemented with JavaScript
here