<area> Label
Definitions and usage
<area> tags define areas in the image map.
Differences between HTML 4.01 and HTML 5
HTML 5 has some new properties and no longer supports some of the properties of HTML 4.01.
Example：
<img src = "planets.gif" alt= "planets" usemap = "#planetmap"/>
<map id = "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>
Property
Property Description 4 5 alt defines the alternate text for this area. This property is required if the href exists. Used only if the href attribute exists. 4 5 coords defines the coordinates of the clickable region. 4 5 href Defines the destination URL for this area. 4 5 Hreflang The base language of the target URL. Used only if the href attribute exists. 4 5 nohref disapprove. Excludes an area from an image map. 4 media types that specify the target URL. Default value: All. Used only if the href attribute exists. 5 Ping a space-delimited list of URLs that are notified when the user clicks on the link. Used only if the href attribute exists. 5 rel Specify the relationship between the current document and the target URL. Used only if the href attribute exists. 5 shape of the specified area. 4 5 target opens the destination URL. 4 5 Type Sets the MIME type of the destination URL. Used only if the href attribute exists. 5Standard properties
Class, Contenteditable, ContextMenu, dir, draggable, id, irrelevant,
Lang, ref, Registrationmark, TabIndex, template, title
For a complete description, please visit the standard properties in HTML 5.
Event Properties
Onabort, onbeforeunload, onblur, onchange, onclick, OnContextMenu,
OnDblClick, Ondrag, Ondragend, OnDragEnter, OnDragLeave, OnDragOver,
Ondragstart, OnDrop, OnError, onfocus, onkeydown, onkeypress, onkeyup,
OnLoad, OnMessage, onmousedown, onmousemove, onmouseover, onmouseout,
OnMouseUp, OnMouseWheel, OnResize, Onscroll, Onselect, onsubmit, onunload
For a complete description, please visit the event properties in HTML 5.
Tiy
Create an image map with the following code:
<html>
<body>
<p> Click on the stars on the image to enlarge them. </p>
<img
Src= "/i/eg_planets.jpg"
Border= "0" usemap= "#planetmap"
alt= "Planets"/>
<map name= "Planetmap" id= "Planetmap" >
<area
Shape= "Circle"
Coords= "180,139,14"
href = "/example/html/venus.html"
target = "_blank"
alt= "Venus"/>
<area
Shape= "Circle"
Coords= "129,161,10"
href = "/example/html/mercur.html"
target = "_blank"
alt= "Mercury"/>
<area
Shape= "Rect"
Coords= "0,0,110,260"
href = "/example/html/sun.html"
target = "_blank"
alt= "Sun"/>
</map>
<p><b> Note: the "Usemap" attribute in the </b>img element refers to the "id" or "name" attribute in the map element (based on the bangs
So we also added the ID and name attributes to the map element. </p>
</body>
</html>
This example shows how to create an image map with a clickable area. Each of these areas is a hyperlink.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
