HTML Area coords Property: Area Coordinates

HTML Area coords Property: Defining Clickable Regions

The HTML coords property of the <area> element specifies the coordinates of the hot spot region. This property is an essential part of creating image maps, allowing you to define clickable areas within an image. The coords attribute works in conjunction with the shape attribute to determine the exact boundaries of the clickable region.

What is the coords Property?

The coords property defines the shape of the area by specifying a comma-separated list of numerical values. The number and meaning of these values depend on the shape attribute of the <area> element.

Purpose of the coords Property

The primary purpose of the coords property is to define the exact location and size of a clickable region within an image map. This allows users to interact with specific parts of an image, linking them to different URLs or actions.

Syntax of the coords Property

The syntax for the coords property varies depending on the shape attribute. Here’s a breakdown for each shape:

<area shape="rect" coords="x1, y1, x2, y2" alt="Rectangle Area">
<area shape="circle" coords="cx, cy, r" alt="Circle Area">
<area shape="poly" coords="x1, y1, x2, y2, ..., xn, yn" alt="Polygon Area">

Where:

• rect:
• x1: The x-coordinate of the top-left corner of the rectangle.
• y1: The y-coordinate of the top-left corner of the rectangle.
• x2: The x-coordinate of the bottom-right corner of the rectangle.
• y2: The y-coordinate of the bottom-right corner of the rectangle.
• circle:
• cx: The x-coordinate of the center of the circle.
• cy: The y-coordinate of the center of the circle.
• r: The radius of the circle.
• poly:
• x1, y1, x2, y2, ..., xn, yn: A series of x and y coordinate pairs that define the vertices of the polygon.

Possible Attributes

Examples of Using the coords Property

Let’s explore some practical examples of how to use the coords property with different shapes to create interactive image maps.

Defining a Rectangular Area

This example demonstrates how to define a rectangular clickable area within an image.

<img
  src="https://dummyimage.com/400x300/000/fff"
  alt="Rectangle Example"
  usemap="#rectangleMap"
  style="border: 1px solid black;"
/>

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

In this example, a rectangular area is defined from the coordinates (50, 50) to (200, 200). Clicking within this rectangle will navigate the user to https://www.example.com/rectangle.

Defining a Circular Area

This example shows how to define a circular clickable area within an image.

<img
  src="https://dummyimage.com/400x300/000/fff"
  alt="Circle Example"
  usemap="#circleMap"
  style="border: 1px solid black;"
/>

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

Here, a circular area is defined with its center at (200, 150) and a radius of 75 pixels. Clicking within this circle will navigate the user to https://www.example.com/circle.

Defining a Polygonal Area

This example illustrates how to define a polygonal clickable area within an image.

<img
  src="https://dummyimage.com/400x300/000/fff"
  alt="Polygon Example"
  usemap="#polygonMap"
  style="border: 1px solid black;"
/>

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

In this example, a polygonal area is defined by four coordinate pairs, creating a custom shape. Clicking within this polygon will navigate the user to https://www.example.com/polygon.

Interactive Image Map with Tooltips

This example combines the coords and alt properties to create an interactive image map with tooltips that display when hovering over the clickable areas.

<img
  src="https://dummyimage.com/400x300/000/fff"
  alt="Interactive Map"
  usemap="#interactiveMap"
  style="border: 1px solid black;"
/>

<map name="interactiveMap">
  <area
    shape="rect"
    coords="50, 50, 150, 150"
    href="https://www.example.com/area1"
    alt="Area 1"
    title="Click here for Area 1"
  />
  <area
    shape="circle"
    coords="250, 150, 50"
    href="https://www.example.com/area2"
    alt="Area 2"
    title="Click here for Area 2"
  />
  <area
    shape="poly"
    coords="300, 50, 350, 100, 400, 50, 350, 20"
    href="https://www.example.com/area3"
    alt="Area 3"
    title="Click here for Area 3"
  />
</map>

Here, different shapes are defined with associated href links and descriptive title attributes, which provide tooltips on hover.

Dynamic Coordinate Adjustment with JavaScript

To dynamically adjust the coordinates of an area, you can use JavaScript to modify the coords property based on user interactions or other events. Here’s an example:

<img
  id="dynamicImage"
  src="https://dummyimage.com/400x300/000/fff"
  alt="Dynamic Map"
  usemap="#dynamicMap"
  style="border: 1px solid black;"
/>

<map name="dynamicMap">
  <area
    id="dynamicArea"
    shape="rect"
    coords="50, 50, 150, 150"
    href="#"
    alt="Dynamic Area"
  />
</map>

<button id="updateButton">Update Coordinates</button>

<script>
  document.getElementById("updateButton").addEventListener("click", function () {
    const area = document.getElementById("dynamicArea");
    area.coords = "200, 200, 300, 300";
  });
</script>

In this example, clicking the “Update Coordinates” button changes the coords property of the area, moving the clickable rectangle to a new position.

Real-World Applications of the coords Property

The coords property is used in various real-world applications, including:

• Interactive Maps: Creating clickable maps where different regions link to specific locations or information.
• E-commerce: Allowing users to click on specific parts of a product image to view detailed information or add the item to their cart.
• Educational Tools: Developing interactive diagrams and illustrations for learning purposes.
• Gaming: Implementing interactive game interfaces with clickable elements in the game world.

Tips and Best Practices

• Use descriptive alt attributes: Always provide meaningful alt attributes for accessibility.
• Keep coordinates accurate: Ensure the coordinates match the visual boundaries of the area for a seamless user experience.
• Test thoroughly: Test the image map on different browsers and devices to ensure it works correctly.
• Consider responsive design: Use JavaScript to dynamically adjust coordinates based on screen size and image dimensions. 💡
• Accessibility: Ensure that image maps are accessible to users with disabilities by providing appropriate alt and title attributes. ♿

Browser Support

The coords property is supported by all major browsers, ensuring consistent behavior across different platforms. ✅

Conclusion

The HTML Area coords property is a powerful tool for creating interactive image maps. By understanding its syntax and usage, you can define precise clickable regions within images, enhancing user engagement and providing intuitive navigation. Whether for interactive maps, e-commerce product displays, or educational tools, the coords property offers a versatile solution for creating interactive visual experiences.