HTML <area> coords attribute

HTML <area> Tag

定义和用法

coords attribute defines the coordinates of the area in the image mapping. Definition and usage

coords attribute defines the coordinates of the area in the image mapping. Attribute with shape attribute Used together to specify the size, shape, and position of the area.

Tip:The coordinates of the top left corner of the area are 0,0.

Note:If the coordinates in an area tag overlap with other areas, the first area tag to appear will be given priority. The browser will ignore coordinates outside the image boundary range.

Example

Use the coords attribute to define the coordinates of each area in the image mapping:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus">
</map>

Try it yourself

Syntax

<area coords="value">

Attribute value

Value Description
x1,y1,x2,y2 Define the coordinates of the top left and bottom right corners of the rectangle (shape="rect").
x,y,radius Define the coordinates of the circle's center and radius (shape="circle").
x1,y1,x2,y2,...,xn,yn

Define the coordinates of the polygon edges.

If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (shape="poly").

Detailed explanation:

The coords attribute of the <area> tag defines the coordinates of the mouse-sensitive areas in the client-side image mapping. The numbers and their meanings depend on the shape of the area determined by the shape attribute. Hyperlink areas in the client-side image mapping can be defined as rectangles, circles, polygons, and so on.

The following lists the appropriate values for each shape:

Circle: shape="circle", coords="x,y,z"

Here, x and y define the position of the circle's center ("0,0" is the coordinate of the top left corner of the image), and r is the radius of the circle in pixels.

Polygon: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Each pair of "x,y" coordinates defines a vertex of a polygon ("0,0" is the coordinate of the top left corner of the image). At least three sets of coordinates are needed to define a triangle; a high latitude polygon requires more vertices.

Polygons are automatically closed, so the first coordinate does not need to be repeated at the end of the list to close the entire area.

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 of coordinates is the vertex coordinate of the opposite corner, "0,0" is the coordinate of the top 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 snippet defines a mouse-sensitive area in the bottom right quarter of a 100x100 pixel image and a circular area in the center 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>

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <area> Tag