Hover buttons.

Hover buttons without Java Applet.

On many web pages nowadays, you can find so-called hover buttons. These are buttons (or images) that change when you hover your mouse over it or when you click them. Here on the left is an example.

Several modern and very popular web editor programs (like FrontPage) use a Java Applet to achieve this effect. The disadvantage of this is that the visitor of your site must have "Java Virtual Machine" installed to make this work. A lot of people however, don't have this Java RunTime environment installed on their PC, or they have disabled the execution of Java Applets. The reason for it is that, in opposite of JavaScript, it is possible to spread virusses via Java Applets. If the visitors PC does not support the execution of Java Applets, the buttons don't even show-up, so they can't click on anything. So much for your nice hover buttons! To avoid this we can also use an image as a button, and a very small piece of JavaScript to achieve the hover effect. We will create an example of this step by step, and show how this works.

First of all we need two images, one to represent the button in a normal state, and one to represent the button while the mouse is over it. These two pictures should of course have the same size, and the most important elements (such as in this case the text) must be on the same coordinates of the image. Below you can pick up the images that we will use for our example. You can right-click them and save them in the same folder where we will create our example.

This is the image as is is in a normal state.

This is the image as it is while the mousepointer is over it.

To create this example we need two pages, one containing the hover button and one page that the hover buttons hyperlink is pointing to( page2.htm ). In our example, page2.htm is just an empty page that only contains a link back to the page that contains the hover button

On the page where we want the hover button, we start with putting the image of the button on the page, and make it a hyperlink to the second page, page2.htm.

<a href="page2.htm"><img
border="0" src="page2.gif" width="100" height="20"></a>

Here on the left is a link to the page as it is so far. As you can see, it is not very smashing (yet). Before we can add the JavaScript to change the SRC property of the IMG tag, we need to be able to identify the IMG tag that we want to change. To be able to do this, we need to assign a value (in this case P2) to the NAME property of the IMG tag. This is done by adding the red text below.

<a href="page2.htm"><img name="P2"
src="page2.gif" width="100" height="20" border="0"></a>
      

The next thing we do is add the JavaScript function changepic() somewhere on the page. I did it in the top of the document. The code for this function is here below.

<script language="JavaScript">
<!--
function changepic(imgTagName,imgFileName)
{
document.images[imgTagName].src=imgFileName
}
// -->
</script>

The only thing this function does is changing the src property of the  img tag, that is identified by the name in the first parameter, to the filename that is identified by the second parameter.

The next thing we have to do is make sure that this function is called with the proper parameters when the mouse is hovered over the image. Below we see how the onMouseOver() event of the hyperlink is used to call the function. This is done by adding the red text. The first parameter, in this case P2, is the name of the image tag that needs to be changed. The second parameter, in this case page2-sel.gif is the name of the image file that must be showed while the mouse is over the image.

<a href="page2.htm"
onMouseOver="changepic('P2','page2-sel.gif');"><img
name="P2"
src="page2.gif" width="100" height="20" border="0"></a>

Here on the left is a link to the example as we created it so far. As you can see, the image changes nicely when we hover the mouse over it, but unfortunately we forgot to change it back when we move the mouse away from the image. Changing the picture back to it's original is done in the same way, except that we now use the onMouseOut() event to call the function. You can see this in the red text below.

<a href="page2.htm"
onMouseOver="changepic('P2','page2-sel.gif');"
onMouseOut="changepic('P2','page2.gif');"><img
name="P2"
src="page2.gif" width="100" height="20" border="0"></a>

Again here on the left there is a link to the example as we built it so far. It looks like it is all working correctly, but with a small "final touch" we can still improve it a little. We have to realize that when we publish this page to the internet, this means that when the visitor of our site hovers his mouse over the button, the image has to be picked-up from the site. This can, specially when slow connections or servers are involved, take some time. If this happens, the whole effect goes down the drain. We can, however, make sure that the new image does not have to be picked-up from the server but is already present in the visitors local cache. To accomplish this, we have to make sure that all images are downloaded with the page. Of course we don't want this to be visible for our visitor. We can do this by adding an invisible layer to the page, containing all the images we need. How this is done is shown below.

<!-- Image PreLoad -->
<layer name="imagepreload" visibility=hidden>
<div style="visibility:hidden">
<img src="page2-sel.gif" width="100" height="20">
</div>
</layer>
<!-- End Image PreLoad -->

Naturaly we want this to work for both Netscape and Internet Explorer, so we use both the layer tag and the div tag.

On the left there is a link to the "ready to run" product of our effort. If we want to have more hover buttons on our page, we can do this in the same way. We only have to make sure that all the button images get a different  name, that the proper name is used in the fuctioncall to changepic(), and that all the images we need are added to the preload layer.