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