Efficient way to make multiple clickable areas on a static image component (in React)

Question

I'm trying to figure out the best way of making clickable areas for a static image (which is a component). The goal is not to show users those clickable areas with any click effects. After users click the correct areas, the score will increment.

What I'm thinking to make div s that overlay the image. But there are many random objects that I need to consider. I might need to a lot of math (mainly ratio problems) for each div I'm making.

I'm also trying to use html map tag. So far, I don't see anything clickable. I don't get errors either.

What's the most efficient way of approaching this problem?

Here is my code:

//my static image component

import React from "react";

const BackgroundImage = ({ src, name }) => {
  return (
    <div>
      <img className="backgroundImage" src={src} useMap={name} alt={name} />
    </div>
  );
};

export default BackgroundImage;

//the map components that I can pass in different values to make different clickable areas

import React from "react";
import BackgroundImage from "./BackgroundImage";

const Mapper = ({
  src,
  name,
  target = "_self",
  alt = "none",
  title,
  coords,
  shape,
}) => {
  return (
    <div>
      <BackgroundImage src={src} useMap={name} />
      <map name={name}>
        <area
          target={target}
          alt={alt}
          title={title}
          coords={coords}
          shape={shape}
        />
      </map>
    </div>
  );
};

export default Mapper;

//the component with game logic: upon clicking correct clickable areas, users will earn scores (i.e. 3 areas to click to get it right; scores ranging from 0/3 to 3/3) after 10 seconds passed, then it automatically move on to the next page

import React from "react";
import zoomcall from "../images/zoomcall.png";
import BackgroundImage from "./BackgroundImage";
import Timer from "./Timer";
import LeftArrow from "./LeftArrow";
import { Link } from "react-router-dom";
import CorrectClicks from "./CorrectClicks";
import Mapper from "./Mapper";

const ZoomCall1Countdown = () => {
  return (
    <div>
      {/* <BackgroundImage src={zoomcall} usemap="zoomcall" /> */}
      <Timer />
      <CorrectClicks />
      <Link to="/readingtheroom">
        <LeftArrow />
      </Link>
      <Mapper
        src={zoomcall}
        name="zoomcall"
        title="11"
        coords="0,22,295,196"
        shape="rect"
        style={{ backgroundColor: "red", border: "5px,solid,red" }}
      />
    </div>
  );
};

export default ZoomCall1Countdown;

For Mapper , I'm thinking replicate this component to add more clickable areas. Right now, it's only one to try out.

Answer 1

Map should be perfect to add clickable areas on top of image.

<map> should be rendered before <BackgroundImage> producing HTML similar to the MDN docs .

const Mapper = ({
    src,
    name,
    href = 'about:blank',
    target = "_self",
    alt = "none",
    title,
    coords,
    shape,
}) => {
    return (
        <div>
            <map name={name}>
                <area
                    href={href} // URL to open when clicked
                    target={target}
                    alt={alt}
                    title={title}
                    coords={coords}
                    shape={shape}
                />
            </map>
            <BackgroundImage src={src} name={name} />
        </div>
    );
};

href prop was added for URL to open when area is clicked.

And also BackgroundImage should reference map by using attribute like usemap="#zoomcall" :

const BackgroundImage = ({ src, name }) => {
    return (
        <div>
            <img className="backgroundImage" src={src} usemap={`#${name}`} alt={name} />
        </div>
    );
};

PS

Alternatively SVG vector image can be used instead of img+map because it supports hyperlinks in it.

Read this article to learn how to add links to SVG.

Or use SVG editor that supports it.

For example this SVG with links was created using Google Drawings.