HTML, XHTML & CSS

68
Part IV: Scripting and (X)HTML
Figure 16-3: After you visit a page, the link text
color shows that the page was visited.
Adding this type of navigation to your site couldn’t be simpler:
1. Within the tags, add the preceding code (from Listing 16-1)
inside and including the and tags.
2. Add links inside individual tags.
3. Make sure that the entire menu is inside a tag with an id attribute
of navbar.
If you add the CSS to your site via a link to a site-wide external style sheet
(see Chapters 9 and 10 for more information on style sheets), you can add,
change, or delete menu-bar links on your site at any time without having to
touch a single line of CSS or JavaScript. You simply add or modify your tags. Slick, huh?
Image rollovers with CSS
With text rollovers under your belt, kick things up a notch and move on
to image rollovers. Say you have a basic image that you want to change to
some different image when a visitor to your Web site rolls over its display
frame. In the past, you needed JavaScript to handle the mechanics for
image rollovers. Lucky for you, this can all easily be done with CSS now.
Check out this sample page where you can mess with Jeff’s head (literally)
www.dummieshtml.com/examples/ch16/image%20rollover.
Here, we use some CSS trickery to apparently take one image and replace it
with another. Actually, it’s really a single image that was created by stacking
two separate images together, one next to the other. We use some format
tricks to handle the rollover behavior using CSS by shifting our frame of reference
to the right as we hover over that image.
Figure 16-4 shows the sample image (notice how it’s really two images).
Figure 16-5 shows the Web page of the formatted image with part of the
image hidden from view. Hovering the cursor over the black-and-white part
of the image, as shown in Figure 16-6, causes the rolled-over version of the