Images That Link - HTML 4

Web pages often use images for navigation. They’re prettier than plaintext links, and you can add both form and function on your page with one element.

Triggering links
To create an image that triggers a link, you substitute an <img /> element in place of the text you would anchor your link to. This markup links text:

</p>

The preceding markup creates a linked image to http://www.w3.org. In the preceding example, the alternative text now reads Visit the W3C Web Site so users who can’t see the image know where the link goes. When a user moves the mouse pointer over the image, the cursor changes from an arrow into a pointing hand (or any icon the browser uses for a link), as in Figure.

Figure : Combine image and anchor elements to create a linked image.

A quick click of the image launches the W3C Web site. It’s as simple as that.

As shown earlier in the chapter, you should set the border of any image you use in a link to 0 to keep the browser from surrounding your image with an ugly blue line. Without the line, however, users need other visual (or alternative text) clues so they know an image is a link. Be sure images that serve as links scream to the user (tastefully of course) “I’m a link!”

Building image maps
When you use an <img /> element with an anchor element to create a linking image, you can attach only one link to that image. To create a larger image that connects links to different regions on the page, you need an image map.

To create an image map, you need two things:

• An image with several distinct areas that would be obvious to users. (For example, an image of a park might show a playground area, a picnic area, and a pond area.)
• Markup to map the different regions on the map to different URLs.

1. Elements and attributes
You use the <img /> element to add the map image into your page, just as you would any other image. In addition, you include the usemap attribute to let the browser know that there’s image map information to go with the image. The value of the usemap attribute is the name of your map.

You use two elements and a collection of attributes to define the image map:

• <map> holds the map information. The <map> element uses the name attribute to identify the map. The value of name should match the value of usemap in the <img /> element that goes with the map.
• <area /> links specific parts of the map to URLs. The <area /> element takes these attributes to define the specifics for each section of the map:
• shape: Specifies the shape of the region (a clickable hot spot that makes the image map work). You can choose from rect (rectangle), circle, and poly (a triangle or polygon).
• coords: Define the region’s coordinates. A rectangle’s coordinates include the left, right, top, and bottom points. A circle’s coordinates include the x and y coordinates for the center of the circle as well as the circle’s radius. A polygon’s coordinates are a collection of x and y coordinates for every vertex in the polygon.
• href: Specifies the URL to which the region links. This can be an absolute or relative URL.
• alt: Provides alternative text for the image region.

2. Markup
This defines a three-region map called NavMap linked to the
navigation.gif:

Figure shows how a browser displays this markup.

When the mouse sits over a region in the map, the cursor turns into a pointing hand (just as it changes over any other hyperlink). So take advantage of the alternative text to include useful information about the link.

Figure : Image maps turn different areas of an image into linking regions.

A common use for image maps is to turn maps of places (states, countries, cities, and such) into linkable maps. Webmonkey’s image map tutorial at http://webmonkey.wired.com/webmonkey/96/40/index2a.html provides more details on optimizing image maps and maximizing this (X)HTML feature.

Creating image maps by hand can be a tricky. You use an image editor to identify each point in the map and then create the proper markup for it. Most (X)HTML tools include utilities to help you make image maps. If you take advantage of one of these tools, you can create image maps quickly and with fewer errors.