<!DOCTYPE html>
<html>
<head>
<title>Zemljevid Pomurja</title>
<style>
/* Spremeni barvo občine */
.obcina {
fill: #ccc;
stroke: #000;
stroke-width: 1;
}
.obcina.active {
fill: #f00; /* Spremeni barvo izbrane občine */
}
</style>
<script>
function toggleObcina(obcina) {
obcina.classList.toggle('active');
}
</script>
</head>
<body>
<div>
<img src="https://i.ibb.co/Tq9XMZc/Slika.png" usemap="#obcineMap" />
<map name="obcineMap">
<!-- Občina 1 -->
<area shape="poly" coords="10,10,100,10,100,100,10,100" onclick="toggleObcina(this)" />
<!-- Občina 2 -->
<area shape="poly" coords="110,10,200,10,200,100,110,100" onclick="toggleObcina(this)" />
<!-- Dodaj ostale občine -->
<!-- ... -->
<!-- ... -->
</map>
</div>
</body>
</html>
