[html]
<div id="map-container-wrapper" style="overflow-x: auto; overflow-y: hidden; width: 100%; max-width: 100%;">
<div id="map_container">
<svg id="map" height="802px" viewBox="0 0 269.61041 212.19583" width="1018px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg"><image xlink:href="https://forumstatic.ru/files/001b/a1/c4/78086.webp" id="image1" height="100%" preserveAspectRatio="none" transform="translate(29.715682 -42.402085)" width="100%" x="-29.715681" y="42.402084"/>
<g fill="none" id="map_path"></g>
</svg>
</div>
</div>
<div id="tooltip"></div>
<style>
#map-container-wrapper {
position: relative;
max-width: 100%;
overflow-x: auto; /* Разрешаем горизонтальную прокрутку */
}
#map_container {position:relative;width:100%;height:802px;}
path {
cursor: pointer;
transition: fill 0.3s ease;
fill: white;
fill-opacity: 0;
stroke: black;
stroke-width: 0.1;
}
path:hover {
fill: white;
fill-opacity: 0.3;
}
#tooltip {
position: absolute;
display: none;
padding: 5px;
z-index: 1000;
pointer-events: none;
color: var(--beige-text);
text-shadow: 0px 0px 8px black;
background: url(https://forumstatic.ru/files/001b/a1/c4/97443.webp) repeat, #352e2e;
color: var(--beige-text);
border-radius: 6px;
box-shadow: 0px 0px 2px 0px black;
border: 1px solid var(--light-text);
}
body {min-width: auto!important;}
</style>
<script>
$(document).ready(function() {
$('#map_path').load("https://forumstatic.ru/files/001b/a1/c4/23735.html", function(response, status, xhr) {
if (status == "success") {
$('#map_container').find('path').on('mouseenter', function(event) {
var areaName = $(this).attr('data-name');
$('#tooltip').text(areaName).show();
}).on('mousemove', function(event) {
$('#tooltip').css({
top: event.pageY + 15,
left: event.pageX + 15
});
}).on('mouseleave', function() {
$('#tooltip').hide();
}).on('click', function() {
var url = $(this).attr('data-url');
if (url) {
window.top.location.href = url;
}
});
} else {
console.log("Ошибка загрузки: " + xhr.status + " " + xhr.statusText);
}
});
});
</script>
[/html]




































