Place element on HTML area map

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">

// many more areas…

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


        class="open **marker**"

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

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.

1 Like

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