HTML <map> Tag
Description:
The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
Specific Attributes:
| Attribute | Definition |
| name | Assigns a name to the image map. |
Other Attributes:
| Attribute | Definition |
| dir |
Specifies the text direction for the content in
an element.
|
| class | Specifies a classname for an element. |
| id | Specifies a unique id for an element. |
| lang | Specifies a language code for the content in an element. |
| title | Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip"). |
| style | Specifies an inline style for an element. |
| alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the image. |
| usemap | Associates an element with an image map. For example, you associate the image with an image map by using this attribute. |
| href | Specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute. |
| target |
Specifies the target frame to load the page into.
|
| tabindex | Specifies the tab order of an element. |
| accesskey | Specifies a keyboard shortcut to access an element. |
Example Code:
<img alt="Shapes" height="102" src="image/shapes.jpg"
style="border: none;" usemap="#shapes" width="375" />
<map name="shapes" id="shapes">
<area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');"
title="Circle" alt="Circle"/>
<area shape="rect" coords="136,11,227,89" href="javascript:clicked_on
('rectangle');" title="Rectangle" alt="Rectangle"/>
<area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');"
title="Triangle" alt="Triangle"/>
<area shape="default" nohref="nohref" title="Default"
alt="Default"/>
</map>
Result
