area coords Attribute - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:area

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. area

Description

The coords attribute sets the coordinates of an area in an image-map, which is used together with the shape attribute to specify the size, shape, and placement of an area.

The coordinates of the top-left corner of an area are 0,0.

Attribute Values

ValueShape Description
x1,y1,x2,y2 for shape="rect" coordinates of the left, top, right, bottom corner of the rectangle
x,y,radiusfor shape="circle" coordinates of the circle center and the radius
x1,y1,x2,y2,..,xn,yn for shape="poly" coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon

An image-map, with clickable areas:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<img src="https://www.java2s.com/style/demo/Opera.png" width="145" height="126" alt="message" usemap="#myMap">

<map name="myMap">
  <area shape="rect" coords="0,0,80,100" alt="A" href="">
  <area shape="circle" coords="90,60,5" alt="B" href="">
  <area shape="circle" coords="130,60,10" alt="C" href="">
</map><!--from  www.  ja  v a  2s.c o m-->

</body>
</html>

Related Tutorials