You are here: Home » All Posts » JavaScript Button » JavaScript Button

JavaScript Button

in 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

Be Sociable, Share!
  • Mohamed Shimran

    Is it possible to customize the javascript button with css?

  • http://www.theodorajewellery.com/ aliki

    Very useful! I will try it!
    http://www.theodorajewellery.com

  • JC TAN

    CONDITIONAL STATEMENT

    function showresult()
    {
    var input = document.getElementById(‘inputxt’);
    var b = input.value;
    if (b == 3)
    {
    document.write(“sdsdsdsdsdsds”);
    }
    else
    {
    document.write(“wrong”);
    }

    Nothing happens in my program guiz…. nid help sir :(

  • piotr

    Did anyone find out how to put more than on buttons in a page with this code?
    Please help!!!

    • jsnewbie

      you have to make sure to change the function names between the two or more buttons for example instead of
      function changeImage()
      for all buttons you would put
      function changeImage1()
      function changeImage2()
      etc.
      so that it doesn’t try to call to the other buttons functions.. Hope that helps

  • http://www.paraxenies.gr asimenia kosmimata

    very useful post

  • Paul

    Hi. It’s me again. I found how to make lots of button. It was rather easy, if to switch on brain)))
    Thanks again. Really very nice scripts.

  • Paul

    Sorry for big post((( Not all code is displayed((( (especially html) I tried to make it through the table.
    Still need your help!

  • Paul

    Nice work! I tried to use code from example 4. But I need to display 4 buttons.
    Links work correctly, but images on hover and on click works only in one button.
    Please help!
    Example of my modifications:

    upImage = new Image();
    upImage.src = “but1m.png”;
    downImage = new Image();
    downImage.src = “but1c.png”
    normalImage = new Image();
    normalImage.src = “but1n.png”;
    function changeImage()
    {
    document.images["jsbtn1"].src= upImage.src;
    return true;
    }
    function changeImageBack()
    {
    document.images["jsbtn1"].src = normalImage.src;
    return true;
    }
    function handleMDown()
    {
    document.images["jsbtn1"].src = downImage.src;
    return true;
    }
    function handleMUp()
    {
    changeImage();
    return true;
    }

    upImage = new Image();
    upImage.src = “but1m.png”;
    downImage = new Image();
    downImage.src = “but1c.png”
    normalImage = new Image();
    normalImage.src = “but1n.png”;
    function changeImage()
    {
    document.images["jsbtn2"].src= upImage.src;
    return true;
    }
    function changeImageBack()
    {
    document.images["jsbtn2"].src = normalImage.src;
    return true;
    }
    function handleMDown()
    {
    document.images["jsbtn2"].src = downImage.src;
    return true;
    }
    function handleMUp()
    {
    changeImage();
    return true;
    }

    upImage = new Image();
    upImage.src = “but1m.png”;
    downImage = new Image();
    downImage.src = “but1c.png”
    normalImage = new Image();
    normalImage.src = “but1n.png”;
    function changeImage()
    {
    document.images["jsbtn3"].src= upImage.src;
    return true;
    }
    function changeImageBack()
    {
    document.images["jsbtn3"].src = normalImage.src;
    return true;
    }
    function handleMDown()
    {
    document.images["jsbtn3"].src = downImage.src;
    return true;
    }
    function handleMUp()
    {
    changeImage();
    return true;
    }

    upImage = new Image();
    upImage.src = “but1m.png”;
    downImage = new Image();
    downImage.src = “but1c.png”
    normalImage = new Image();
    normalImage.src = “but1n.png”;
    function changeImage()
    {
    document.images["jsbtn4"].src= upImage.src;
    return true;
    }
    function changeImageBack()
    {
    document.images["jsbtn4"].src = normalImage.src;
    return true;
    }
    function handleMDown()
    {
    document.images["jsbtn4"].src = downImage.src;
    return true;
    }
    function handleMUp()
    {
    changeImage();
    return true;
    }

  • Cedric

    How we put more than 1 button??.. dosent work for me
    …..

    • mrshivaraj123

      Change the function names: See attached image.

      So you can have multiple buttons in same page.

  • HTML newbie

    How do i make numerous buttons on the same page?
    Doesnt seem to work with your code?

    • Jason

      Copy paste the same function however many times you have buttons in the java script code. Change the name of the function for each button (calling it the same thing in each respective function in the script and it’s corresponding call in the html).

  • kieraen

    how to make a button to exchange between 2 elements??
    i mean exchange function using javascript in html…
    for example,to exchange between first and secong input..

  • Basha

    Excellent Thank you

  • http://jphelpingblog.blogspot.com jose

    “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.”
    i think you want to say that we are intrested in de “Name” property… thats cause the src can change but the name dont…

  • http://pimplejuice.com j

    Thanks for the awesome info. I cant wait to make my site better…pimplejuice.com

  • http://spyinfo.eu/ Stefan

    Very very useful script. Thanks man.

  • http://www.itvshowz.com iTVshowz

    Really nice, Thank you so much for teaching it to me now i can make my site batter with java script

  • hemender

    Thanks buddy

Previous post:

Next post: