Simulate a Windows-like Button Using JavaScript

Have you ever seen these fancy custom graphic buttons on a Website? Have you ever wondered how they’re done? Well, the truth is that implementing them isn’t hard! Today, we’re going to use the HTML <img> tag and JavaScript to accomplish this effect.

Our button will have 3 different states, and a different image for each:

The first state is “up” or “normal”, where the filename of the image will be “ButtonSubmit.gif”

The second state is “over” and it will appear when the user’s mouse cursor is over the button. The filename of the image will be “ButtonSubmit-over.gif”

The third state is “down” and appears when the button is clicked. The filename of the image will be “ButtonSubmit-down.gif”.

Let’s take a look at the code:

<script> 

function ReplaceImage(sImgName,sImgFile){ 

  document.images[sImgName].src = sImgFile; 

} 

</script> 

 

<a href="#" onMouseOver="ReplaceImage('ImgSubmit', 

'ButtonSubmit_over.gif')"  

onMouseDown="ReplaceImage('ImgSubmit','ButtonSubmit_down.gif')"  

onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">  

<img src="ButtonSubmit.gif" name="ImgSubmit" border="0"></a>

The function ReplaceImage() has 2 parameters: sImgName and sImgFile.

sImgName is the name of the image object in the document.images collection. sImgFile is the actual image file path relative to the current page location. The function simply replaces the old image displayed by the image object with the one specified by sImgName. 

Let's name our image object "ImgSubmit". Because Netscape will only detect the mouse moving over and off links, we need to put the <img> tag within a link tag. Of course our link won't lead anywhere: it simply detects the cursor movements. 

Now, we can use 3 important event handlers of the <a> tag: onMouseOver, onMouseOut and onMouseDown. The first image displayed in our page will be "ButtonSubmit.gif". When we move our cursor over this image, we want it to be replaced with the "ButtonSubmit-over.gif". To accomplish this, we simply use the onMouseOver event handler for the link:

<a href="#" onMouseOver="ReplaceImage('ImgSubmit', 

'ButtonSubmit-over.gif')">

Now that we’ve made this amendment to the script, when a user moves their cursor over the button, the “ButtonSubmit.gif” image will be replaced with “ButtonSubmit_over.gif”.

But what will happen if the visitor moves the cursor off the image? The answer is that nothing will change — the image will remain the same (“ButtonSubmit-over.gif”). Why? Because we haven’t used the onMouseOut handler yet.

We need to detect the MouseOut event and call the ReplaceImage() function again, in order to bring the button to its initial state (i.e. to have “ButtonSubmit.gif” displayed again). After we introduce the onMouseOut() event handler, the code for our graphic button will look like this:

<a href="#" onMouseOver="ReplaceImage('ImgSubmit', 

'ButtonSubmit-over.gif')"  

onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">  

<img src="ButtonSubmit.gif" name="ImgSubmit" border="0"></a>

Now our button is almost perfect… I’ll explain why I said “almost”! At the moment, if a user clicks on the button, the image won’t change. To allow it to change, we need to make one last alteration to our code.

This time, we need to detect the MouseDown event, and call ReplaceImage() with “ButtonSubmit-down.gif” as a second parameter. This will simply replace the already-displayed “ButtonSubmit-over.gif” with “ButtonSubmit-down.gif”. Finally, we’ve got the perfect Windows-like button:

<a href="#" onMouseOver="ReplaceImage('ImgSubmit', 

'ButtonSubmit-over.gif')"  

onMouseDown="ReplaceImage('ImgSubmit','ButtonSubmit-down.gif')"  

onMouseOut="ReplaceImage('ImgSubmit','ButtonSubmit.gif')">  

<img src="ButtonSubmit.gif" name="ImgSubmit" border="0"></a>

In summary, to make a graphical button with images and JavaScript, we must:

place the image inside the <a> tag.
use onMouseOver, onMouseOut and onMouseDown event handlers to detect the movement of the mouse cursor down, over and out of our link.
have each one of the 3 event handrs call ReplaceImage() function with the appropriate image file as a second parameter.

You can see an example of a graphic button implemented with JavaScript here.

Frequently Asked Questions (FAQs) about JavaScript Windows Button

How can I create a button in JavaScript?

Creating a button in JavaScript involves using the HTML button element and then manipulating it with JavaScript. Here’s a simple example:

<button id="myButton">Click me</button>

document.getElementById("myButton").onclick = function() {
alert("You clicked the button!");
}

In this example, we first create a button with the id “myButton”. Then, we use JavaScript to find this button by its id and assign a function to its onclick event. This function will be executed whenever the button is clicked.

How can I change the text of a button in JavaScript?

You can change the text of a button in JavaScript by accessing the button’s innerHTML property. Here’s how you can do it:

document.getElementById("myButton").innerHTML = "New text";

In this example, we find the button by its id and then change its innerHTML property, which represents the content between the opening and closing tags of the button.

How can I disable a button in JavaScript?

You can disable a button in JavaScript by setting its disabled property to true. Here’s an example:

document.getElementById("myButton").disabled = true;

In this example, we find the button by its id and then set its disabled property to true. This will make the button unclickable.

How can I add a click event to a button in JavaScript?

You can add a click event to a button in JavaScript by assigning a function to the button’s onclick property. Here’s an example:

document.getElementById("myButton").onclick = function() {
alert("Button clicked!");
}

In this example, we find the button by its id and then assign a function to its onclick property. This function will be executed whenever the button is clicked.

How can I change the style of a button in JavaScript?

You can change the style of a button in JavaScript by accessing the button’s style property. Here’s how you can do it:

document.getElementById("myButton").style.backgroundColor = "red";

In this example, we find the button by its id and then change its background color by accessing the style property and the backgroundColor sub-property.

How can I create a button that redirects to another page in JavaScript?

You can create a button that redirects to another page in JavaScript by using the window.location property inside the button’s onclick event. Here’s an example:

document.getElementById("myButton").onclick = function() {
window.location.href = "https://www.example.com";
}

In this example, we find the button by its id and then assign a function to its onclick property. This function changes the current page to “https://www.example.com” when the button is clicked.

How can I create a button that opens a new window in JavaScript?

You can create a button that opens a new window in JavaScript by using the window.open method inside the button’s onclick event. Here’s an example:

document.getElementById("myButton").onclick = function() {
window.open("https://www.example.com");
}

In this example, we find the button by its id and then assign a function to its onclick property. This function opens a new window with the URL “https://www.example.com” when the button is clicked.

How can I create a button that submits a form in JavaScript?

You can create a button that submits a form in JavaScript by using the form’s submit method inside the button’s onclick event. Here’s an example:

document.getElementById("myButton").onclick = function() {
document.getElementById("myForm").submit();
}

In this example, we find the button by its id and then assign a function to its onclick property. This function submits the form with the id “myForm” when the button is clicked.

How can I create a button that resets a form in JavaScript?

You can create a button that resets a form in JavaScript by using the form’s reset method inside the button’s onclick event. Here’s an example:

document.getElementById("myButton").onclick = function() {
document.getElementById("myForm").reset();
}

In this example, we find the button by its id and then assign a function to its onclick property. This function resets the form with the id “myForm” when the button is clicked.

How can I create a button that triggers a function in JavaScript?

You can create a button that triggers a function in JavaScript by assigning the function to the button’s onclick property. Here’s an example:

function myFunction() {
alert("Function triggered!");
}

document.getElementById("myButton").onclick = myFunction;

In this example, we first define a function called myFunction. Then, we find the button by its id and assign myFunction to its onclick property. This means that myFunction will be executed whenever the button is clicked.