{"id":9347,"date":"2022-10-06T05:02:16","date_gmt":"2022-10-06T05:02:16","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9347"},"modified":"2022-10-06T05:02:16","modified_gmt":"2022-10-06T05:02:16","slug":"html-coords-attribute","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/html-coords-attribute\/","title":{"rendered":"HTML coords Attribute"},"content":{"rendered":"\n<p>The HTML&nbsp;coords&nbsp;attribute specifies the coordinates of an area in the image-map. To specify the shape, size, and placement of an area, it is used with the&nbsp;shape&nbsp;attribute.<\/p>\n\n\n\n<p>You can use this attribute on the\u00a0&lt;area>\u00a0element.<\/p>\n\n\n\n<p>The top-left corner of an area has the 0,0 coordinates.<\/p>\n\n\n\n<p>The&nbsp;coords&nbsp;attribute can have the following values:<\/p>\n\n\n\n<ul><li>x1, y1, x2, y2. It specifies a rectangle\u2019s top-left (x1, y1) and bottom-right (x2, y2) corner coordinates.<\/li><li>x, y, radius. It specifies a circle\u2019s center coordinates (x, y) and radius (radius).<\/li><li>x1, y1, x2, y2, .., xn, yn. It specifies a polygon\u2019s coordinates.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"syntax-2\">Syntax<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;area coords=\"value\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-html-span-class-attribute-coords-span-attribute-4\">Example of the HTML&nbsp;coords&nbsp;Attribute:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;Click on the logo or on one of the logo item to watch it closer:&lt;\/p&gt;\n    &lt;img src=\"\/uploads\/media\/news_gallery\/0001\/01\/thumb_316_news_gallery_list.jpeg\"  width=\"250\" height=\"150\" alt=\"block\" usemap=\"#blockmap\"&gt;\n    &lt;map name=\"blockmap\"&gt;\n      &lt;area shape=\"circle\" coords=\"50,32,25\" alt=\"html\" href=\"\/uploads\/media\/book_gallery\/0001\/01\/d450f0358f947dffb3af91195c3002600d74101b.png\"&gt;\n      &lt;area shape=\"circle\" coords=\"218,115,25\" alt=\"css\" href=\"\/uploads\/media\/book_gallery\/0001\/01\/25521e981b34da57c8f51baddc5b76351b855818.png\"&gt;\n      &lt;area shape=\"circle\" coords=\"195,32,28\" alt=\"php\" href=\"\/uploads\/media\/book_gallery\/0001\/01\/4bbee6698c4884f25c46010d61b658dd62d2c04f.png\"&gt;\n      &lt;area class=\"homepage\" shape=\"rect\" coords=\"90,90,35,55\" alt=\"php\" href=\"https:\/\/www.w3docs.com\/\"&gt;\n    &lt;\/map&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The HTML&nbsp;coords&nbsp;attribute specifies the coordinates of an area in the image-map. To specify the shape, size, and placement of an area, it is used with the&nbsp;shape&nbsp;attribute. You can use this attribute on the\u00a0&lt;area>\u00a0element. The top-left corner of an area has the 0,0 coordinates. The&nbsp;coords&nbsp;attribute can have the following values: x1, y1, x2, y2. It specifies [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[327],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9347"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9347"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9347\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}