HTML | coords Attribute
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.
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.
Recommend
-
44
Home Programming >Front end >Javascript HTML attribute 和 DOM property 的区别 文章目录 ...
-
4
aria-labelledby attribute Related Articles ...
-
7
Perfecting the password field with the HTML passwordrules attribute “passwordrules” is a new attribute on an HTML input tag that allows you to programmatically describe your...
-
5
-
1
Using the HTML img lazy attribute and link preload image to improve page performance Two things that we can easily do improve to improve the image performance on our web pages:1. lazy load the images:
-
4
The HTML A Tag Attribute and Its Importance for SEOErika VaragouliMay 19, 20216 min readWhat is an HTML A tag (anchor tag)?...
-
6
How to select the item in Protractor by the html attribute when the value contains advertisements Struggling with how to se...
-
4
Given a short string of a HTML element, we want to extract atrribute of the element from the given string. We can use net/html package or g...
-
1
Source Code If you have following element in HTML: <div id="foo" data-my-demo-value="Hey"></div> Access the value by Dataset() function, which returns map[string]string:...
-
0
Access HTML data-* attributes of elements in Go/GopherJS. Data attribute of a element allows you to store and retrieve data from the specific element. For example, you may stor...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK