HTML Image Maps

0

HTML Image Maps allow you to define clickable areas on an image. These areas, called “hotspots”, can be used to link to different pages or parts of the page, making the image interactive. Image maps are particularly useful for things like interactive diagrams, maps, and photo galleries where different regions of the image lead to different destinations.

How to Create an HTML Image Map

To create an image map, you need two main components:

  1. The <img> tag: This displays the image.
  2. The <map> tag: This defines the clickable areas within the image.

Basic Structure

Here’s the basic structure of an HTML image map:

<img src="image.jpg" usemap="#map1" alt="Example Image">
<map name="map1">
    <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Link 1" title="Click to visit Example">
    <area shape="circle" coords="300,200,50" href="https://www.anotherlink.com" alt="Link 2" title="Click to visit Another Link">
</map>

1. The <img> tag with usemap

The usemap attribute in the <img> tag references the <map> by its name. This tells the browser that the image will have interactive areas defined in the <map> tag.

2. The <map> tag

The <map> tag holds one or more <area> elements. Each <area> element represents a clickable region on the image. The name attribute of the <map> must match the usemap value in the <img> tag.

3. The <area> tag

Each <area> tag defines an individual clickable region and its properties:

  • shape: Defines the shape of the clickable region. It can be one of the following:
    • rect: Rectangle
    • circle: Circle
    • poly: Polygon
  • coords: Defines the coordinates of the shape on the image.
    • For a rectangle: coords="x1,y1,x2,y2" (top-left corner and bottom-right corner).
    • For a circle: coords="x,y,radius" (center and radius).
    • For a polygon: coords="x1,y1,x2,y2,...,xn,yn" (a list of x,y coordinates defining the polygon).
  • href: The URL that the area links to.
  • alt: Provides alternative text for the area (important for accessibility).
  • title: A tooltip that appears when the user hovers over the area.

Example of a Simple Image Map

Let’s say you have an image of a map and want to make different regions clickable.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Map Example</title>
</head>
<body>

<h1>Clickable Image Map</h1>
<p>Click on different areas of the map to visit different websites.</p>

<img src="map.jpg" usemap="#map" alt="Interactive Map" />

<map name="map">
  <!-- Define clickable rectangular area -->
  <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Area 1" title="Go to Example 1">

  <!-- Define clickable circular area -->
  <area shape="circle" coords="300,200,50" href="https://www.anotherlink.com" alt="Area 2" title="Go to Another Link">

  <!-- Define clickable polygon area -->
  <area shape="poly" coords="150,30,180,40,200,60,150,80,120,70" href="https://www.thirdlink.com" alt="Area 3" title="Go to Third Link">
</map>

</body>
</html>

Explanation:

  • Image: The <img> tag shows the image map.jpg, and the usemap="#map" links this image to the image map with the name="map".
  • Area 1: A rectangle defined by the coordinates 34,44,270,350 (top-left and bottom-right corners) links to https://www.example.com.
  • Area 2: A circular area defined by the coordinates 300,200,50 (center and radius) links to https://www.anotherlink.com.
  • Area 3: A polygon with more complex coordinates, creating a custom clickable region, links to https://www.thirdlink.com.

Coordinates for Different Shapes

  1. Rectangle (rect): The coords attribute defines the top-left and bottom-right corners of the rectangle. 
    <area shape="rect" coords="34,44,270,350" href="https://www.example.com">
    • 34,44: Top-left corner (x1, y1)
    • 270,350: Bottom-right corner (x2, y2)
  2. Circle (circle): The coords attribute defines the center of the circle and the radius. 
    <area shape="circle" coords="300,200,50" href="https://www.anotherlink.com">
    • 300,200: Center of the circle (x, y)
    • 50: Radius
  3. Polygon (poly): The coords attribute defines a series of points (x1, y1, x2, y2, etc.) that form a polygon. 
    <area shape="poly" coords="150,30,180,40,200,60,150,80,120,70" href="https://www.thirdlink.com">
    • The coords attribute defines multiple points: 150,30, 180,40, 200,60, etc., which create a polygon shape.

Tips and Tricks for Using Image Maps

1. Responsive Image Maps

Since coordinates are fixed, they don’t adjust automatically to different screen sizes or when the image is resized. To make image maps more responsive, consider using JavaScript to recalculate the coordinates based on the image’s dimensions or use CSS to adjust the image size proportionally. You can also use CSS to make the image responsive (using width: 100%) and then adjust the coords dynamically with JavaScript.

2. Tool for Getting Coordinates

It’s tricky to manually calculate the coordinates of specific areas on an image. Tools like Image-Map Generator or browser-based tools (like using the developer tools to inspect an image) can help you determine the exact coordinates of the regions you want to make clickable.

3. Alt Text and Accessibility

Make sure to use descriptive alt text for each clickable area. This is important for accessibility, as it allows screen readers to describe the image regions to users who are visually impaired.

<area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="City center" title="Visit City Center">

4. Using Image Maps with SVG

Instead of using bitmap images for image maps, you can also use SVG (Scalable Vector Graphics). SVG images allow you to define areas directly within the image, making it easier to create complex clickable regions that adjust well with responsive design. You can use <a> tags directly within an SVG file to define interactive regions.

5. Using Multiple Image Maps

If you have a large image with many sections, you might consider creating multiple <map> elements for different regions of the image, especially if you need to link to different destinations or have different interactive behaviors in each region.

Conclusion

Image maps are a useful feature in HTML when you need to make different regions of an image clickable. You can define rectangular, circular, or polygonal clickable areas, and link them to different destinations. However, it’s important to ensure that the coordinates are correctly calculated, and consider accessibility and responsiveness for a better user experience.