JavaScript Button

Coding a JavaScript button by yourself

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.

Build Web Forms Faaaast!!

The image object

In order 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:

Accessing the Image From JavaScript

<SCRIPT language="JavaScript">
var myimgobj = document.images["jsbutton"];
</SCRIPT>

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

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.

<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "buyit15u.jpg";
return true;
}
</SCRIPT>

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 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 also.

<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:

<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "buyit15u.jpg";
return true;
}
function changeImageBack()
{
 document.images["jsbutton"].src = "buyit15.jpg";
 return true;
}
</SCRIPT>

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 language="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://www.javascript-coder.com/"
onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()">

Image Pre-fetching

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://www.javascript-coder.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