Я делаю домашнюю страницу с фоновым изображением (в div) и несколькими кликабельными областями на этом изображении, которые переходят на другие страницы сайта. Эти разделы являются якорями, которые изменяют изображение их области при наведении курсора мыши. Все изображения в формате .svg и якоря находятся в абсолютном положении. Это моя проблема: когда я уменьшаю окно, фоновое изображение адаптируется к окну, но якоря нет и остаются на своих местах, но я бы хотел, чтобы они также адаптировались к окну. Я попытался с max-width и min-width, но я не решил проблему, вероятно, потому что они находятся в абсолютном положении. Есть ли способ получить изменение размера и адаптацию якорей к изображению в фоновом режиме? Я использую HTML и CSS, но я не знаю Javascript. Это мой код:
<html>
<head>
<style>
a:hover {
background-image: url('../immaginisito/living_Tavola disegno 1.svg'); background-size:cover;
}
a:active {
background-image: url('../immaginisito/living_Tavola disegno 1.svg'); background-size:cover;
}
.background {
overflow:visible;
}
</style>
</head>
<body>
<div class='background' style="position:relative; height:600px; background-repeat: no-repeat; background-image:url('../immaginisito/Loft_Vierre_Tavola disegno 1.svg'); background-size:cover;">
<a id="a" onclick="changeOpacity('a')" style="position:absolute; top:114px; left:4px; width:74px; height:40px;" title="#f" alt="#f" href="#f" target="_self"></a>
<a id="b" onclick="changeOpacity('b')" style="position:absolute; top:85px; left:163px; width:114px; height:48px;" title="aa" alt="aa" href="#a" target="_self"></a>
<a id="c" onclick="changeOpacity('c')" style="position:absolute; top:180px; left:60px; width:88px; height:30px;" title="#b" alt="#b" href="#b" target="_self"></a>
<a id="d" onclick="changeOpacity('d')" style="position:absolute; top:132px; left:313px; width:118px; height:65px;" title="#c" alt="#c" href="#c" target="_self"></a>
<a id="e" onclick="changeOpacity('e')" style="position:absolute; top:208px; left:762px; width:133px; height:300px;" title="#e" alt="#e" href="#e" target="_self"></a>
</div>
</body>
<style type="text/css"></style>
</html>
<script>
function changeOpacity(id) {
document.getElementById(id).style.backgroundImage = "url('../immaginisito/living_Tavola disegno 1.svg')";
}
</script>