Rollover Buttons

• Move your mouse pointer over each button to see it change from blue to red.
• Click down on the button to see it change from red to green.
• Release mouse to see button change back from green to red.
• Move mouse pointer off of button to see it change back to blue.
  

Step 1

Create your button images.
You will create 3 images for each button--1 for the "up" statate, 1 for the "over" state and 1 for the "down" state.

= home_up.gif = home_over.gif = home_down.gif	= portfolio_up.gif = portfolio_over.gif = portfolio_down.gif	= resume_up.gif = resume_over.gif = resume_down.gif
= about_up.gif = about_over.gif = about_down.gif	= contact_up.gif = contact_over.gif = contact_down.gif

 

Step 2

Place the up version of your button on your page:

<img src="home_up.gif" alt="home" border="0" />

 

Step 3

Add a name attribute to your image.

<img src="home_up.gif" alt="home" border="0" name="homeImg" />

Each <img /> that has a rollover will need to have a different name.

 

Step 4

Make the image clickble by adding the <a> tag:

<a href="foo.html">
<img src="home_up.gif" alt="home" border="0" name="homeImg" />
</a>

 

Step 5

Add the following attributes to your <a> tag--onmouseover, onmouseout, onmousedown and onmouseup:

<a href="foo.html" onmouseover="" onmouseout="" onmousedown="" onmouseup="">
<img src="home_up.gif" alt="home" border="0" name="homeImg" />
</a>

 

Step 6

Add the following inside the "quotes" for onmouseover

<a href="foo.html" onmouseover="document.homeImg.src='home_over.gif'" onmouseout="" onmousedown="" onmouseup="">
<img src="home_up.gif" alt="home" border="0" name="homeImg" />
</a>

This tells the browser to swap home_up.gif to home_over.gif when you mouse over it.
Note that 'home_over.gif' are inside of 'single quotes'
It's OK if your <a> tag wraps to the next line, but make sure it wraps naturally--do not hit the ENTER key to go to the next line, or the browser might think the tag is broken.

 

Step 7

Add the following inside the "quotes" for onmousout:

<a href="foo.html" onmouseover="document.homeImg.src='home_over.gif'" onmouseout="document.homeImg.src='home_up.gif'" onmousedown="" onmouseup="">
<img src="home_up.gif" alt="home" border="0" name="homeImg" />
</a>

This tells the browser to restore the button to its original state of home_up.gif.
Note that 'home_up.gif' is inside of 'single quotes'

 

Step 8

Add the following inside the "quotes" for onmousedown

<a href="foo.html" onmouseover="document.homeImg.src='home_over.gif'" onmouseout="document.homeImg.src='home_up.gif'" onmousedown="document.homeImg.src='home_down.gif'" onmouseup="">
<img src="home_up.gif" alt="home" border="0" name="homeImg" />
</a>

This tells the browser to swap home_over.gif to home_down.gif when you press down on it.
Note that 'home_down.gif' is inside of 'single quotes'

 

Step 9

Add the following inside the "quotes" for onmouseup

<a href="foo.html" onmouseover="document.homeImg.src='home_over.gif'" onmouseout="document.homeImg.src='home_up.gif'" onmousedown="document.homeImg.src='home_down.gif'"
onmouseup="document.homeImg.src='home_over.gif'">
<img src="home_up.gif" alt="home" border="0" name="homeImg" />
</a>

This tells the browser to swap home_down.gif with home_over.gif--since you'd be releasing the button while still over it.
Note that 'home_over.gif' is inside of 'single quotes'

 

Step 10

Repeat this for every button image.
You do not need to have a "down" state if you don't want to.
Just don't use onmousedown and onmouseup attributes in your <a> tag.

 

Step 11

To make the rollovers faster and smoother, preload the images using the following Javascript.

Put the following code somewhere before the closing </head> tag:

<script language="JavaScript">

// this preloads home_up.gif into the browser's cache
home_up = new Image(125, 50);
home_up.src = "home_up.gif";

// this preloads home_over.gif into the browser's cache
home_over = new Image(125, 50);
home_over.src = "home_over.gif";

// this preloads home_down.gif into the browser's cache
home_down = new Image(125, 50);
home_down.src = "home_down.gif";

// add these lines for every button image

</script>

In the example above:

• 125 is the width of the image
• 50 is the height of the image
• The lines that start with // are comments, and are not necessary for the script to work

Do this for every button.

This is a little bit of extra work, but this minimizes lag time when the user mouses over and mouses down on the buttons.