Как создать и выделить области на изображении?

Question

[GeorgeKay]

В фигме есть изображение карты, в интерфейсе, карта будет синяя с границами областей, на этой карте будут выделяться области, допустим голубым цветом, на которые наведен курсов, и в зависимости от того на какой части карты hover, будет выводится соответствующая информация. Ну и точки(иконки или текст) на изображении, я для примера только Алматы добавил, но по сути они будут по всей карте, в конкретных местах, без смещения. И информация в десктоп режиме будет стрелочкой тянуться от этих точек.


Может кто знает, какой либо из этих пунктов, где можно посмотреть, что почитать?

Comments

[Ankhena]

У вас в макете SVG, её и используйте

Answer 1

[Даниил Конев]

Экспортируй элементы в SVG, каждую область отдельно, судя по скрину, это позволяет тебе сделать. Вывести все области поочередно в контейнере и позиционировать так, что бы получилась карта:

<div class="map-conteiner">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
  <div class="map-item">
</div>

Выведи элементы через псевдоклассы ::before или ::аfter с помощью mask-image при таком выводе svg цвет меняется за счет background-color. Потом через hover меняй цвет за счет background-color, плавности даст transition + Для карты еще можно добавить небольшое увеличение этой области с transform scale. Будет плавно меняться цвет и увеличение небольшое при hover.

Пример мой записи для псевдокласса:

.you-class::before {
content: '';
display: block;
position: absolute;
width: 15px;
height: 15px;
top: 0px;
left: 0px;
background-color: blue;
-webkit-mask-image: url('/image/map-item.svg');
mask-image: url('/image/map-item.svg');
transition: 0.3s;
}
.you-class:hover::before {
    background-color: #E6372A;
    transform: scale(1.1)
}

Далее, вывод информации внизу, тут используй JS, самое просто найти условие Jquery показать/скрыть контент при наведении курсора, таких пример масса, к примеру:

$(document).ready(function(){
$('#block_1').mouseover(function(e){
$('#block_2').show();
});
$('#block_1').mouseout(function(e){
$('#block_2').hide();
});
});