Hey,
ich habe ein Bild (Totenkopf) wo ich über eine Map Area 4 Bereiche markiert habe. Nun möchte ich, dass wenn ich mit der Maus über einen der Bereiche geh sich dieser farbig einfärbt. Ich habe versucht dies über 4 verschiedene Bilder zu lösen, die dann jeweils eingeblenden / ersetzt werden. Es funktioniert aber nur, wenn ich auf den Bereich klicke, nicht wenn ich nur drüber hover. Wie kann ich das lösen, bzw wo ist mein Fehler im Code???
JAVASCRIPT
Hoffe Ihr könnt mir helfen.
ich habe ein Bild (Totenkopf) wo ich über eine Map Area 4 Bereiche markiert habe. Nun möchte ich, dass wenn ich mit der Maus über einen der Bereiche geh sich dieser farbig einfärbt. Ich habe versucht dies über 4 verschiedene Bilder zu lösen, die dann jeweils eingeblenden / ersetzt werden. Es funktioniert aber nur, wenn ich auf den Bereich klicke, nicht wenn ich nur drüber hover. Wie kann ich das lösen, bzw wo ist mein Fehler im Code???
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="ImageMap.js"></script>
</head>
<body>
<p>
<img src="Strohhut.jpg" width="236" height="213" usemap="#Boshi">
<map name="Boshi" id="Boshi">
<area shape="rect" coords="171,2,236,65" href="Strohhut_rot.png" alt="Strohhut.jpg"/>
<area shape="rect" coords="2,1,61,61" href="Strohhut_gruen.png" />
<area shape="rect" img="Strohhut_blau.png" coords="16,137,92,206" href="" />
<area shape="rect" img="Strohhut_lila.png" coords="146,136,216,206" href="" />
</map>
</p>
</body>
</html>JAVASCRIPT
Code:
window.addEventListener ('load', function () {
var map = document.querySelectorAll('#Mapi area');
for (var i=0; i<map.length; i++) {
if (map.addEventListener) {
map.addEventListener('touchstart', swap, false);
map.addEventListener('mouseover', swap, false);
}
}
function swap(ev) {
var lan = this.getAttribute('alt');
document.getElementById("Ohne_Farbe").setAttribute('src','bilder/' + lan);
return false;
}
});Hoffe Ihr könnt mir helfen.
