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!

{ 40 comments… read them below or add one }

Mohamed Shimran September 16, 2013 at 6:02 am

Is it possible to customize the javascript button with css?

Reply

aliki June 12, 2013 at 11:58 pm

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

Reply

JC TAN April 14, 2012 at 3:49 pm

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

Reply

piotr February 9, 2012 at 7:50 pm

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

Reply

jsnewbie March 16, 2012 at 3:52 am

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

Reply

asimenia kosmimata January 31, 2012 at 9:38 pm

very useful post

Reply

Paul January 7, 2012 at 7:24 pm

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.

Reply

Paul January 6, 2012 at 4:10 pm

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

Reply

Paul January 6, 2012 at 4:07 pm

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;
}

Reply

Cedric December 12, 2011 at 10:25 pm

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

Reply

mrshivaraj123 August 20, 2013 at 1:20 pm

Change the function names: See attached image.

So you can have multiple buttons in same page.

Reply

HTML newbie December 7, 2011 at 11:59 am

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

Reply

Jason March 15, 2012 at 5:52 pm

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

Reply

kieraen October 15, 2011 at 3:15 pm

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

Reply

Basha October 11, 2011 at 6:48 am

Excellent Thank you

Reply

jose October 9, 2011 at 10:15 pm

“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…

Reply

j October 8, 2011 at 5:50 am

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

Reply

Stefan September 14, 2011 at 6:28 am

Very very useful script. Thanks man.

Reply

iTVshowz September 6, 2011 at 6:30 pm

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

Reply

hemender August 23, 2011 at 5:04 pm

Thanks buddy

Reply

Leave a Comment

Previous post:

Next post: