HTML Image Maps

HTML Image Maps allow you to add interactivity to images by defining clickable areas, also known as "hotspots," directly on the image. Each hotspot can link to a different URL or perform specific actions, making image maps useful for navigation, infographics, and interactive graphics that boost user engagement and accessibility. It’s commonly used for maps, diagrams, and images that require multiple clickable sections, adding an engaging, navigational layer to web content.

How Does an HTML Image Map Work?

An HTML Image Map works by defining specific areas within an image that users can click on to trigger different actions, such as navigating to various URLs. This is achieved by using a combination of the <img> tag with the usemap attribute, a <map> container for defining clickable areas, and <area> tags that specify the shape, coordinates, and link for each interactive region. Together, these components transform a static image into a dynamic, clickable element.

<img src="sitepoint-example.jpg" alt="Interactive SitePoint Image"
  usemap="#examplemap">

<map name="examplemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html"
    alt="Rectangle Link">
  <area shape="circle" coords="140,75,50" href="page2.html" alt="Circle Link">
  <area shape="poly" coords="130,80,180,60,230,80,220,120,170,140"
    href="page3.html" alt="Polygon Link">
</map>

Basic Components of an HTML Image Map:

usemap Attribute

The usemap attribute is placed within the <img> tag to connect the image to a <map> element, enabling the defined areas to become interactive.

Example:

<img src="sitepoint-map.jpg" alt="SitePoint Interactive Map"
  usemap="#map-example">

<map> Tag

This tag serves as the container for the image map and holds all <area> tags. The <map> element’s name attribute must match the usemap attribute’s value to establish a connection between the image and the map.

Example:

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

<area> Tag

Each <area> tag within the <map> element defines a clickable region on the image. The shape attribute sets the area type (rectangle, circle, or polygon), coords provides the precise coordinates for the area, and href links to the URL or action triggered by clicking the region. The alt attribute offers descriptive text, enhancing accessibility.

Example:

<area shape="rect" coords="50,50,150,150"
  href="https://www.sitepoint.com/premium/" alt="SitePoint Premium">
<area shape="circle" coords="200,100,50"
  href="https://www.sitepoint.com/community/" alt="SitePoint Community">

Defining Clickable Areas in an Image Map

Rectangular Area (shape="rect")

To create a rectangular clickable area, set shape="rect" and use coordinates for the top-left and bottom-right corners. This shape is useful for targeting square or rectangular sections within an image.

Example:

<area shape="rect" coords="34,44,270,350" href="https://www.sitepoint.com/"
  alt="Rectangle Link">

In this example, the rectangular area links to SitePoint’s Page and covers the specified coordinates.

Circular Area (shape="circle")

A circular clickable area uses shape="circle", defined by the center point’s coordinates (x, y) and the radius. This shape is ideal for round elements like logos or circular buttons.

Example:

<area shape="circle" coords="140,75,50"
  href="https://www.sitepoint.com/community/" alt="Circle Link">

This example creates a clickable circle on page, defined by the center and radius.

Polygonal Area (shape="poly")

For complex, custom shapes, use shape="poly" and define a series of x, y coordinates that outline the shape’s points. This is particularly helpful for images with irregular shapes or detailed maps.

Example:

<area shape="poly" coords="130,80,180,60,230,80,220,120,170,140"
  href="https://www.sitepoint.com/premium/library/" alt="Polygon Link">

Here, the polygonal area links to page, following the path created by the listed coordinates.

Using these shapes in image maps enables precise control over clickable areas within an image.

Creating an Image Map in HTML

Step 1: Select Your Image

Begin with the image you’d like to make interactive. Add the usemap attribute to link it to a <map> element by referencing the map’s name.

Example:

<img src="sitepoint-image.jpg" alt="Interactive Demo Image" usemap="#imagemap">

This usemap="#imagemap" connects the image to the <map> element named "imagemap."

Step 2: Define the Image Map

Create the <map> element and give it a unique name that matches the usemap attribute in your <img> tag.

Example:

<map name="imagemap">
  <!-- Clickable areas are added here -->
</map>

The name="imagemap" attribute connects this <map> element to the image.

Step 3: Add Clickable Areas

Use <area> tags inside the <map> to define each clickable region. Specify the shape, coords, and href for each area to direct users to different links or sections.

Example:

<map name="imagemap">
  <area shape="circle" coords="140,75,50"
    href="https://www.sitepoint.com/premium/library/" alt="Circle Link">
  <area shape="rect" coords="85,50,245,90"
    href="https://www.sitepoint.com/premium/" alt="Rectangle Link">
</map>

In this example, each <area> tag specifies a clickable shape and coordinates for its location within the image. The href attributes link to specific SitePoint pages.

Image Maps with JavaScript

Image maps can also trigger JavaScript actions. Add an onclick attribute to an <area> to execute JavaScript when the area is clicked.

Example:

<area shape="circle" coords="140,75,50" href="https://www.sitepoint.com/blog/"
  onclick="alert('Clicked!')">

Here, clicking the circular area displays an alert message. This approach allows for interactive, customized responses beyond simple navigation, making image maps versatile for creating engaging user experiences.

FAQs on HTML Image Maps

What is the purpose of an HTML Image Map?

An HTML Image Map allows specific regions within an image to function as interactive links, making images more engaging and useful for navigation. This feature is ideal for creating clickable maps, infographics, and diagrams that guide users to various content sections.

How can I create clickable regions within an image?

To create clickable areas, use the <map> element to define the map, and within it, add multiple <area> tags. Each <area> specifies a unique clickable region with attributes like shape, coords, and href to determine its function and destination.

What shapes can I use for clickable areas in an image map?

In an image map, you can use the following shapes for defining clickable regions:

• Rectangle (rect): Defined by two sets of coordinates for the top-left and bottom-right corners.
• Circle (circle): Defined by the center’s x, y coordinates and the radius.
• Polygon (poly): Defined by a series of x, y coordinates to create custom shapes, such as irregular paths or outlines.

How do I link an image to an image map in HTML?

To link an image to an image map, add the usemap attribute to the <img> tag. The value of usemap should match the name attribute in the <map> element. This association activates the clickable regions defined in the map.

Example:

<img src="sitepoint-image.jpg"
  alt="Clickable SitePoint Image" usemap="#sitepointmap">
<map name="sitepointmap">
  <!-- Define clickable areas here -->
</map>

Here, usemap="#sitepointmap" links the image to the map named "sitepointmap," enabling the <area> tags within it.

Can JavaScript be used with HTML Image Maps?

Yes, you can integrate JavaScript with image maps by adding the onclick attribute within <area> tags. This allows each clickable region to trigger JavaScript actions, like displaying alerts or running functions, adding an interactive layer beyond simple navigation.