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
pic1 = new Image(125, 50);
pic1.src = "home_up.gif";

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

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

// add these lines for every button image
// continue numbering with pic4, pic5, pic6, etc...

</script>

In the example above:

• pic1, pic2 and pic 3 are arbitrary names.
• 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. Your first button would be pic1 (up), pic2 (over) and pic3 (down). Your second button woudl be pic4, pic5 and pic6.

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