11

HTML | coords Attribute

 4 years ago
source link: https://www.geeksforgeeks.org/html-coords-attribute/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Improve Article

HTML | coords Attribute

  • Last Updated : 01 Jul, 2021

The HTML coords Attribute is used to specify the coordinate of an area in an image-map. It is used with shape attribute to specify the size, shape, and placement of an area. (0, 0) is the coordinate of the top-left corner.
Syntax: 

<element coords="value">

Supported Tags: 

  • <area> 

Attribute Values: 

  • x1, y1, x2, y2: It specifies the coordinate of top-left (x1, y1) and bottom-right (x2, y2) corner of the rectangle.
  • x, y, radius: It specifies the center coordinates (x, y) and radius (radius) of circle.
  • x1, y1, x2, y2, .., xn, yn: It specifies the coordinates of polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon.

Example: 

<!DOCTYPE html>
<html>
<head>
<title>
HTML coords Attribute
</title>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<h2>HTML Coords Attribute</h2>
<img src=
alt="alt_attribute"
width="300"
height="119"
class="aligncenter"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59, 31, 28, 83, 91, 83"
href=
alt="Triangle">
<area shape="circle"
coords="155, 56, 26"
href=
alt="Circle">
<area shape="rect"
coords="224, 30, 276, 82"
href=
alt="Square">
</map>
</body>
</html>

Output: 
Before: 

After: 

Supported Browsers: The browsers supported by HTML coords Attribute are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK