HTML coords Attribute

Posted in HTML Tutorial

Updated on Jan 26, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The coords attribute is used in HTML to define the coordinates of clickable areas within an image map.

This attribute is commonly associated with the <area> element, allowing developers to specify the shape and location of an interactive region within an image.

🎯 Purpose of coords

The primary purpose of the coords attribute is to provide information about the position and shape of a clickable area within an image.

This is crucial when creating image maps, where different regions of an image can serve as hyperlinks to distinct destinations.

💎 Values

The coords attribute takes different values depending on the shape of the clickable area. Here are the common shapes and their respective coords attribute values:

Rectangular Area (rect): Use four values—left, top, right, and bottom—to define the coordinates of the top-left and bottom-right corners of the rectangle.
rectangular-area.html
Copied
```
<area shape="rect" coords="left, top, right, bottom" href="destination.html" alt="Description">
```
Circular Area (circle): Specify three values—x, y, and radius—to define the center (x, y) and the radius of the circle.
circular-area.html
Copied
```
<area shape="circle" coords="x, y, radius" href="destination.html" alt="Description">
```
Polygonal Area (poly): Provide a series of x, y coordinate pairs to define the vertices of the polygon.
polygonal-area.html
Copied
```
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, ..." href="destination.html" alt="Description">
```

📄 Example

Here's an example of using the coords attribute within an image map:

coords.html

Copied

<img src="image.jpg" alt="Clickable Image" usemap="#imageMap">
<map name="imageMap">
  <area shape="rect" coords="10, 10, 100, 100" href="destination1.html" alt="Area 1">
  <area shape="circle" coords="150, 80, 50" href="destination2.html" alt="Area 2">
  <area shape="poly" coords="220, 30, 300, 80, 250, 150" href="destination3.html" alt="Area 3">
</map>

🧠 How it Works

In this example, three clickable areas are defined within the image using different shapes and corresponding coords values.

🔄 Dynamic Values with JavaScript

You can dynamically set the coords attribute using JavaScript.

This can be useful when you need to adjust the clickable areas based on user interactions or other dynamic factors. Here's a brief example:

coords.html

Copied

<script>
  // Dynamically set coords for a circular area
  document.getElementById("dynamicArea").coords = "200, 120, 80";
</script>

🧠 How it Works

In this script, the coords attribute is dynamically set for an area with the id dynamicArea, defining a circular shape with a center at (200, 120) and a radius of 80.

🏆 Best Practices

Ensure that the coordinates provided match the actual dimensions and positions within the image to create accurate clickable areas.
Test your image maps across different browsers to ensure consistent behavior.
Consider accessibility by providing descriptive alternative text (alt attribute) for each clickable area.