Enter HTML5 entry to proficient:<area> label

Last Update:2014-12-27 Source: Internet

Author: User

Keywords tags HTML5 Getting started to master

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<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：

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. 5

Standard 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>
 Click on the stars on the image to enlarge them. 
<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>
 Note: the "Usemap" attribute in the 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. 
</body>
</html>

This example shows how to create an image map with a clickable area. Each of these areas is a hyperlink.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More