Section 9.4. Advanced Link Techniques | Dreamweaver CS3: The Missing Manual

9.4. Advanced Link Techniques

If you've mastered the basic :hover principle, and know how to add a background image to a link, you're probably hungry for more elaborate ways to spruce up your site's navigation. In the following sections, you'll meet a few of the most popular techniques.

9.4.1. Big Clickable Buttons

The :hover pseudo-class is a great way to add an interactive feel to a Web page. But what if you want to highlight an area that's bigger than just a two-word navigation link? Suppose you have a list of news stories in a sidebar. Each item includes the title on one line, followed by a paragraph summary of the story. And suppose you want to highlight the area around both title and summary when a visitor mouses over them (see Figure 9-8).

Fortunately, Internet Explorer 7, Firefox, Safari, and Opera all understand the :hover pseudo-class when applied to all kinds of elements, not just links. So if you want to highlight a paragraph when the mouse moves across it, you can do so like this:

 p:hover { background-color: yellow;}

Figure 9-8. Give your visitors a big target. With a little clever CSS, you can make what looks like a headline and a paragraph behave like one giant button.

Look ma, no link! You can even apply hover effects to larger regions , like a div containing headlines, photos, and text paragraphs. So, if each news item in a page's sidebar is wrapped in a <div> tag and has a class of newsItem applied to it, this style changes the background color of each:

 .newsItem:hover { background-color: #333; }

Sadly, Internet Explorer 6 (and earlier) doesn't understand this style at all. That browser can display a hover effect only when it's applied to a link. And since the link tag is an inline element, you can't (at least according to the rules of HTML) wrap it around a block-level element. So you can't wrap both the headline of a story and the paragraph summary in the same linkexactly what you need to do to make both the title and summary change appearance when hovered over.

You're not out of luck, though. You just need to apply a little creative thinking. Don't put the title and summary into separate tags. Instead, keep them together in the link and use CSS to make the title look like a headline. Here's an example of marking up some HTML to achieve this effect. This snippet represents a single list item inside an unordered list:

 <li class="story"> <a href="virgo.html"><span class="title">Virgo: It's Your Month!</span> The stars are aligned in your favor. Next month? Not so much.</a> </li>

In this case, both the title and summary are together inside the link, so you can highlight both with the same style:

 li.story a:hover {     background-image: url(/books/2/835/1/html/2/highlight.gif); }

In HTML, the story title ("Virgo, It's Your Month!") is wrapped in a <span> tag. You can make text look like a block-level headline with just a few simple rules:

 .story span.title {     display: block;     text-weight: bold;     font-size: 150%; }

The key here's the block value, which makes the browser treat the text inside the span like its own headline with a line break before and after. Now, even though the title and summary look like they're separate block-level tags, they're still just part of the same inline <a> tag.

Tip: There's also a programming workaround for Internet Explorer 6's inability to apply hover styling to any tag but a link: www.xs4all.nl/~peterned/csshover.html.

9.4.2. CSS-Style Preloading Rollovers

In the bad old days, making a graphical link change to another graphic when moused over required JavaScript. With CSS, you can achieve similar effects with the :hover pseudo-class and a background image. However, there's one problem with the CSS method: Unless your visitor has already downloaded the rollover graphic, there's a noticeable delay while the browser sucks down the new graphic and displays it. The delay happens only the first time the visitor hovers over the link, but still, waiting for graphics to load is very 20th century.

The JavaScript solution can avoid this problem thanks to a technique called preloading which automatically downloads the rollover graphic well before it's needed. But CSS doesn't give you that option, so you need to enlist another clever maneuver called the Pixy method , which utilizes a single graphic to create different states for the same button.

Note: To read about the original Pixy method (the predecessor to what you're about to learn), visit http://wellstyled.com/css-nopreload-rollovers.html.

Here's how to implement the Pixy method:

In your favorite image-editing program, create one image with different versions of the button .

You might create a regular state, a rollover state, and maybe even a "you are here" state. Place the images one on top of the other, with the regular link image on top, and the rollover image below.
Measure the distances from the top of the entire graphic to the top of each image .

In Figure 9-9 (top) the rollover image's top edge is 39 pixels from the top of the graphic.
Create a CSS style for the regular link. Include the image in the background and place it at the left top of the style (Figure 9-9, middle) .

Your style may look something like this:
```
 a { background: #E7E7E7 url(/books/2/835/1/html/2/images/pixy.png) no-repeat left top; } 
```
Create the :hover style .

Here's the trick: Use the background-position property to shift the graphic upwards , so the first image disappears and the rollover image becomes visible (Figure 9-9, bottom).
```
 a:hover { background-position: 0 -39px; } 
```

Besides preventing the dreaded download delay, this technique helps you keep your navigation graphics organized in a single file.

Tip: CSS gives you other ways to preload the image. You can place the image into the background of an element that's covered by another element. Say your site's logo appears in the top-left corner of the Web page. You could place the rollover image in the top-left corner of the page's background: body { background: url(/books/2/835/1/html/2/rollover.gif) no-repeat left top; } . When the page loads, the rollover graphic is sitting in the background of the page but your visitors won't see it because it's covered by the logo. Another method is to place the rollover image inside a <div> that you position off the page using CSS positioning (see Section 12.1). In either case, the browser downloads the image and the CSS rollover won't have any delays.

Figure 9-9. Using the Pixy method, you can avoid an annoying delay while the browser downloads a rollover image for the first time. By combining all of the different link state graphics into a single image, you can display a different state simply by adjusting the positioning of the background image.

Note: Believe it or not, the Web site of one well-known designer uses one single graphic for 15count 'em, 15different graphic navigation buttons. You can read about her technique at http://veerle.duoh.com/index.php/blog/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2/. You can also see this technique in action in this chapter's tutorial, in step 3 in Section 9.1.1.

9.4.3. Sliding Doors

Ever since Amazon popularized them years back, tabbed navigation buttons have become one of the most common ways to highlight the organization of a site. With good reason, too: Selecting a tab to open a new "folder" of information is a metaphor everyone recognizes. You have many ways to create tab buttons. It's still common to see tabs where the button and its text are one and the same graphic. However, updating a bunch of button images in Photoshop or Fireworks every time you change your site's navigation can get old quick. Furthermore, having different graphics for each button slows down the loading time of your site.

A slicker technique is to put a tab graphic in the background of each link, and use regular HTML for the text. That way, updating your site's navigation is a simple matter of updating some text in a Web page. Even someone with zero Photoshop experience can manage it. The only time a single graphic for a tab doesn't work well is when the text on each link varies in length. If one tab reads "Store," and the other reads "Contact Us Today!" the Store tab suffers from empty space and the Contact tab looks a little cramped (see #1 in Figure 9-10).

What you need in that case is a way to have the tab graphic shrink-wrap itself around the link text. Luckily, designer Douglas Bowman has come up with a creative technique that does just that. Dubbed the Sliding Doors method, it involves creating one very wide and tall tab graphic in your image editing program (#2 in Figure 9-10), and then slicing that image into two graphic files (#3 in Figure 9-10). The very thin graphic is the left edge of the tab. It should be only wide enough to reveal the sloping left edge of the tab. The second graphic is very widewider than you imagine any tab on the page would ever getand forms the tab's main body and right edge.

Note: Douglas Bowman's Sliding Doors technique is a classic in CSS design. You can find his original article at the A List Apart Web site: www.alistapart.com/articles/slidingdoors . There's also a follow-up article covering more advanced techniques at www.alistapart.com/articles/slidingdoors2.

Now here's the tricky part. Since a tag can have only one background image, you need to apply the graphics as backgrounds to two different tags. Start by creating an unordered list and turning it into a horizontal navigation bar as described in Section 9.3.4. At this point, each <a> tag is nested inside one <li> tag, so you've got two tags to play with.

First, add the wide background image to the <li> tag and place it at the top-right corner of the tag. Do that by adding the following property to the style formatting for that button's <li> tag:

 background: url(/books/2/835/1/html/2/images/right_tab.gif) no-repeat right top;

The Sliding Doors technique capitalizes on the fact that a background image never extends outside of the box created by its tag. In other words, even though this image is really, really wide and tall, you won't see any part of the graphic that extends outside the region of the <li> tageither below it or outside its left edge.

Tip: If you like this technique, but aren't good at using Photoshop to create graphics, you can pick up free tab designs at www.exploding-boy.com/2005/12/15/free-css-navigation-designs and www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs .

Next, place the thin, left-hand graphic in the top- left background of the <a> tag by adding this property to the style for the link:

 background: url(/books/2/835/1/html/2/images/left_tab.gif) no-repeat left top;

Because the <a> tag is nested inside of the <li> tag, its background appears above the <li> tag's background. That left side tab graphic sits on top of the really wide tab graphic, creating the illusion of a single graphic. At this point, type whatever text you want for each link, in the process expanding the <li> tag and exposing more of the extra-wide graphic (see #4 Figure 9-10).

Figure 9-10. With the Sliding Doors method, you can add graphical tabs to any link. By using oversized graphics (#3) that are taller and wider than the largest tab, you can make sure that your tabs look right even when visitors pump up the size of their text (#5).

Tip: You can find a Web page with an example of the Sliding Doors technique in the tutorial files for this chapter. The file's located in the chapter_09

sliding_doors folder.