Multimedia: Video, Audio, and Embedded Media - HTML5 Mastery: Semantics, Standards, and Styling - page 191

sions of the shape. The shape attribute may have the values circle , rect , poly ,
or default , which correspond to drawing a circle, a rectangle, a free-form shape with
at least three points, or the whole image (in the default state no coordinates are giv-
en, since it covers the whole image). In most cases, the area will also contain an href
attribute to determine where users should be taken to after they've clicked. Another at-
tribute, nohref , is obsolete in HTML5 and is not to be used. This attribute had been
used to specify that the area did not link anywhere, but it is sufficient to just leave off
the href attribute to provide this functionality (or rather lack of functionality).
Note Why would you ever have an area in an image map that does not link any-
where? The reason may be to provide a tooltip over an image, but without the need to
link anywhere. For example, consider a map of the 50 states of the U.S. If an image
map was created that had an area defined for each state and had its title attribute
set to the corresponding state name it was over—but the href attribute was not set—it
would create a map of the United States that would show the state name the user was
over when they hovered over the map, but the user would not link anywhere if they
clicked. Additionally, creating an area without an href attribute allows areas to be
“punched” out of other areas, so for example, a clickable donut shape could be defined
by creating two overlapping circle areas, with only the larger circle having its href
attribute set.
The meaning of the image map area coordinate points depends on the value of the
shape attribute. Circles will have three values that correspond to the x and y coordin-
ates of the center of the circular hotspot, with the last value determining the radius of the
circle. For rectangular-shaped areas, there will be four values in the coords attribute,
which correspond to the x, y coordinates of the upper-left and lower-right corners of the
rectangle. Lastly, the poly area defines the x, y coordinates of each point in the shape,
which could be quite a few! As you can imagine, hand-coding image maps is fairly la-
borious, but most WYSIWYG web-authoring software comes with the ability to create
areas just by pointing, clicking, and dragging. Figure 5-2 shows an example of an image
map created in Adobe Dreamweaver.