Вот так попробовал тоже не работает
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
margin: 0 auto;
}
.kvadrat{
}
</style>
</head>
<body>
<div class="box">
<img src="https://rakipov.ru/files/sample2.jpg" usemap="#61160930693a6" alt="">
</div>
<map name="61160930693a6">
<area shape="poly" href="https://yandex.ru/" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank" class="kvadrat">
<area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407" class="mapster" >
<area shape="poly" href="/#2" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407">
<area shape="poly" href="/#3" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209">
<area shape="poly" href="/#4" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209">
<area shape="poly" href="/#5" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207">
<area shape="poly" href="/#6" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7">
<area shape="poly" href="/#7" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7">
<area shape="poly" href="/#8" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7">
</map>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>
<script>
$("img[#61160930693a6]").mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75
});
</script>
</body>
</html>