/

HTML / CSS / JavaScript Tutorial

HTML Standard attribute: coords

[this page | pdf | back links]

The HTML coords attribute indicates the coordinates of an <area>. It, together with the shape attribute specify the size, shape and position of the area.

 

Valid attribute values (for <area>) include:

 

Value

Description

x1, y1, x2, y2

Coordinates of the left, top (x1, y1) and right, bottom (x2, y2) corners of a rectangle, if shape = "rect"

x, y, r

Coordinates of the circle centre (x, y) and circle radius (r), if shape = "circle"

x1, y1, x2, y2,…, xn, yn

Coordinates of corners of polygon. If the first and last coordinate pairs are not the same then the browser will add another coordinate pair to complete the polygon, if shape = "poly"

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<p>Click on one of the two images of each pair to see it in isolation</p>

<br>Created using HTML:<br>
<img src="Pictures/Shape1and2.png" alt="2 images" usemap="#images">

<map name="images">
  <area shape="rect" coords="0,0,102,99" alt="Shape 1" href="Pictures/Shape1.jpg">
  <area shape="rect" coords="103,0,208,99" alt="Shape 2" href="Pictures/Shape2.jpg">
</map>

<br><br>Created using JavaScript:<br>
<img id="img2" src="Pictures/Shape1and2.png" alt="Shapes 1 and 2" usemap="#images2">
<span id="element"></span>

<script>
var x = document.createElement("MAP");
x.setAttribute("name","images2");
var x1 = document.createElement("AREA");
x1.setAttribute("shape","rect");
x1.setAttribute("coords","0,0,102,99");
x1.setAttribute("alt","Shape1 (using JavaScript)");
x1.setAttribute("href","Pictures/Shape1.jpg");
x.appendChild(x1);
var x2 = document.createElement("AREA");
x2.setAttribute("shape","rect");
x2.setAttribute("coords","103,0,208,99");
x2.setAttribute("alt","Shape2 (using JavaScript)");
x2.setAttribute("href","Pictures/Shape2.jpg");
x.appendChild(x2);
document.getElementById("element").appendChild(x);
document.getElementById("img2").setAttribute("usemap","#images2");
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Attributes


Desktop view | Switch to Mobile