Using the `<map>` and `<area>` Tags for Image Maps (Old but Still Functional)

TL;DR Image maps are clickable regions on an image with links to different URLs. They can be created using the <map> and <area> tags, which define a map and specify coordinates and links for each hotspot, respectively. This technique remains simple and effective for adding interactivity to images and can be made accessible by providing text descriptions of hotspots.

Using the <map> and <area> Tags for Image Maps (Old but Still Functional)

In the ever-evolving world of web development, it's easy to get caught up in the latest trends and technologies. However, sometimes the old ways are still the best. Take image maps, for example. These clickable regions on an image have been around since the early days of HTML, but they're still a valuable tool for adding interactivity to your website.

In this article, we'll take a look at how to use the <map> and <area> tags to create image maps that are both functional and accessible.

What is an Image Map?

An image map is an image with clickable regions, or "hotspots," that link to different URLs. They were commonly used in the early days of web development for navigation menus, interactive diagrams, and other applications where multiple links needed to be applied to a single image.

Despite the rise of more modern technologies like CSS sprites and JavaScript libraries, image maps remain a simple and effective way to add interactivity to an image.

The <map> Tag

The <map> tag is used to define an image map. It contains one or more <area> tags, which specify the coordinates and links for each hotspot.

Here's an example of a basic <map> tag:

<map name="example-map">
  <!-- <area> tags go here -->
</map>

The name attribute is required, as it allows you to reference the map in your image tag.

The <area> Tag

The <area> tag defines a single hotspot within an image map. It has several attributes:

• shape: specifies the shape of the hotspot (e.g., "rect," "circle," or "poly")
• coords: specifies the coordinates of the hotspot
• href: specifies the URL that the hotspot links to
• alt: provides a text description of the hotspot for accessibility purposes

Here's an example of an <area> tag:

<area shape="rect" coords="0,0,100,50" href="https://example.com" alt="Example link">

This tag defines a rectangular hotspot that covers the top-left corner of the image (coordinates 0,0 to 100,50) and links to https://example.com.

Using <map> and <area> with an Image

To use an image map with an image, you need to add a usemap attribute to the <img> tag. This attribute references the name of the <map> tag.

Here's an example:

<img src="example.jpg" usemap="#example-map">
<map name="example-map">
  <area shape="rect" coords="0,0,100,50" href="https://example.com" alt="Example link">
</map>

In this example, the <img> tag references the example-map map using the usemap attribute. The <map> tag defines a single hotspot that covers the top-left corner of the image.

Accessibility Considerations

Image maps can be problematic for accessibility if not implemented correctly. To ensure that your image map is accessible:

• Use the alt attribute to provide a text description of each hotspot
• Use the title attribute to provide additional information about each hotspot (optional)
• Make sure the hotspots are large enough to be easily clickable

Conclusion

While they may not be as flashy as some modern web development techniques, image maps remain a simple and effective way to add interactivity to an image. By using the <map> and <area> tags, you can create accessible and functional image maps that enhance the user experience.

So next time you need to add multiple links to a single image, consider reaching for these old but still functional HTML tags!