пример
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Карта России с регионами работы компании</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background: #f7f7f7;
display: flex;
justify-content: center;
}
#russia-map {
max-width: 800px;
width: 100%;
height: auto;
background: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 12px rgba(0,0,0,0.1);
}
svg {
width: 100%;
height: auto;
}
.region {
fill: #d0d0d0;
stroke: #fff;
stroke-width: 1;
cursor: pointer;
transition: fill 0.3s;
}
.region.active {
fill: #2a9d8f;
}
.region:hover {
fill: #e76f51;
}
/* Подсказка */
#tooltip {
position: absolute;
padding: 6px 10px;
background: rgba(0,0,0,0.75);
color: #fff;
border-radius: 4px;
pointer-events: none;
font-size: 14px;
display: none;
white-space: nowrap;
z-index: 10;
}
</style>
</head>
<body>
<div id="tooltip"></div>
<div id="russia-map">
<!-- Карта Россия с регионами (упрощённая версия) -->
<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" aria-label="Карта России">
<!-- Пример нескольких регионов -->
<path id="Moscow" class="region" d="M480,300 l40,-20 l20,30 l-40,30 z" />
<path id="Saint-Petersburg" class="region" d="M420,220 l35,-25 l25,20 l-20,25 z" />
<path id="Novosibirsk" class="region" d="M700,350 l40,-10 l30,40 l-50,50z" />
<path id="Krasnoyarsk" class="region" d="M760,380 l50,-40 l40,60 l-70,60z" />
<path id="Sochi" class="region" d="M530,380 l20,-10 l15,30 l-22,18z" />
</svg>
</div>
<script>
// Список регионов, где работает компания
const activeRegions = ['Moscow', 'Novosibirsk', 'Sochi'];
const tooltip = document.getElementById('tooltip');
activeRegions.forEach(regionId => {
const regionElem = document.getElementById(regionId);
if (regionElem) {
regionElem.classList.add('active');
}
});
// Добавляем обработку подсказок при наведении
const regions = document.querySelectorAll('.region');
regions.forEach(region => {
region.addEventListener('mousemove', (e) => {
tooltip.style.display = 'block';
tooltip.style.left = (e.pageX + 15) + 'px';
tooltip.style.top = (e.pageY + 15) + 'px';
tooltip.textContent = region.id;
});
region.addEventListener('mouseleave', () => {
tooltip.style.display = 'none';
});
});
</script>
</body>
</html>