/

HTML / CSS / JavaScript Tutorial

HTML Element: <area>

[this page | pdf | back links]

The HTML <area> element identifies an area inside an image-map.

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

alt

Specifies alternative text to show when original content fails to display

Here

coords

Specifies the coordinates of an <area>

Here

download

Target will be downloaded when user clicks on hyperlink

Here

href

URL of page the link goes to

Here

hreflang

Language of linked document

Here

media

Specifies media / device linked document is optimised for

Here

rel

Relationship between current document and linked document

Here

shape

Specifies shape of an <area> element

Here

target

Specifies where / how to open the linked document (or where to submit the form)

Here

type

Type of element

Here

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above (except the download, hreflang, media, rel and type attribute). The corresponding HTML DOM object also typically supports the hash, host, hostname, origin, password, pathname, port, protocol, search and username variants of the href attribute, see here for more details. The default style applicable to this element is shown here.

 

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 Elements


Desktop view | Switch to Mobile