HTML image Hot Zone map area label

Instance

usemap = "#planetmap"/><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 >

Definition and usage

The Shape property mates with the Coords property to specify the size, shape, and position of the area.

Detailed Explanation:

The Shape property is used to define the shapes of the mouse-sensitive areas in the image map:

• Round (CIRC or circle)
• Polygon (poly or polygon)
• Rectangle (rect or rectangle)

The value of the Shape property affects the browser's interpretation of the Coords property. If the shape attribute is not used, then the value default is assumed to be used. By standard, default means that the area covers the entire image. In practice, the browser uses a rectangular area by default and expects to find 4 coords values. If no shape is specified and 4 coordinates are not included in the label, the browser ignores the entire area.

A browser that can recognize the default value of the Shape property, and can provide an area that includes all hotspots for a click beyond the scope defined by other hotspots. Since the area is in the <map> tab in the order of first come first served, all the default areas must be placed behind. Otherwise, the default zone overwrites all the areas that appear in the other image maps.

Browsers do not have strict requirements for the implementation of shape names. For example, for rectangles, Netscape 4 does not recognize "rectangle", but it can recognize "rect". For this reason, we recommend the use of abbreviated names.

Browser support

The Shape property is supported by all browsers.

Definition and usage

The Coords property specifies the x and y coordinates of the area.

The Coords property is used in conjunction with the Shape property to specify the size, shape, and position of the area.

The coordinates of the upper-left corner of the image are "0,0".

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,r"

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 of the rectangle, and the other pair is the vertex coordinate of the diagonal, 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>

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.

Grammar

<area coords= "value">

Property value

value	Description
X1,y1,x2,y2	If the Shape property is set to Rect, the value specifies the coordinates of the upper-left and lower-right corners of the rectangle.
X,y,radius	If the Shape property is set to "Circ", the value specifies the coordinate and radius of the center point.
X1,y1,x2,y2,.., Xn,yn	If the Shape property is set to "poly", the value specifies the coordinates of each edge of the polygon. If the first and last coordinates are inconsistent, the browser must add the last pair of coordinates in order to close the polygon.

See

Http://www.w3school.com.cn/tags/att_area_shape.asp

Http://www.w3school.com.cn/tags/att_area_coords.asp

HTML image Hot Zone map area label