Salve a tutti sono nuovamente qui, sto cercando di rendere diverse aree di una map di colore diverso al passaggio del mouse ma non riesco cosa sbaglio
codice:
<style>
area {
cursor: pointer;
transition: fill0.3sease; 

    }

area:hover {
fill: rgba(27, 90, 65, 0.639); 

    }

area.selected {
fill: blue;

    }
</style>
</head>


<imgclass="area"src="map.png"alt="Map"usemap="#workmap"id="map">

<mapname="workmap"><areatarget="_self"alt="ZH"title="ZH"href=""coords="360,59,358,82,366,104,360,115,365,125,388,131,422,116,426,102,417,83,409,67,396,47,380,43,376,59"shape="poly">
<areatarget="_self"alt="SH"title="SH"href=""coords="366,35,392,28,382,12,363,17"shape="poly">
<areatarget="_self"alt="TG"title="TG"href=""coords="412,37,416,51,425,71,430,87,436,78,435,67,489,65,467,42,440,33,428,40"shape="poly">
<areatarget="_self"alt="SG"title="SG"href=""coords="447,76,500,76,489,85,462,96,465,119,476,126,493,129,502,120,522,92,500,152,501,166,498,183,496,190,476,185,464,160,463,137,438,127,420,124,439,107,435,92"shape="poly">
<areatarget="_self"alt="AR"title="AR"href=""coords="478,118,469,112,467,95,483,92,514,76,513,85,502,95,491,96"shape="poly">
<areatarget="_self"alt="AI"title="AI"href=""coords="489,120,484,109,491,98,503,104,499,114"shape="poly">
</map>

<script>
document.addEventListener("DOMContentLoaded", function() {
constareas = document.querySelectorAll('map[name="workmap"] area');
areas.forEach(area=> {
area.addEventListener('click', function(event) {
event.preventDefault();
toggleAreaSelection(this);
        });
    });
});

functiontoggleAreaSelection(area) {
constselectedColor = "blue"; // Colore della selezione
constdeselectedColor = "red"; // Colore predefinito
constselected = area.classList.contains('selected');

if (!selected) {
area.classList.add('selected');
area.setAttribute('data-color', area.style.fill || area.getAttribute('data-color') || deselectedColor);
area.style.fill = selectedColor;
    } else {
area.classList.remove('selected');
area.style.fill = area.getAttribute('data-color') || deselectedColor;
    }
}
</script>