HTML Area shape Property: Defining Area Shapes in Image Maps

Table of Contents

HTML Area `shape` Property: Defining Area Shapes in Image Maps

The shape property of the HTML <area> element specifies the geometric shape of the clickable area within an image map. This property, in conjunction with the coords attribute, allows you to define precise regions on an image that act as hyperlinks. By setting the shape property, you can create interactive image maps where different parts of an image link to different URLs.

Purpose of the `shape` Property

The shape property enables the creation of custom clickable areas within an image map. This is useful for:

Creating non-rectangular hotspots on an image.
Defining complex regions for interactive infographics.
Enhancing user experience by providing intuitive navigation within an image.

Syntax

The shape property is set as an attribute of the <area> element:

<area shape="value" coords="coordinates" href="url" alt="description">

Values

The shape property accepts the following values:

Value	Description
`rect`	Defines a rectangular area. Requires four coordinates: `x1, y1, x2, y2`, where `(x1, y1)` is the top-left corner and `(x2, y2)` is the bottom-right corner.
`circle`	Defines a circular area. Requires three coordinates: `cx, cy, radius`, where `(cx, cy)` is the center of the circle and `radius` is the radius.
`poly`	Defines a polygonal area. Requires a series of `x, y` coordinate pairs that define the vertices of the polygon. Example: `x1, y1, x2, y2, x3, y3, …`.
`default`	Specifies the entire image as the clickable area. If no other shapes are defined, this will be the fallback, or it can define a final catch-all area.

Examples

Let’s explore some practical examples of how to use the shape property with different values.

Example 1: Rectangular Area

This example demonstrates how to create a rectangular clickable area on an image.

<img src="https://dummyimage.com/200x200/0074D9/fff" alt="Rectangle Image" usemap="#rectangleMap">

<map name="rectangleMap">
  <area shape="rect" coords="20,20,180,180" href="https://www.example.com/rectangle" alt="Rectangle Link">
</map>

In this example, the shape is set to rect, and the coords attribute defines a rectangle from (20, 20) to (180, 180). Clicking within this rectangle will navigate to https://www.example.com/rectangle.

Example 2: Circular Area

This example demonstrates how to create a circular clickable area on an image.

<img src="https://dummyimage.com/200x200/2ECC40/fff" alt="Circle Image" usemap="#circleMap">

<map name="circleMap">
  <area shape="circle" coords="100,100,80" href="https://www.example.com/circle" alt="Circle Link">
</map>

In this example, the shape is set to circle, and the coords attribute defines a circle with its center at (100, 100) and a radius of 80. Clicking within this circle will navigate to https://www.example.com/circle.

Example 3: Polygonal Area

This example demonstrates how to create a polygonal clickable area on an image.

<img src="https://dummyimage.com/200x200/FF4136/fff" alt="Polygon Image" usemap="#polygonMap">

<map name="polygonMap">
  <area shape="poly" coords="50,20,150,20,180,100,150,180,50,180,20,100" href="https://www.example.com/polygon" alt="Polygon Link">
</map>

In this example, the shape is set to poly, and the coords attribute defines a polygon with six vertices. Clicking within this polygon will navigate to https://www.example.com/polygon.

Example 4: Default Area

This example demonstrates how to define a default area for an image map. If the user clicks anywhere outside of the areas defined by the rect, circle, and poly tags, they will navigate to the default URL.

<img src="https://dummyimage.com/200x200/FFDC00/000" alt="Mixed Shapes Image" usemap="#mixedMap">

<map name="mixedMap">
  <area shape="rect" coords="20,20,80,80" href="https://www.example.com/rect" alt="Rectangle Link">
  <area shape="circle" coords="150,50,30" href="https://www.example.com/circle" alt="Circle Link">
  <area shape="poly" coords="50,120,70,180,130,180,150,120" href="https://www.example.com/polygon" alt="Polygon Link">
  <area shape="default" href="https://www.example.com/default" alt="Default Link">
</map>

In this example, multiple shapes are defined with their respective links. If a user clicks outside of any of these defined shapes, they will navigate to the URL specified in the default area tag i.e. https://www.example.com/default.

Practical Use Case: Interactive World Map

Let’s create an interactive world map where different continents are clickable and link to relevant information pages.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Physical_world_map_blank.svg/1280px-Physical_world_map_blank.svg.png" alt="World Map" usemap="#worldMap" width="600">

<map name="worldMap">
  <area shape="poly" coords="260,170,310,130,360,150,380,220,340,280,280,250" href="https://www.example.com/europe" alt="Europe">
  <area shape="poly" coords="420,200,480,180,520,250,500,320,440,300" href="https://www.example.com/asia" alt="Asia">
  <area shape="poly" coords="100,250,180,220,220,300,180,380,100,350" href="https://www.example.com/africa" alt="Africa">
  <area shape="poly" coords="100,100,150,80,200,150,150,220,100,180" href="https://www.example.com/northamerica" alt="North America">
  <area shape="poly" coords="100,400,150,380,200,450,150,520,100,480" href="https://www.example.com/southamerica" alt="South America">
  <area shape="poly" coords="400,500,450,480,500,550,450,620,400,580" href="https://www.example.com/australia" alt="Australia">
</map>

In this example, a world map image is used, and each continent is defined as a polygonal area. Clicking on a continent will redirect the user to a specific page containing information about that continent.

Tips and Best Practices

Use descriptive alt attributes: Always provide meaningful alt attributes for the <area> elements to improve accessibility.
Test thoroughly: Ensure that the clickable areas are accurately defined and that the links work correctly across different browsers.
Consider responsiveness: Image maps may require adjustments for different screen sizes. Consider using JavaScript to dynamically adjust the coordinates based on the screen size.
Provide visual cues: Use CSS to highlight the clickable areas on hover, providing a visual indication to the user.

Browser Support

The shape property of the <area> element is widely supported across all modern web browsers.

Conclusion

The shape property of the HTML <area> element is a powerful tool for creating interactive image maps. By defining precise shapes for clickable areas, you can enhance user engagement and provide intuitive navigation within images. Whether you’re creating interactive infographics or custom navigation systems, mastering the shape property is essential for modern web development.