Creating Rollover Buttons

Rollover buttons change their appearance when your visitor points at or hovers over them.

To change links on rollover:

1.	Create a set of links in the usual way in the (X)HTML document (see page 103) .
2.	In the CSS, style the `a:link` and `a:visited` selectors with the "initial state" of the links by adding background color or image properties.
3.	Modify the colors or backgrounds slightly for the `a:focus` and `a:hover` selectors so that the buttons change appearance when they get the focus or are pointed at.
4.	If desired, select a third style for buttons when they're activated by setting the CSS for the `a:active` selector.

Tips

This is a very simple example. You can do wonders by designing and choosing special images. For more ideas, see the article by Douglas Bowman on Sliding Doors of CSS at A List Apart : http://www.alistapart.com/slidingdoors
I used the display:block to format the usually inline a elements as block-level elements, each beginning its own line. This is not necessary for rollover buttons; you could just as easily have them in a horizontal row.

Figure 12.7. In this simple example, the unvisited and visited links have one color for background and border, the focus and hover links have a slightly darker background and border, and black text, and the active links have an even darker background and border.

Figure 12.8. The unvisited and visited states are shown at left. When the visitor points (hovers) or gives the focus to the link, it appears darker with black text (as shown on the right).

Creating Pop-ups

There's nothing that says the second image in a rollover has to appear directly on top of the previous one. If you position the second image some distance away, you can give additional details about the hovered item.

To create pop-ups:

1.	Create a set of links in the usual way in the (X)HTML document.
2.	In the CSS, style the `a:link` and `a:visited` selectors at the "home" location.
3.	Then style the `a:focus` and `a:hover` selectors with absolute positioning so that the additional informationin this case, a larger imageis displayed in a different location.

Tips

This technique builds on Eric Meyer's work on pure CSS pop-ups: http://meyerweb.com/eric/css/edge/popups/demo2.html
Set the height and width to 0 instead of display:none to make this work on Netscape 6 and IE 6. I also noticed that it was necessary to apply a background color to the a:hover (not to the img ) for it to work properly in IE 6.
There's no reason you couldn't have the pop-up include text instead of images. Or text and images.
Notice that in the example shown here, the page does not load faster just because the initial images are small. The images are all the same, original size .

Figure 12.9. You can see a fully commented version of this code on my Web site.

Figure 12.10. When the visitor hovers over a photo in the left column, a larger version appears in the right frame.

Creating Drop-Down Menus with Lists

Although we don't talk about lists until Chapter 15, I'll advance you a technique for using them to format navigation links into drop-down (or pop-out) menus with CSS. You may want to come back to this section after having gone through that chapter.

To create drop-down menus with lists:

1.	In the (X)HTML file (Figure 12.11) , create navigation links in the form of a nested list like the one on page 224. The first level items will always be visible, the second (and subsequent ) level items will only be visible when hovered over. Figure 12.11. Note that each of the submenus is a `ul` with its `li` elements within opening and closing tags of the top level `li` item. The links are empty to save space in this illustration, but clearly they'd have to have something there in the real world.
2.	Enclose the entire list in a `div` with a name like `navbar` .
3.	Enclose the rest of your page in its own `div` with a name like `content` .
4.	In the CSS (Figure 12.12) , remove the default list formatting by using #navbar ul {margin: 0; padding: 0; list-style: none;} . Figure 12.12. The basic code behind CSS drop-down menus is not complicated: remove the default formatting from the `ul` , float the list items horizontally, hide the second tier `ul` and make it appear only when hovered on. Clear floats for any content that follows .
5.	Next , make the whole link clickable (not just the text) and control its width by typing #navbar a {display: block; width:10em;} .
6.	To make the first level navbar items appear horizontally, type #navbar li {float: left; width:10em;} .
7.	To hide the second level list except when hovered over, type #navbar li ul {display: none} .
8.	To make the second level list appear when hovered over, type #navbar li: hover ul {display: block;width:10em; .

9.	To keep the rest of your page from bouncing around when the second level lists appear, add position: absolute; } to the previous line.
10.	To keep the rest of your page from floating next to the navbar, clear the float from the `content div` by typing div.content {clear:left} .
11.	Add extra formatting to make the menus pretty (Figure 12.15) . You can find the CSS file used for formatting on the Web site (see page 26) .

Tips

This technique only works on browsers like Firefox and Opera that fully support CSS' :hover pseudo-class (see page 146) . Unfortunately, Internet Explorer (up to and including version 7), only supports :hover with a elements. What a waste! One way to make CSS menus work in IE is to add a bit of JavaScript. See Patrick Griffiths' Son of Suckerfish Dropdowns for one such technique (www.htmldog.com/articles/suckerfish/dropdowns/) .
You might want to set a width (see page 174) or minimum width (also on page 174) for your page so that your navigation bars don't collapse when the page is too narrow. Unfortunately, as of version 7, IE doesn't support minimum width yet either.
You can accommodate browsers like IE that don't fully support :hover by making the top level items actual links to pages that contain the second level links. While IE users won't see your drop-down menus, they'll still be able to get to the pages where they lead.
You can use this technique to create vertical pull-out menus as well.

Figure 12.13. When no hovering is happening, the top level `li` items are visible but their `ul` babies (with the second level `li` items) are hidden.

Figure 12.14. When your visitor hovers over the list, the second level `ul` and its list items become visible.

Figure 12.15. This is the same code with some extra formatting. You can see both CSS files in full on my Web site (see page 26).

Flylib.com

Category list

Similar pages

Creating Rollover Buttons