Place element on HTML area map

HTML & CSS
1

I’ve created an HTML map with an image. I also defined clickable areas, which triggers event.
For ux reasons I want to highlight the cklicked area by placing a colored circle on it.

What did I wrong?

My HTML (only related code)

 <map name="my-map" id="my-map">
      <area
        class="open"
        target=""
        alt="item1"
        title="item1"
        href=""
        coords="176,74,30"
        shape="circle"
      />

// many more areas…

My idea is to add a class to the clicked area .marker (The colored circle)

like

   <area
        class="open **marker**"
        target=""
       ...
      />

The CSS for .marker class:

.marker {
  /* visibility: hidden; */
  width: 20px;
  height: 20px;
  border: 3px solid red;
  border-radius: 50%;
}

Before applying JS I just wanted to test it by given the HTML area map a class of .marker
Nothing happend.
Thought it would work by adding a z-index of maybe 100.
Did not work.

Later on in the JS I want to addClass(“marker”) - and removeClass(“marker”)

So: Is it actually possible to add style on certain areas of an HTML area map? An if so, what did I wrong?

Many thanks

2

Unfortunately that is not possible as the area tag doesn’t actually match the position supplied by its co-ordinates.

See my answer below from 6 years ago for more info.

There’s an old plugin called maphighlight that will highlight coordinates on an image map which be of use.
https://davidlynch.org/projects/maphilight/docs/demo_usa.html

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.