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