MakeW3web

Image Maps

Image maps are a technique that allows you to define clickable areas on an image, creating multiple hyperlinks within a single image. This is useful for creating interactive graphics or navigation menus. Image maps are created using the `<map>` and `<area>` elements in combination with the `<img>` element.

Here's a step-by-step explanation of how to create an image map:

  1. Create an image with multiple areas to be used as clickable regions. You can use any image editor to design the image.

  2. Add the `<img>` element to your HTML and include a `usemap` attribute. The value of the `usemap` attribute should start with a hash symbol (#) followed by the name of the map.

Example:

<img src="example-image-map.jpg" alt="An example image map" usemap="#example-map">
  1. Create a `<map>` element and set its name attribute to match the value of the `usemap` attribute (without the hash symbol).

Example:

<map name="example-map">
</map>
  1. Inside the `<map>` element, add `<area>` elements for each clickable region. The `<area>` element uses the `shape` and `coords` attributes to define the clickable region and the `href` attribute to specify the hyperlink destination.
  • `shape`: Specifies the shape of the clickable region (rect, circle, or poly)
  • `coords`: Defines the coordinates of the clickable region, based on the shape
  • `href`: Specifies the URL or destination of the hyperlink

Example:

<area shape="rect" coords="10,10,100,100" href="https://www.example1.com" alt="Link 1">
<area shape="circle" coords="200,75,50" href="https://www.example2.com" alt="Link 2">
<area shape="poly" coords="350,10,380,100,320,100" href="https://www.example3.com" alt="Link 3">

Here's a combined example demonstrating the use of image maps:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Maps Example</title>
</head>
<body>
    <h1>Image Maps</h1>
    
    <img src="example-image-map.jpg" alt="An example image map" usemap="#example-map">
    
    <map name="example-map">
        <area shape="rect" coords="10,10,100,100" href="https://www.example1.com" alt="Link 1">
        <area shape="circle" coords="200,75,50" href="https://www.example2.com" alt="Link 2">
        <area shape="poly" coords="350,10,380,100,320,100" href="https://www.example3.com" alt="Link 3">
    </map>
</body>
</html>

Note that while image maps can be useful in certain situations, they have some limitations, such as reduced accessibility and responsiveness. Always ensure that your image maps are accessible to all users, including those using screen readers or touch devices, and consider using alternative methods like CSS or SVG for creating interactive graphics when possible.

Was this page helpful?