CSS Image Rollover Effect

Image rollovers are useful tools in helping your end-users track their mouse across your Web page. A website designer will often pack a lot of detailed information into a page, and the end-user will need a visual queue that her mouse has rolled over something.

There are two basic ways to create a rollover. You can use the client-side scripting language called JavaScript to accomplish the task, or you can use Cascading Style Sheets (CSS) to accomplish the task. This article covers the Cascading Style Sheets method.

Creating the Text Rollover

Create a generic XHTML document in your text editor as seen in the image.

* Include the DOCTYPE Transitional and your encoding tags.
* Include the title tags between the head tags.
* Include the style tags between the head tags.

Between the body tags, type the following words:

This is a text rollover.

Enclose this sentence with the span beginning and end tags, as shown. Inside the beginning span tag, type:

class="rollover"

Upload your document to your Web server.

Creating the Stylesheet Rules

Type the following between the style tags at the top of your document:

span.rollover {background-color: white;}
span:hover.rollover {background-color: yellow; color: maroon;}

First, create the span rollover instruction for the style sheet. Type "span," then a period, then "rollover," where rollover matches the class attribute that was given to the span tag. This states that the background between the span tags is white, which looks like a blank background color to the end-user.

Next, create the span, plus a colon, plus a period, plus rollover, which is the class of the span tag. The hover instruction means "When you place your mouse pointer over the text within the span tag, follow these instructions." When the end-user places the mouse over the text, the background turns yellow and the text turns maroon.

Creating a Button Rollover

There is a relatively easy way to create a nice-looking button out of the text on your Web page. Just add the following attributes to the span.rollover instruction:

background-color: navy; border: 5px white outset; font-family: Georgia; font-size: 14pt;
color: white;

First, change the background color from white to navy. Next, add the border instruction, which has three parts: the border-width, the border-color and the border-style attributes. We have chosen a 5-pixel, white, outset border, meaning that there is a white, rectangular box bordering the contents of the span tag that is 5 pixels thick.

Change the font family to Georgia at 14 pt. Finally, change the font's color to white, so it shows up against the navy background. Upload the document to your Web server and test it out.

Before the Rollover

This is a snapshot of the Web page before you place your mouse pointer over the text. The text is white, and the background is navy blue.

After the Rollover

This is a snapshot of the Web page while your mouse pointer is over the button. The background is yellow, and the text is maroon.

Resources

• Web Amp: CSS Image Rollovers