Image map set background image for circle area

Question

I have created an image map with a dot. Now I want to change the color or the image of the dot at CSS Hover. Is it possible to solve this with CSS, or is Javascript required? What other options do I have with HTML Area?

<img src="map.jpg" usemap="#image-map" style="z-index:1;">

<map name="image-map" id="Image-Maps">
    <area class="one" coords="286,287,7" shape="circle">
</map>

<style>
.one {
width: 100px;
height: 100px;
background: url('point-blue.png');
z-index:2;
}

.one:hover {
background: url('point-red.png');
z-index:2;
}
</style>

Answer 1

<map> and <area> elements are meant to define a clickable area inside an image, they cannot be styled as you would normally do with other elements. Thus, you cannot add a background image or color to them. You should use another type of elements and position them on top of your image (or another container with a background image) and make them clickable.

.one {
  width: 100px;
  height: 100px;
  background: url('point-blue.png');
  z-index: 2;
}

.one:hover {
  background: url('point-red.png');
  z-index: 2;
}

#map {
  width: 500px;
  height: 500px;
  background: url(https://picsum.photos/500);
  position: relative;
}

#dot {
  position: absolute;
  left: 279px;
  top: 280px;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background: dodgerblue;
}

#dot:hover {
  cursor: pointer;
  background: tomato;
}

<div id="map">
  <div id="dot"></div>
</div>