2006-06-27: Rollovers— images or text that change appearance when the mouse moves over them— can be done in either CSS or JavaScript. These days, nearly all browsers support CSS, and it is much friendlier to work with. Also, JavaScript is occasionally disabled, and CSS never is. So I recommend the CSS approach.

Rollovers With CSS

Cascading Style Sheets can do more than just determine the initial appearance of your page. They can also adjust the appearance of the page under particular circumstances— such as when the mouse is over a link. All we have to do is define a separate a "hover" style for the link.

CSS allows us to change the appearance of the page in many ways... and there are many ways to create links. So I can't possibly anticipate every effect you might want to create. In this tutorial, I'll assume you want to write your links as normal text— which is best anyway, because search engines can read them properly— and use CSS to change the background image displayed behind the text, creating an accent. But you could also change other CSS attributes.

Ready? Here's the HTML for a simple example:

<style>
.rollover a {
text-decoration: none;
color: black;
background-image: url(default_background.png);
}
.rollover a:hover {
color: white;
background-image: url(hover_background.png);
}
</style>
<span class="rollover">
  <a href="http://www.boutell.com/">Visit www.boutell.com</a>
</span>

What's happening here? First, we define a CSS "class" called rollover for our rollover links. Here we embed the CSS commands right into the page with a <style> element, but you can do this in a style sheet instead, and I recommend that for elegance and reusability.

There are two sets of styles: a basic set for all a (anchor) elements in the class, and a second set for the "hover pseudoclass," which comes into play only when the mouse is over the link.

I chose to set the text-decoration style to eliminate the underlining of the link, and change the color style and the background-image style depending on whether the mouse is "hovering" over the link or not. You'll notice that I don't duplicate the text-decoration setting in the second case. Any styles I don't change in the hover pseudoclass style are inherited from the regular style. That's what the word "cascading" means in the phrase "cascading style sheets."

If I want more links that use the same backgrounds, I don't have to define more styles. All I have to do is wrap them in span elements with the same class attribute.

Rollovers In JavaScript

For those who don't wish to use CSS, it is also possible to do the job with JavaScript. To change the appearance of a graphic when the mouse "rolls over" it, first create both versions of the graphic in your preferred graphics program. These images must be the same size for good results. Then, use JavaScript to preload the rollover version of the image and implement the rollover behavior. Make sure that the "default" graphic still displays enough information to make the page useful to those who have JavaScript turned off.

Here is an example of the necessary HTML:

<script>
new Image().src="mybutton2.gif"
</script>
<img
 name="mybutton"
 id="mybutton"
 src="mybutton1.gif"
 onMouseOver="document.images['mybutton'].src='mybutton2.gif'"
 onMouseOut="document.images['mybutton'].src='mybutton1.gif'"
>

With this code, mybutton1.gif is displayed until the mouse enters the image. Then mybutton2.gif appears until the mouse moves out again. The new Image().src=... code makes sure that the browser starts loading the rollover image at the time the page is loaded so that it is already available when the mouse does move over the image. Otherwise, the rollover image would not start loading until the mouse actually entered it.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!

---