HTML shape Attribute

Posted in HTML Tutorial

Updated on Jan 29, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The shape attribute is a versatile feature in HTML used in conjunction with the <area> element to define the shape of a clickable area within an image map.

Image maps allow developers to create interactive regions on an image, each of which can be linked to different destinations.

The shape attribute plays a crucial role in determining the clickable area's geometry.

🎯 Purpose of shape

The primary purpose of the shape attribute is to specify the shape of the clickable area associated with an <area> element.

By defining the shape, developers can create image maps that include rectangular, circular, or polygonal clickable regions.

💎 Values

The shape attribute accepts various values to define different shapes. The three main values are:

rect: This value is used for creating rectangular clickable areas. It requires four additional attributes: coords (defining the coordinates of the top-left and bottom-right corners).
circle: This value is used for creating circular clickable areas. It requires three additional attributes: coords (defining the coordinates of the circle's center) and radius (defining the radius of the circle).
poly: This value is used for creating polygonal clickable areas. It requires the coords attribute to define the coordinates of the polygon's vertices.

📄 Example

Let's look at a simple example of how to use the shape attribute in combination with the <area> element:

shape.html

Copied

<img src="example.jpg" alt="Example Image" usemap="#exampleMap" />

<map name="exampleMap">
  <area shape="rect" coords="0,0,50,50" href="destination1.html" alt="Clickable Area 1" />
  <area shape="circle" coords="100,100,50" href="destination2.html" alt="Clickable Area 2" />
  <area shape="poly" coords="200,0,250,50,200,100" href="destination3.html" alt="Clickable Area 3" />
</map>

🧠 How it Works

In this example, three clickable areas are defined using the rect, circle, and poly values of the shape attribute within the <area> elements.

🔄 Dynamic Values with JavaScript

You can also dynamically set the shape attribute using JavaScript, allowing for more interactive and adaptive image maps. Here's a brief example:

shape.html

Copied

<script>
  // Dynamically set the shape attribute for an area element
  var areaElement = document.getElementById("dynamicArea");
  areaElement.shape = "rect";
  areaElement.coords = "50,50,100,100";
</script>

🧠 How it Works

In this script, the shape attribute is dynamically set to rect for an area element with the id dynamicArea, and the coords attribute is updated accordingly.

This can be particularly useful when you want to modify image map areas based on user interactions or other dynamic conditions.

🏆 Best Practices

Ensure that the coordinates specified in the coords attribute are accurate to define the clickable area correctly.
Test image maps thoroughly to ensure cross-browser compatibility and responsiveness.
Use the appropriate shape value based on the desired clickable area geometry.