View Source: Advanced CSS Rollovers

Rating: 
Body: 

To make a Web page more visually exciting, Web designers often use images that change appearance when a mouse is moved over it. You can use rollover images to spice up a navigation bar by making graphical buttons highlight when moused over. Or, for a simple visual effect, you could have a black and white photo change to a color image when a visitor mouses over the picture.

Traditionally, Web designers have relied on JavaScript programming to make this kind of magic happen. By writing a JavaScript program you can swap one image for another; many Web design programs, such as Dreamweaver, include menu commands to simplify the process of adding the necessary JavaScript. Fortunately, there's an even easier method of creating rollover images -- one that doesn't require any JavaScript to work.

Cascading Style Sheets, a Web designer's most powerful design tool, provide a very simple method for creating a rollover image effect. In a nutshell, CSS lets you place an image in the background of any HTML element. In this case, you add a background image (a graphical button, for example) to a link. CSS also lets you style the appearance of a link when the mouse hovers over the link. This useful feature of CSS means you can change a link's background image when the mouse rolls over the link (Figure 1).

20070820_fg01.jpg
Figure 1. Forget JavaScript -- you can create dynamic rollover images using just CSS. Click here to see a live demo.

The exact process of creating CSS rollovers is a little more involved than that, so I'll teach you step-by-step how to create them. In addition, you'll learn a nifty technique for avoiding one problem often associated with CSS rollovers: the delayed appearance of the rollover image.

First, A Little Background
To create a CSS rollover, you need to understand the CSS properties that control the background. CSS lets you control the color of the background, add an image to the background, specify how or whether the background image repeats, and dictate a precise position for the image.

To add an image to the background of a CSS rule, use the background-image property. This property requires a path to the particular image you wish to use. Say you're creating a style for a particular link; you've added an ID name to the link so you might have HTML like this: <a href="homepage.html" id="home">Home</a>. To add an image to the background of that link, you'd create a CSS rule like this:

20070820_fg05.jpg

Note for Dreamweaver users: you can set all of the CSS background properties when you create a style in Dreamweaver. Just select the "Background" category in the "CSS Rule Definition" window.

Because background images will tile left to right and top to bottom, you can make the image appear only a single time (a good idea if the background image is a single button with obvious edges):

20070820_fg06.jpg

Finally, you can control the placement of the image within the background of the HTML element you're styling by using the background-position property. So to place the image in the top left corner of the element, you'd write this:

20070820_fg07.jpg

The first number of the background position represents where the left edge of the image is placed in relation to the left edge of the element. The second number identifies the position of the top edge of the image in relation to the top edge of the element.

Getting Started
Now that you understand the basics of the CSS background properties, it's time to put this knowledge to work and create a navigation bar with CSS rollovers. To follow along with these instructions, click on the bolded phrase below to download the folder, then double-click on the folder to uncompress its files.

css_rollovers

Inside the main css_rollovers folder you'll find three other folders:

  • 01_start contains the files you'll be working on for this tutorial
  • 02_adv1 contains the completed files for the main tutorial
  • 03_adv2 contains an example of a more advanced use of CSS rollovers that's discussed at the end of this article.

If you're using Dreamweaver, first define a site using the css_rollovers folder as the local root folder. For a refresher on the process of defining a site see last month's View Source.

In a Web browser, open the file start.html in the 01_start folder. This Web page contains the navigation bar you will be adding rollover images to. Basically, the nav bar is a bulleted list of links. A few basic styles have already been applied to the page and the navbar: For example, the bullets before each list item are gone and underlines below each link have been removed.

Before you add any background images, you'll turn this vertical nav bar into a horizontal nav bar with links placed side by side. Just a few CSS properties are enough to get the job done. In your favorite Web page editing program, open the file styles.css in the 01_start folder. Add the following new rule to the file:

20070820_fg08.jpg

This style's name -- #navbar li -- is called a descendent selector in CSS-speak. That means this style will apply to any list item (the li tag) that's contained inside another HTML tag that has the ID navbar applied to it. In this case, the bulleted list (the <ul> tag in HTML) has an ID name of navbar, so this style will affect all items inside the bulleted list.

The float property makes the bulleted list items line up side-by-side. Next, edit the last style -- #navbar a -- so that it looks like this:

20070820_fg09.jpg

This is another example of a descendent selector. In this case, the style #navbar a applies to any link (the a tag) inside another HTML tag with the ID name navbar -- the ID applied to the bulleted list. The display: block property treats each link as its own block of content. Normally, links are treated as elements inside some other block of content -- for example, a linked word can sit on the same line as other text inside a paragraph. The main benefit of setting the link's display property to block is that it lets you control the height and width of each link accurately.

Adding a Background Image
The files accompanying this tutorial include graphical buttons for each link. Each button has the text of the link on it, so you need to specify different background images for each link. The best way to do this is to add a little identifying information to each link's HTML.

