[html]
<div id="map-container-wrapper" style="overflow-x: auto; overflow-y: hidden; width: 100%; max-width: 100%;">
<div id="map_container">
<div id="levelSwitchers">
<span data-level="3">3</span><br>
<span data-level="2">2</span><br>
<span data-level="1" class="active">1</span>
</div>
<svg
width="1013"
height="865"
viewBox="0 0 269.34583 228.86458"
version="1.1"
id="map"
xml:space="preserve"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g id="map_path3" class="level" style="display:none"></g>
<g id="map_path2" class="level" style="display:none"></g>
<g id="map_path1" class="level"></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:865px;}
path {
cursor: pointer;
transition: fill 0.3s ease;
fill: white;
fill-opacity: 0;
stroke: black;
/*stroke-width: 0.1;*/
stroke-width: 0;
}
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;}
#levelSwitchers {
position:absolute;
}
#levelSwitchers span {
padding: 10px;
display: inline-block;
background: #dbdbdb;
margin: 5px 0;
border-radius: 10px;
cursor:pointer;
}
#levelSwitchers span.active, #levelSwitchers span:hover {
background: #482b51;
}
</style>
<script>
$(document).ready(function () {
loadWithEncoding('#map_path1', "https://forumstatic.ru/files/001c/38/50/40216.html");
loadWithEncoding('#map_path2', "https://forumstatic.ru/files/001c/38/50/31547.html");
loadWithEncoding('#map_path3', "https://forumstatic.ru/files/001c/38/50/33511.html");
$('#map_container').on('mouseenter', 'path', function (event) {
var areaName = $(this).attr('data-name');
$('#tooltip').text(areaName).show();
}).on('mousemove', 'path', function (event) {
$('#tooltip').css({
top: event.pageY + 15,
left: event.pageX + 15
});
}).on('mouseleave', 'path', function () {
$('#tooltip').hide();
}).on('click', 'path', function () {
var url = $(this).attr('data-url');
if (url) {
window.top.location.href = url;
}
});
$(`#levelSwitchers span`).click(function () {
let currLevel = $(this).data(`level`);
$(`g.level`).hide();
$(`#levelSwitchers span`).removeClass(`active`);
$(this).addClass(`active`);
$(`g#map_path` + currLevel).show();
})
});
function loadWithEncoding(selector, url) {
return fetch(url)
.then(response => response.arrayBuffer())
.then(buffer => {
// Конвертируем из Windows-1251 в UTF-8
const decoder = new TextDecoder('windows-1251');
const html = decoder.decode(buffer);
$(selector).html(html);
})
.catch(error => console.log("Ошибка загрузки:", error));
}
</script>
[/html]
