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 thedocument.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 bysImgName
.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
andonMouseDown
. 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 theonMouseOver
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 theReplaceImage()
function again, in order to bring the button to its initial state (i.e. to have "ButtonSubmit.gif" displayed again). After we introduce theonMouseOut()
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 callReplaceImage()
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
andonMouseDown
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.