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:

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

Be Sociable, Share!

• 

Related posts:

1. How to get the value of a form element : check box and radio button
2. How to Submit a Form Using JavaScript
3. How to switch the 'action' field in an HTML form dynamically
4. How to use getElementById to get the elements in a form
5. The HTML Form Submit Button
6. How to set the value of a form element using Javascript
7. Using JavaScript to access form objects when there are multiple forms
8. Doing real-time calculations in a form using JavaScript
9. How to get the value of a form element : Drop downs and lists
10. JavaScript Popup Windows
11. HTML Form Tutorial Part III : Still More Input Elements
12. Using JavaScript to reset or clear a form
13. How to get the value of a form element using JavaScript
14. How to set the value of a form field using Javascript PII
15. JavaScript Form Validation Script: More features

Tagged as: beginner, javascript button, mouseover button