Open the file start.html in your Web editing program. Locate the following line of HTML:

20070820_fg10.jpg

Add id="home" to the opening <a> tag so that the HTML looks like this:

20070820_fg11.jpg

This step provides a unique name for that link, so that you can write a CSS rule that will specifically control the look of that one link.

Now you'll create a CSS rule that adds the background image to the link. Open the file styles.css in the 01_start folder and add the following to the end of the file:

20070820_fg12.jpg

Save both the start.html and styles.css files and preview the start.html page in a Web browser. You'll notice a couple of peculiar things (circled in Figure 2). First, only a small portion of the button is visible; and second, the text "Home" sits on top of the text of the button.

20070820_fg02.jpg
Figure 2. To fully display a background image, the styled element must provide a large enough space to display the entire image. In this case, the entire "Home" button isn't visible because the area of the screen dedicated to the "Home" link isn't large enough.

Background images only fill as much space as is available. In this case, the link (the text "Home") takes up only a small space on the page. Since the button is larger than that space, it isn't entirely visible. To fix this, you simply set the link's width and height to match the width and height of the graphical button. In the styles.css file, edit the #navbar #home style so that it looks like this:

20070820_fg13.jpg

In this case, the graphic used is 30 pixels tall and 80 pixels wide. For your own rollovers, you'll specify a height and width that matches the graphic you create. If you create a navigation bar composed of several buttons you'll most likely find that each button has a different width depending on each button's text.

Hiding the Link's Text
At this point, the entire width and height of the button is visible. Unfortunately, the text "Home" is still floating on top of the button. You'll learn how to hide that text in a moment, but you may be wondering why that text is there in the first place.

When using images for navigation, it's a good idea to also include some straightforward HTML text. This is the purpose of the <img> tag's alt attribute -- it provides a text description of an image so that search engines and screen readers (software that reads Web pages out loud to those with vision impairments) can decipher an image's purpose.

In this case, the HTML text for this link "Home" will come in handy when Web search engines crawl the site -- since search engines ignore CSS, the only way they can know the purpose of each link is by scanning the HTML. Likewise, Web surfers using screen readers will still be able to navigate the site.

Fortunately, CSS provides an easy way to hide the link text and display just the graphical button. Open the styles.css file and edit the #navbar a style so that it looks like this:

20070820_fg14.jpg

The line you just added moves the text of each link 5000 pixels to the left of its current position. In other words, this tricky little maneuver moves the text so far to the left that it's no longer visible on the screen. The CSS text-indent property controls where the first line of a paragraph of text is positioned. Since the property has no control over the actual position of the link, the button graphic doesn't move.

This is an example of a CSS technique known as "image replacement" and is commonly used to replace a text headline with a graphic that uses more elegant typography.

Rollover Magic
Finally, you've arrived at the rollover part of this tutorial. CSS lets you control the look of a link based on how a user interacts with the link. There are four states, called pseudo-classes, that you can control:

  • a:link
  • a:visited
  • a:hover
  • a:active

A:link refers to the look of a plain, unvisited link. A:visited is the look of a link after the user has already been to the linked page; in this way you can make a link change appearance (for example, grey out the link) to indicate that the user has been there. A:active refers to the time when the user presses the mouse button down on the link.

The one we're interested in is a:hover. This pseudo-class lets you define the look of a link as the mouse hovers over it. Say, for example, you wish to make all links on a page turn purple when moused over. You could then add this style to your site's style sheet:

20070820_fg15.jpg

That CSS rule will affect all links on a page. If you want to be more selective and control the look of a single link, you could apply an ID to the HTML for that link, then create a style that refers to that ID. That's the case in this tutorial. You've already added the ID name "home" to the home link in the navigation bar, so you could create a pseudo class named #home:hover to control the look of just this one link when the mouse moves over it. To create the pseudo-class, start with the ID name followed by :hover.

The Secret Sauce
You might be thinking (as a lot of Web designers do) that the way to create a CSS image rollover would be to simply change the background image for the link. In other words, swap in the highlighted image when the mouse hovers over the link. The CSS might look like this:

20070820_fg16.jpg

A lot of designers use this technique, but it has one major flaw: The first time someone mouses over the link, there's a noticeable delay while the Web browser waits for the image to download. Depending on the speed of the user's Internet connection, the delay might be a fraction of a second or it might take a few seconds. Either way, the delay is distracting. If you've created JavaScript-based rollovers in the past, you may recognize this problem: in JavaScript you eliminate this delay by preloading the rollover graphic -- downloading the image before it's needed.

CSS doesn't have a way to preload an image, but there's a craftier technique for achieving the same effect. Instead of using two images -- one for the regular button and one for the rollover button -- you create a single image with both versions of the button. For this navigation bar, the graphic for the Home button contains both the regular and rollover buttons, one stacked on top of the other (Figure 3).

20070820_fg03.jpg
Figure 3. To avoid the distracting delay caused by downloading a second "rollover" image, use a single graphic containing both the regular and rollover views of the button.

