HTML and CSS Reference
In-Depth Information
noted using the coords attribute. For example, the coords attribute for a poly shape
appears as follows:
<area shape=“poly” coords=“ x1,y1,x2,y2,x3,y3,... , xN,yN ” href=“ URL ”>
Each x,y combination represents a point on the polygon. For rect shapes, x1,y1 is the
upper-left corner of the rectangle, and x2,y2 is the lower-right corner:
<area shape=“rect” coords=“ x1,y1,x2,y2 ” href=“ URL ”>
For circle shapes, x,y represents the center of a circular region of size radius :
<area shape=“circle” coords=“ x,y,radius ” href=“ URL ”>
The default shape is different from the others—it doesn't require any coordinates to be
specified. Instead, the link associated with the default shape is followed if the user
clicks anywhere on the image that doesn't fall within another defined region.
Another attribute you need to define for each <area> tag is the href attribute. You can
assign href any URL you usually would associate with an <a> link, including relative
pathnames. In addition, you can assign href a value of “nohref” to define regions of the
image that don't contain links to a new page.
If you're using client-side imagemaps with frames, you can include
the target attribute inside an <area> tag to open a new page in
a specific window, as in this example:
<area shape=“rect” coords=“ x1,y1,x2,y2 ” href=“URL” target=
You need to include one more attribute in HTML5. Earlier in this lesson, you learned
how to specify alternate text for images. In HTML5, the alt attribute is an additional
requirement for the <area> tag that displays a short description of a clickable area on a
client-side imagemap when you pass your cursor over it. Using the <area> example that
I cited, the alt attribute appears as shown in the following example:
<area shape=“rect” coords=“41,16,101,32” href=“test.html” alt=“test link”>
The usemap Attribute
After you've created your <map> tag and defined the regions of your image using <area>
tags, the next step is to associate the map with the image. To do so, the usemap attribute
of the <img> tag is used. The map name that you specified using the name attribute of the
<map> tag, preceded by a # , should be used as the value of the usemap attribute, as shown
in this example:
<img src=“image.gif” usemap=“# mapname ”>
Search WWH ::

Custom Search