Enter HTML5 entry to proficient:<map> 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 ＞

"Reprint please retain the integrity of the content of the Wind network article, if you do not comply with this principle, we will retain the right to pursue legal responsibility"

<map> Label

Definitions and usage

The <map> label defines the image map of the client. An image map is an image with a clickable region.

Differences between HTML 4.01 and HTML 5

The Http://www.aliyun.com/zixun/aggregation/11696.html >name property is no longer supported in HTML 5.

Tips and Comments:

Wind Network (www.ithov.com) Note: The area element is always nested inside the map element. An AREA element defines a region in an image map.

Property

The

Property Value Description 4 5 ID unique_name defines a unique name for the map label. 4 5 name Unique_name defines a unique name for the map label. Not supported. 4

Standard properties

Class, Contenteditable, ContextMenu, dir, draggable, id, irrelevant, lang, ref, Registrationmark, TabIndex, template, For a complete description of the title, 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, visit the event properties in HTML 5.

Tiy instance

Create an image map

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

<html>
<body>
 Wind Network (www.ithov.com) Tip: 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 (according to the browser), so we also added "id" and " Name property. 
</body>
</html>

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