Приветствую!
Нужно реализовать кликабельную карту изображения, наткнулся на урок в интернете, но при уменьшении окна браузера области сбиваются. Помогите пожалуйста.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Интерактивная карта</title>
<meta name="description" content="">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="map">
<svg viewBox="0 0 1140 800">
<a href="#">
<path class="part" d="m 457.22244,98.885648 c 32.52252,66.957192 38.73863,153.400622 28.16442,252.281322 l 137.22665,-5.39319 c 5.33727,-80.01803 6.81847,-159.82184 -44.34398,-236.701 z" fill="#bf2523" description-data="<img src='media/2.jpg'> Реберная часть (толстый край) — первосортное мясо, в цельном виде состоит из 13 ребер">
</a>
<a href="#">
<path class="part" d="m 578.26953,109.07278 c 44.33189,69.33986 54.25203,149.81293 44.34398,236.701 l 152.80698,-0.59924 C 772.7733,261.24635 769.87608,177.39629 717.29391,109.07278 Z" fill="#bf2523" description-data="<img src='media/1.jpg'> Филей (поясничная часть, тонкий край). Этот отруб содержит нежное и очень постное мясо.">
</a>
</svg>
<div class="description">
</div>
<img src="media/cow.jpg" alt="">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
body {margin: 0; padding: 0;}
.map {
position: relative;
text-align: center;
}
svg {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.part {
opacity: .3;
}
.part:hover {
transition: opacity .2s ease;
opacity: .5;
cursor: pointer;
}
.description {
display: none;
position: absolute;
padding: 20px;
box-sizing: border-box;
width: 300px;
height: 400px;
box-shadow: 0 0 32px 10px #ccc;
left: 50px;
bottom: calc(50% - 200px);
font-family: sans-serif;
}
.description img {
width: 250px;
margin-bottom: 20px;
}
$('.part').hover (
function() {
$('.description').html($(this).attr('description-data'));
$('.description').fadeIn();
},
function() {
$('.description').fadeOut(50);
}
)
