HTML The Definitive Guide (74 page)

7.4.3 Linking Do's and Don'ts

Here are some hints for creating links:

Keep the link content as concise as possible. Long links or huge inline graphic icons for links ●

are visually disruptive and potentially confusing.

Never place two links immediately adjacent to one another. Most browsers make it difficult to ●

tell where one link stops and the next link starts. Separate them with regular text or line breaks.

Be consistent. If you are using inline references, make all of your links inline references. If you ●

choose to use lists of links, stick to either the short or long form; don't mix styles in a single document.

Try reading your document with all the nonanchor text removed. If some links suddenly make ●

no sense, rewrite them so that they stand on their own. (Many people scan documents looking only for links; the surrounding text becomes little more than a gray background to the visually more compelling links.)

7.4.4 Using Images and Links

It has become fashionable to use images and icons instead of words for link contents. For instance, instead of the word "next," some HTML authors might use an icon of a little pointing hand. A link to the home page is not complete without a picture of a little house. Links to searching tools must now contain a picture of a magnifying glass, question mark, or binoculars.

Resist falling prey to the "Mount Everest syndrome" of inserting images simply because you can.

Again, it's a matter of context. If you or your document's readers can't tell at a glance what relationship a link has with the current document, you've failed. Use cute images for links sparingly, consistently, and only in ways that help readers scan your document for important information and leads. Also be ever mindful that your pages may be read by someone from nearly anywhere on Earth (perhaps beyond, even), and that images do not translate consistently across cultural boundaries. (Ever hear what the "okay" hand sign common in the United States means to a Japanese person?) Creating consistent iconography for a collection of pages is a daunting task, one that really should be done with the assistance of someone formally schooled in visual design. Trust us, the kind of mind that produces nifty code and does good HTML is rarely suited to creating beautiful, compelling imagery. Find a good visual designer; your pages and readers will benefit immeasurably.

7.3 Creating Hyperlinks

7.5 Mouse-Sensitive Images

Chapter 7

Links and Webs

7.5 Mouse-Sensitive Images

Normally, an image placed within an anchor simply becomes part of the anchor content. The browser may alter the image in some special way (usually with a special border) to alert the reader that it is a link, but the user clicks the image in the same way they click a textual link.

The HTML standard provides a feature that lets you embed many different links inside the same image. Clicking different areas of the image causes the browser to link to different target documents. Such mouse-sensitive images, known as
image maps
, open up a variety of creative linking styles.

There are two ways to create image maps, known as
server-side
and
client-side
image maps. The former, enabled by the ismap attribute for the tag, requires access to a server and related image map processing applications. The latter is created with the usemap attribute for the tag, along with corresponding

7.5.1 Server-side Image Maps

You add an image to an anchor simply by placing an tag within the body of the tag. Make that embedded image into a mouse-sensitive one by adding the ismap attribute to the tag. This special attribute tells the browser that the image is a special map containing more than one link. (The ismap attribute is ignored by the browser if the tag is not within an
tag.) [The Tag, 5.2.6]