PageResource.com - Web Development Tutorials

JavaScript Hover Buttons

Change the image when a mouse moves over it

Using a javascript to change an image when someone moves their mouse over it has become quite popular. I've heard it called many things: "hover buttons", "rollover", and "image highlighter" are a few. What happens is that we use two images, a link, and a javascript to make a clickable image link that is "highlighted" when a mouse passes over it.

To begin, you will need to make yourself two images of the same size, making whatever changes you would like to the second one. Below is an example where I chose to make an image with blue text and one in red text. The red-text image is what I want people to see when they move their mouse over the blue-text image.

OK, that is the easy part. Now we have to have a script that will do all the work for us. I'm going to go ahead and put the whole thing below, and explain the script in parts afterward. I got this script from a free script page, did some formatting for readability, changed some variable names, and added a check for the image object. Here is the code for the HEAD section of your page:


<HEAD> 
<SCRIPT language="JavaScript">
<!--

  if (document.images)
   {
     pic1on= new Image(100,25);
     pic1on.src="shoes2.gif";  

     pic1off= new Image(100,25);
     pic1off.src="shoes1.gif";
   }

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>
</HEAD>

Part 1: Browser Check

All right, the first step is to check for a browser that supports all the functions and declarations we will be using. This is done with Object Detection:

if (document.images)
{
 statements (see code above/explanation below)
}

This checks to ensure the browser supports the image object before it preloads the images. This way, you can avoid javascript errors in older browsers.

Part 2: Define and Load Your Images

Now, we get the images involved in the scheme here:

if (document.images)
{

This checks to ensure the browser supports the image object.

pic1on= new Image(100,25);

This defines a new image called "pic1on" with a width of 100 and a height of 25.

pic1on.src="shoes2.gif";

This gives the source, or url of the image. This allows it to load now so users don't wait for a new image to load when they pass their mouse over it later. Be sure this is the url of your 2nd image. This is the one you want people to see when their mouse passes over.

pic1off= new Image(100,25);

Now you define your default, or 1st image. pic1off.src="shoes1.gif";

Give the url of your default image so it is loaded.

} : Ends the image defining and loading statements.

Function 1: The mouseover Function

Now we get to the function that will be triggered by the mouse moving over the image:

function lightup(imgName)
{

This defines a function named "lightup". It is reading in a parameter called "imgName". "imgName" is going to be the name="pic1" attribute of the 2nd image from our HTML document. It is sent to this function when we call it later in the HTML document (see below). imgName turns out to be "pic1". The "{" begins the group of statements for the function.

if (document.images)
{

Another check and beginning of statements for browsers with the image object.

imgOn=eval(imgName + "on.src"); This defines the variable "imgOn" as the sum of the variable "imgName" and the string "on.src". Remember, the function read in "imgName" as "pic1", so the sum ends up as "pic1on.src", which is defined earlier as the url of our 2nd image.

document[imgName].src= imgOn;

Now, we define imgOn for the document, so it loads the correct image. By substituting what we got for imgOn a moment ago, and substituting "pic1" for imgName (which was sent to the function), we get this:

document[pic1].src=pic1on.src.

This is why we need to use the name="pic1" attribute in the image tag in our HTML later. This makes a reference to an image in the document by the name of "pic1". The new source (url) for the image is now the value of "pic1on.src", which we defined earlier as "shoes2.gif", our 2nd image. A bit complicated at first, but it works out nicely, doesn't it?

} } : These end the "n3" statements and the function statements.

Function 2: When the Mouse Leaves the Image


function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//---->

</SCRIPT>
</HEAD>

This function does the same thing as the last one, except that it occurs when the mouse moves off the image. Thus, I named the function "turnoff" since it turns the previous function "off" and returns to the 1st image. After the function ends, the script and HEAD tags are closed.

Finally, the HTML!

Now, go down into your BODY section and find out where you would like your image to go. You will then put in the following linked image code. You should place everything on one line, I have it this way only for readability.

<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="http://www.pageresource.com/images/shoes1.gif" name="pic1" width="100" height="25" border="0"></A>

Notice how we call our function "lightup" with the parameter 'pic1' on the Mouseover. We then call the function "turnoff" with the parameter 'pic1' on the Mouseout. The action is all done in our link tag. You can link to any url you wish here, and that will be where the user goes if they click the image. In the image tag, use your first (default) image as the image source. Also, be sure you use the name="pic1" attribute, as well as defining your height and width. This will make sure the script knows the name, height, and width of your image and will run smoothly. The border attribute is up to you. I chose zero for mine because I wanted the image to look like text.

The Final Product: A Changing, Linked Image


Yes, there it is. Move your mouse over it and see the text turn red! You can click it if you want, but you'll end up back at the main JavaScript Page......

But I Want to do this for Multiple Images!

No problem. You can use it for as many images as you wish. Just be sure to define your other images along with your first. Remember, you need two images for every one you want to change. To add extras, define them first back in the script in the HEAD section:

  if (document.images)
   {
     pic1on= new Image(100,25);
     pic1on.src="http://www.pageresource.com/images/shoes2.gif";  
     pic2on= new Image(100,25);
     pic2on.src="http://www.pageresource.com/images/story2.gif"; 

     pic1off= new Image(100,25);
     pic1off.src="http://www.pageresource.com/images/shoes1.gif";
     pic2off= new Image(100,25);
     pic2off.src="http://www.pageresource.com/images/story1.gif"; 
   }

Now, be sure you name it correctly in the HTML in the BODY section. For the new image here, we will name it "pic2". (For more, just use "pic3", "pic4", and so on). Then just link it to another page:

<A HREF="newpage.html" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
<IMG SRC="http://www.pageresource.com/images/story1.gif" name="pic2" width="100" height="25" border="0"></A>

Now you will have two changing images linking to different places!


Do this for as many image links as you wish.....it can add a nice impact to your page for those with newer browsers.

Well, that does it for now. Let's move on to the next section,
JS Hover Buttons 2: Changing a Different Image.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy