Example An image map, with clickable areas: <img src ="planets.gif" width="145" height="126" ...
Example
An image map, with clickable areas:<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" /> </map> |
Definition and Usage
The <area> tag defines a region in an image map.The area element is always nested inside a <map> tag.
Browser Support
The <area> tag is supported in all major browsers.Differences Between HTML and XHTML
In HTML the <area> tag has no end tag.In XHTML the <area> tag must be properly closed.
Tips and Notes
Note: The usemap attribute in the <img> tag refers to the id or name (browser dependant) attribute in <map>, therefore we have added both the id and name attributes to <map>.Required Attributes
DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.| Attribute | Value | Description | DTD |
|---|---|---|---|
| alt | text | Specifies an alternate text for the area | STF |
Optional Attributes
| Attribute | Value | Description | DTD |
|---|---|---|---|
| coords | if shape="rect" then coords="left,top,right,bottom" if shape="circ" then coords="centerx,centery,radius" if shape="poly" then coords="x1,y1,x2,y2,..,xn,yn" | Specifies the coordinates for the clickable area | STF |
| href | URL | Specifies the target URL of the area | STF |
| nohref | true false | Excludes an area from the image map | STF |
| shape | rect rectangle circ circle poly polygon | Defines the shape of the area | STF |
| target | _blank _parent _self _top | Where to open the target URL.
| TF |
Standard Attributes
| id, class, title, style, dir, lang, xml:lang, tabindex, accesskey |
Event Attributes
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur |
