JavaScript Button

This article shows you how to create dynamic buttons using JavaScript.

Coding a JavaScript button by yourself

JavaScript buttons can give nice effects to your web page. If done properly, JavaScript buttons give very impressive look and feel. This article shows you the creation of a JavaScript button in simple steps.

The working of a JavaScript Button

The JavaScript button effects are created using images. The JavaScript button requires three images for the different stages (normal, active and clicked). When the user moves the mouse over the image, the image is switched to the ‘active’ image. When the user clicks the image, the image is switched to ‘clicked’ image.

This in effect creates the feeling of a button. JavaScript buttons are also known as Mouse over buttons.

The image object

To display an image, the HTML code is:

<img src="buyit15.jpg" width="110" height="28" border="0" alt="javascript button">

To refer this image in the JavaScript, you need to give a name to the image using the ‘name’ attribute.

<img name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0" alt="javascript button">

The HTML code for the image is ready. Now our button will look as shown below:
sample image

Accessing the Image From JavaScript

Once the image object is inserted in the HTML page, you can access it using the name you have given.

var myimgobj = document.images["jsbutton"];

There are many properties for the JavaScript image object. However, the property that we are interested is the ‘src’ property. This property contains the image file name.

So if you change the src property of the image object to another file, the image will change.

Handling the Mouse-Over Event

We need to change the image when the user moves the mouse over the image. So we have to handle the event that the browser sends when the user moves the mouse over the image.

However, the image object does not support onMouseOver event. The workaround is to include the image within the anchor ( <a> ) tag and handle the mouse over event.

We need to correct the HTML for the image as

<a href="#" onMouseOver="return changeImage()" ><img
name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0"
alt="javascript button"></a>

We have defined the handler for the mouse over event as changeImage() function. Now we need to define this function.

function changeImage()
{
document.images["jsbutton"].src= "buyit15u.jpg";
return true;
}

The function (that we defined as the mouse over handler) just changes the src attribute to another image file.

The example is available here:
JavaScript button Example 1

Click the link above and see the code working. Move the mouse over the button; the image changes.

Handling the Mouse-Out Event

But as you can see, even when you move the mouse out, the image is not changing back to the old image.
For changing back to the old image, we need to handle the onMouseOut event.

<a href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" ><img
name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0"
alt="javascript button"></a>

The changeImageBack() event handler has to take care of changing the image when the user moves the mouse cursor out of the image. The modified code is as shown below:

function changeImage()
{
document.images["jsbutton"].src= "buyit15u.jpg";
return true;
}
function changeImageBack()
{
 document.images["jsbutton"].src = "buyit15.jpg";
 return true;
}

See the modified example file:
JavaScript button Example 2

Handling the Mouse Click Event

You may also want to change the image when the button is pressed. The Mouse Down and the Mouse Up messages are to be handled for creating this effect.

The code below handles the Mouse up and Mouse down messages also:

<a href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0"
alt="javascript button"></a>

<script type="text/javascript">
function changeImage()
{
document.images["jsbutton"].src= "buyit15u.jpg";
return true;
}
function changeImageBack()
{
 document.images["jsbutton"].src = "buyit15.jpg";
 return true;
}
function handleMDown()
{
 document.images["jsbutton"].src = "buyit15d.jpg";
 return true;
}
function handleMUp()
{
 changeImage();
 return true;
}
</script>

The example file is here:
JavaScript button Example 3

Navigating to Another Page

You can give the URL in the ‘href’ attribute of the anchor ( <a> ) tag to navigate to that page when the user clicks the button.

For example:

<a href="http://jsc.simfatic-solutions.com/"
onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()">

Image Pre-fetching

Image pre-fetching is a technique to make the browser load and decode the image early. Image pre-fetching could be used to create smooth image transition effects. You might have noticed that for the first time the button transition is not smooth, in the examples above.

The solution is to make the browser load the image and keep it in cache.

You can use the Image() JavaScript object to make the browser pre-fetch the images. The javascript code for creating the image object goes like this:

upimage = new Image();
upimage.src = "buyit15u.jpg";
downimage = new Image();
downimage.src = "buyit15d.jpg"

The image objects are created while loading the page. This forces the browser to load the images from the site and decode it.

The button code we developed, with image pre-fetching support, is given below:

  <a href="http://jsc.simfatic-solutions.com/"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="jsbutton" src="buyit15.jpg" width="110" height="28" border="0"
alt="javascript button"></a>

<script language="JavaScript">

upImage = new Image();
upImage.src = "buyit15u.jpg";
downImage = new Image();
downImage.src = "buyit15d.jpg"
normalImage = new Image();
normalImage.src = "buyit15.jpg";

function changeImage()
{
  document.images["jsbutton"].src= upImage.src;
  return true;
}
function changeImageBack()
{
   document.images["jsbutton"].src = normalImage.src;
   return true;
}
function handleMDown()
{
 document.images["jsbutton"].src = downImage.src;
 return true;
}
function handleMUp()
{
 changeImage();
 return true;
}
</script>

The example file is available here:
JavaScript button Example 4

Comments on this entry are closed.

  • It is too much to absorb all the javascript/skills needed to put only 4 buttons in my website. The examples found here filled the gap. Thank you soo much.
    Coen

  • grt wrk

  • Thanks for teaching us but have one question
    Why the example page is not working? there is only back links to this article?

  • Very useful! Thanks

  • I agree with you monka the javascript button is simple and perfect for beginners.

  • nice tutorial

  • This is what i am looking for. Thank you for wonderful article. i got it .

  • Good work lets give it a try now!

  • Very nice explained tutorial i read it once and i am starting to creating!

  • it is very easy

  • @motions.. your answer is that you don’t need to write the script again and again. But for creating different link you have to make use of anchor tag. I’ve tried myself and I believe it so…

  • Very good work, very good function for any website.

  • Very clever coding, and it works well! Thanks!
    But how would you handle the code when you want five, ten, fifteen such buttons on your page?
    It looks like, for each button, you would have to make new names for each of the three Images and their Sources, new function names, and incorporate those new function names in the <a> tag!
    I’m not an advanced coder; is there any more elegant way of handling this so that one script could be re-used and applied to all buttons???

  • thanks for sharing…i lltry it

  • I am a beginner and i think that is the easier thing to do!

  • Great little tutorial, many thanks. I thought it didn’t work until I realized just how case-sensitive javascript really is. I had accidentally capitalized the ‘i’ in “images” in the var line…  V.V

  • Thnx a lot nice tip!

  • I have allready in my page take a look…

  • I think the best simple button tutorial I found. If you are a beginning programer, this is what you want to start with. Could be nice to add a function to keep the button pressed once clicked in.
    Thanx