HTML image Hot Zone map area usage

The <area> tag is used primarily for image maps, which allow you to set the area of action (also known as a hotspot) in an image map, so that when a user clicks on a specified action area, it automatically links to a pre-defined page. The basic syntax structure is as follows:

     <area      class=type      id=value       href=url       alt=text       shape=area-shape       

Shape and coords: are two main parameters used to set the shape and size of a hotspot. Its basic usage is as follows:

• <area shape= "rect" coords= "x1, y1,x2,y2" href=url> indicates that the shape of the hotspot is rectangular, the top-left vertex coordinates are (x1,y1), and the lower-right corner coordinates are (x2,y2).
• <area shape= "Circle" coords= "x1, y1,r" href=url> means the shape of the set hotspot is circular, the center coordinate is (x1,y1), and the radius is R.
• <area shape= "Poligon" coords= "x1, y1,x2,y2 ..." href=url> indicates that the set hotspot is shaped as a polygon, each vertex coordinate is (x1,y1), (X2,y2), (X3,Y3) ......。

The <area> tag is divided into the area of the image map, so its division of the role of the area must be in the image map area, so before using the <area> Mark Division area must use another HTML tag <map> to set the action area of the image map and sets a name for the specified image map, the use of the tag is simple, i.e. <map name= "image map name" > ... </map>.

HTML <area> Label formats:
<map><area/></map>

(The function of this tag is to define one (or more) hotspots to be hyperlinked in a particular position in a picture)
Add a hotspot manually: Select a picture/attribute/Select a shape such as: Rectangle, circle, polygon, etc.
Definition and usage
<area> tags define the area in the image map (note: Image mapping refers to an image with a clickable area).
Area elements are always nested in the <map> tag.
Note the Usemap property in the: tag is associated with the Map element name property, creating a link between the image and the map.

"Instance":

Image map with clickable area:

<map name= "Planetmap" id= "Planetmap" >
<area shape= "Circle" coords= "180,139,14" href = "venus.html" alt= "Venus"/>
<area shape= "Circle" coords= "129,161,10" href = "mercur.html" alt= "Mercury"/>
<area shape= "rect" coords= "0,0,110,260" href = "sun.html" alt= "Sun"/>
</map>
The difference between HTML and XHTML
,<area> does not have an end tag in HTML.
In XHTML,,<area> must be closed correctly.

Tips and comments :
Note the Usemap property in: can refer to the ID in <map> or the Name property (as determined by the browser), so we need to add both the ID and name two properties to <map>

Standard properties
ID, class, title, style, dir, Lang, Xml:lang, TabIndex, accesskey
For a complete description, please visit the standard properties.

Event Properties
OnClick, ondblclick, onmousedown, onmouseup, onmouseover, OnMouseMove,
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
For a complete description, please visit the event properties
Create an image Map This example shows how to create an image map with a clickable area. Each of these areas is a hyperlink.
Coords Properties for HTML <area> tags

Definition and usage
The Coords property specifies the x and y coordinates of the area, which is the coordinates of the relative picture, that is, the coordinates of the upper-left corner of the image are "0,0".
The Coords property is used in conjunction with the Shape property to specify the size, shape, and position of the area.

Detailed explanation :
The Coords property of the <area> tag defines the coordinates of the mouse-sensitive area in the client image map. The number of coordinates and their meanings depend on the area shape that is determined in the Shape property. You can define a hyperlink area in a client-side image map as a rectangle, a circle, or a polygon.
The appropriate values for each shape are listed below:
Circle: Shape= "Circle", coords= "x, Y, z"
The X and Y here define the position of the center point ("0,0" is the coordinate of the upper-left corner of the image), and R is the circle radius in pixels.

Polygon: shape= "polygon", coords= "X1,y1,x2,y2,x3,y3,..."
Each pair of "x, y" coordinates defines a vertex of the polygon ("0,0" is the coordinate of the upper-left corner of the image). Defining a triangle requires at least three sets of coordinates, while high-latitude polygons require a larger number of vertices.
Polygons are automatically closed, so you don't need to repeat the first coordinate to close the entire area at the end of the list.

Rectangle: shape= "Rectangle", coords= "X1,y1,x2,y2"
The first coordinate is the vertex coordinate of one corner (upper-left corner) of the hotspot rectangular area, and the other coordinates are the coordinates of the diagonal (lower-right) corner of the hotspot rectangle, and "0,0" is the coordinate of the upper-left corner of the image. Note that defining a rectangle is actually a simplified method of defining a polygon with four vertices.
For example, the following XHTML fragment defines a mouse-sensitive area in the lower right one-fourth of a 100x100 pixel image, and defines a circular area in the middle of the image.
<map name= "Map" >
<area shape= "rect" coords= "75,75,99,99" nohref= "Nohref" >
<area shape= "Circ" coords= "50,50,25" nohref= "Nohref" >
</map>
"Instance":

<map name= "Planetmap" >
<area shape= "rect" coords= "0,0,110,260" href= "sun.htm" alt= "Sun"/>
<area shape= "Circle" coords= "129,161,10" href= "mercur.htm" alt= "Mercury"/>
<area shape= "Circle" coords= "180,139,14" href= "venus.htm" alt= "Venus"/>
</map>
Hints and Notes
Note: If the coordinates and other areas in an area label overlap, the first occurrence of the region label is preferred. The browser ignores coordinates beyond the bounds of the image.

"Practical Application"HTML image Map What is an image map?

Divides an image into multiple areas, each pointing to a different URL address. For example, the image of a Chinese map is divided into several regions according to provinces and cities, these areas are called hotspots, click on the Hotspot area, you can connect to the corresponding provinces and cities related to the page, this is the image map.

How to make?

1. First of all, we must define the image of each hotspot area of the shape, location coordinates, and its point to the URL address and other information, this process called image hotspot mapping. The image hotspot mapping needs to be illustrated with the <map name=mapname></map> label pair, where the Name property specifies a name for the image hotspot map.
2. Each area of the image hotspot map is indicated by the <area> label,<area> label format: <area shape= "shape" coords= "coordinates" href= "URL"; The href section can also be replaced with Nohref, which indicates that the mouse click is not valid in this area. The <area> tag can also have a target property that indicates to which window or frame the browser displays the page resource that the href attribute points to.
3. Once you have defined the image hotspot, then add a property set named Usemap to the image label, and the Usemap property specifies that the image is used as an image map with a value of the image hotspot map name used in the format: <map> Add a "#" character before the Name property setting value in the label. For example,

Sample code

CODE:

Map name= "Mymap" >

     <area shape= "rect" href= "a.html" coords= "0,0,50,50" >

     <area shape= "Circle" href= "b.html" coords= "120,80,50" >

     <area shape= "Poly" href= "c.html" coords= "0,0,50,50,100,100,200,200" >

/map>

The setting description for the Shape property:

Rect:

Defines a rectangular area where the Coords property sets the coordinates of the upper-left and lower-right corners, separated by commas.

Poly:

Defines a multilateral region where the Coords property sets the value to the coordinate value of each vertex of the polygon.

Circle:

Define a circular area, the Coords property setting value is the center coordinate and radius, the first two parameters are the center of the horizontal, ordinate, the third parameter is a radius.

Source: http://www.nowamagic.net/html/html_MapArea.php

Source: HTTP://HI.BAIDU.COM/HLZ8258/ITEM/283B67F286EA490B84D278DC

Source: http://www.cnblogs.com/SkySoot/archive/2012/05/13/2498197.html

You can also refer to W3school's instructions: http://www.w3school.com.cn/tags/tag_map.asp

HTML image Hot Zone map area usage