The HTML <area> Element

Publish in HTML Tutorial el 23/05/2025 15:47

The <area> element defines a clickable area inside an image map (an image with clickable areas). It is always nested inside a <map> tag. The element is invisible to users but creates hyperlinked regions on an image that can be circles, rectangles, or polygons.

Key attributes include:

shape: Defines the shape of the area (rect, circle, poly, default)
coords: Specifies coordinates of the area
href: The hyperlink target
alt: Alternative text for accessibility
target: Where to open the linked document

Basic Syntax

Examples

1. Basic Image Map with Rectangular Area

This example creates a rectangular clickable area on an image.

Play Code

<img src="https://placehold.co/300x300/png" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="50,50,250,150" href="https://example.com" alt="Clickable rectangle" target="_blank">
</map>

2. Circular Clickable Area

This example creates a circular clickable region.

Play Code

<img src="https://placehold.co/300x300/png" usemap="#map2">
<map name="map2">
  <area shape="circle" coords="150,150,50" href="https://example.com" alt="Clickable circle">
</map>

3. Polygonal Area with Multiple Points

This example creates a complex polygonal clickable area.

Play Code

<img src="https://placehold.co/300x300/png" usemap="#map3">
<map name="map3">
  <area shape="poly" coords="50,50,100,25,150,50,150,100,100,125,50,100" 
        href="https://example.com" alt="Star-shaped area">
</map>

4. Area with JavaScript onClick Event

This example shows how to use JavaScript with the area element.

Play Code

<img src="https://placehold.co/300x300/png" usemap="#map4">
<map name="map4">
  <area shape="rect" coords="50,50,250,150" onclick="alert('Rectangle clicked!')" alt="Clickable rectangle">
</map>

5. Multiple Areas with JavaScript Hover Effects

This example demonstrates multiple areas with hover effects using JavaScript.

Play Code

<img src="https://placehold.co/300x300/png" usemap="#map5" id="imgmap">
<map name="map5">
  <area shape="rect" coords="20,20,140,140" onmouseover="showInfo('Area 1')" onmouseout="hideInfo()" alt="Red area">
  <area shape="rect" coords="160,20,280,140" onmouseover="showInfo('Area 2')" onmouseout="hideInfo()" alt="Green area">
</map>
<div id="infoBox"></div>
<script>
function showInfo(text) {
  document.getElementById('infoBox').innerHTML = text;
}
function hideInfo() {
  document.getElementById('infoBox').innerHTML = '';
}
</script>

Tips and Tricks

Use image editing software with rulers to accurately determine coordinates for your areas
Always include alt text for accessibility
For complex shapes, break them down into simpler polygons
Consider using CSS tooltips with JavaScript for better hover effects
Test your image maps on different devices as coordinate precision is important

Browser Support

The <area> element is supported by all major browsers. However, complex image maps may not work well on mobile devices due to the precision required for touching small areas.