Карта изображений установить фоновое изображение для области круга - PullRequest
Новая
       44

Карта изображений установить фоновое изображение для области круга

2 голосов
/ 12 октября 2019

Я создал карту изображения с точкой. Теперь я хочу изменить цвет или изображение точки в CSS Hover. Возможно ли решить это с помощью CSS, или требуется Javascript? Какие еще варианты у меня есть с областью HTML? 

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

1 Ответ

0 голосов
/ 12 октября 2019
Элементы

<map> и <area> предназначены для определения интерактивной области внутри изображения, их стиль не может быть стилизован так, как это обычно делается с другими элементами. Таким образом, вы не можете добавить фоновое изображение или цвет к ним. Вам следует использовать элементы другого типа и расположить их поверх изображения (или другого контейнера с фоновым изображением) и сделать их кликабельными. 

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