YouTip

# HTML <area> `coords` Attribute The `coords` attribute of the `` tag specifies the coordinates of a clickable region within an image map. When paired with the `shape` attribute, `coords` defines the size, shape, and exact placement of the interactive hotspots on an image. --- ## Quick Example The following example demonstrates an image map with three clickable hotspots (one rectangle and two circles) mapped onto an image of planets: ```html ``` --- ## Browser Support The `coords` attribute is universally supported across all modern and legacy web browsers: * Google Chrome * Mozilla Firefox * Safari * Microsoft Edge / Internet Explorer * Opera --- ## Definition and Usage The `coords` attribute defines the $x$ (horizontal) and $y$ (vertical) pixel coordinates of a shape on an image. ### Key Concepts: * **Coordinate Origin:** The top-left corner of the image is always the origin point `0,0`. * **Dependency:** The `coords` attribute must always be used in conjunction with the `shape` attribute. The number of coordinates required depends entirely on the shape specified. --- ## Syntax ```html ``` ### Attribute Values The format of the `coords` value depends on the value of the `shape` attribute: | Shape (`shape=`) | Coordinate Format (`coords=`) | Description | | :--- | :--- | :--- | | **`rect`** (Rectangle) | `x1,y1,x2,y2` | Specifies the coordinates of the top-left corner `(x1, y1)` and the bottom-right corner `(x2, y2)` of the rectangle. | | **`circle`** / **`circ`** | `x,y,radius` | Specifies the coordinates of the circle's center point `(x, y)` and its `radius` in pixels. | | **`poly`** (Polygon) | `x1,y1,x2,y2,...,xn,yn` | Specifies the coordinates of each vertex of the polygon. If the first and last coordinate pairs are not identical, the browser automatically closes the polygon by connecting the last vertex back to the first. | --- ## Detailed Shape Configurations ### 1. Rectangle (`shape="rect"`) To define a rectangular clickable area, you need four coordinates: * `x1`, `y1`: The horizontal and vertical position of the top-left corner. * `x2`, `y2`: The horizontal and vertical position of the bottom-right corner. ```html ``` ### 2. Circle (`shape="circle"`) To define a circular clickable area, you need three coordinates: * `x`, `y`: The center point of the circle. * `radius`: The distance from the center to the edge of the circle in pixels. ```html ``` ### 3. Polygon (`shape="poly"`) To define a custom polygon (such as a triangle, hexagon, or irregular shape), you list the coordinate pairs for each point of the shape: * Each point requires an `x` and a `y` coordinate. * A triangle requires 6 values (3 points), a quadrangle requires 8 values (4 points), and so on. ```html ``` --- ## Developer Considerations * **Responsive Images:** Standard HTML image maps using absolute pixel coordinates are not responsive by default. If the container image scales down on smaller screens, the coordinates will no longer align with the visual elements. To make image maps responsive, you must use CSS or a JavaScript library (such as `image-map-resizer`) to dynamically recalculate the coordinates. * **Accessibility:** Always provide a descriptive `alt` attribute for each `` tag. Screen readers rely on the `alt` text to describe the destination of the clickable hotspot to visually impaired users.