The HTML5 and lt;area tags can set the area of action in the desired image, and the user can jump to the appropriate page by clicking on the action area, so observe this example below:
Image map with clickable area:
<img src="https://7n.w3cschool.cn/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
Browser support
All major browsers support the label.
Label definition and instructions for use
The label defines the area inside the image map (image mapping refers to an image with a clickable area).
The elements are always nested inside the label.
Note: The usemap property in the label is associated with name in the element to create a relationship between the image and the map.
The difference between HTML 4.01 and HTML5
HTML5 provides some new properties and no longer supports some properties in HTML 4.01.
The difference between HTML and XHTML
In HTML, the label does not end the label.
In XHTML, the label must be turned off correctly.
Property
New: The new property in HTML5.
| Property | Value | Describe |
|---|---|---|
| Alt | text | Alternative text for the specified area. If you use the href property, it is required. |
| coords | coordinates | Specifies the coordinates of the area. |
| Href | Url | The target URL for the specified area. |
| hreflang New | language_code | The language that specifies the target URL. |
| media New | media query | Specify what media/device is optimized for the target URL. Default: all. |
| nohref | value | HTML5 is not supported. Specify areas where there are no relevant links. |
| rel New |
alternate
author bookmark help license next nofollow noreferrer prefetch prev search tag |
Describes the relationship between the current document and the target URL. |
| shape |
default
rect circle poly |
Specifies the shape of the area. |
| target |
_blank
_parent _self _top framename |
Specify where to open the destination URL. |
| type New | MIME_type |
Specifies the type of MIME for the target URL.
Note: MIME - Multipurpose Internet Extension Mails. |
Global properties
The label supports the global properties of HTML.
The event property
The tag supports the event properties of HTML.
Related articles
HTML DOM Reference Manual: Area Object