The two button images are stacked one on top of the other in a single graphic file. The visitor never sees both buttons at once thanks to some earlier CSS work you did. If you look at the #navbar #home style you created before, you'll see that the width and height for that link are set to 80 pixels wide and 30 pixels tall. These dimensions define the visible area for the link, so even though the entire graphic is 60 pixels tall, the Web browser displays only the part of the graphic that fits in this 80x30 pixel space.

Think of the link area as a window looking out on the graphic. You can see only the part of the graphic that fits in the window. So how do you show the rollover button? Simply shift the background image's position so that the bottom button is visible in the link's "window" (Figure 4).

20070820_fg04.jpg
Figure 4. A background image is visible only in the space provided by the HTML element. If the space is smaller than the graphic, then only a portion of the image appears.

As you've already learned, CSS lets you position a background image. CSS even lets you use negative values so that you can move a graphic above or to the left of the actual visible area of the element being styled. For example, by moving the background image for the Home button up 30 pixels, the top 30 pixels of the image (the regular home button) moves out of the window and the bottom 30 pixels (the rollover button) come into view.

In the styles.css file add this CSS rule:

20070820_fg16a.jpg

This technique is called the "Pixy method" (named after its creator.) You can read about the original idea at WellStyled.com.

Save the styles.css file and preview the start.html file in a Web browser. Move your mouse over the Home button and voila -- a rollover. This may seem like a lot of work, but once you get the hang of it, this technique is actually a great time saver. For example, you now have to create only one graphic for each button, instead of two. That means you no longer have to switch between layers and export two images each time you create or edit a button.

Finishing Up
To complete this navigation bar, repeat the above steps for each of the remaining three links. In a nutshell, you'll do this:

  1. Add IDs to each link. For example, for the "Services" link, open the start.html file and add an ID attribute to the opening <a> tag like this:

    20070820_fg19.jpg

    For the other two links, use the names "about" and "contact" for their IDs.

  2. Create the link style. This style will set the dimensions and add the background image to the link. The style will be nearly identical to the #navbar #home style you created earlier. The only differences are the name of the graphic file, and the width of the link. (Since each button varies in width, you need to specify a width that matches the graphic.) For example, for the Services link the graphic file is named nav_services.png and the graphic is 114 pixels wide. So the style for that link would be this:

    20070820_fg17.jpg

    For the two other links, the images are nav_about.png and nav_contact.png. and their widths are 90 and 100 pixels each.

  3. Create the rollover style. This step takes advantage of the :hover pseudo-class and requires only that you shift the background image up 31 pixels. For example, to create the rollover for the Services link, add this style to the styles.css file:

    20070820_fg18.jpg

You can find a completed version of the tutorial in the 02_adv1 folder.

Going Further
Once you've mastered the basic concept of shifting a background image around using the CSS background-position property, many creative possibilities open up. For example, instead of just two button images (regular and rollover) you could combine three images into a single graphic file, and create another CSS rule for a link's active state (the time when the user actually is clicking the link.)

Likewise, you could create a "you are here" button -- a button that highlights to indicate which section of a site the particular page is located in. Combine that button with a regular button and rollover button image into a single graphic file and create a style that shifts the image into the proper "you are here" state for each page within a specified section of the site.

Finally, rather than creating separate graphic files for each button, you could create a single graphic file for an entire navigation bar -- all of the buttons and each button's state would be in that one file. Then you'd create CSS rules that merely shifted the position of that image to expose different button images for different links. This technique is a great way to keep your navigation bar in a single easy to update and export file; in addition, it saves your Web server from having to do a lot of work: it now only has to send a single graphic file, instead of separate files for each button.

The folder 03_adv2 contains an example of this last technique in action. Open the navbar.html file in that folder and preview it in a Web browser. The file styles.css in the 03_adv2 folder has all of the details. You can learn more about this technique by reading Dave Shea's "CSS Sprites". To see an elaborate and beautiful implementation of this idea visit http://veerle.duoh.com/blog/comments/the_xhtml_css_template_phase_of_my_...

Dave McFarland is the author of Dreamweaver CS3: The Missing Manual and CSS: The Missing Manual. You can learn more about his books and work at www.sawmac.com

Liked This? Read These!

Sharing links is a big part of what makes Facebook’s social media world go ‘round. If you’re an active Facebooker, you may take pride in curating a steady stream of entertaining, informative, and... Read More
One principle of good information architecture is to always let your site's visitor know where they are. One way to do that is the "bread crumb" trails you see on some sites (for example, Home >... Read More
Up to now, PDF files you created could only be used by the same version of Adobe Acrobat or a later version. In particular, there was no guarantee that the file would be shown properly in Acrobat... Read More
NAPL (www.napl.org), trade association for excellence in graphic communications management, the National Association of Quick Printers (NAQP), a member of the NAPL Network, and The Graphic... Read More