Hallo wir müssen in unserem Informatikkurs eine Website erstellen.
Wir wollten eine Imagemap gestallten bei der manche Bereiche in anderen Farben angezeigt werden.
leider laufen wir da in einige Problem.
Es gab keine Problem bei dem erstellen der areas.
jedoch kommt da dann der Haken wir kriegen es nicht auf die Reihe das bestimmte Teile der Map (in diesem Fall ein menschlicher Körper) in anderen Farben gezeigt wird.
Hier ein Auszug aus dem HTML Code:
<div style="width:1540px; height:600px; margin:0px auto;">
<img src="Muskeln.png" alt="Muskeln" usemap="#workmap">
<map name="workmap">
<!Vorderseite!>
<! Brust !>
<area shape="poly" coords="560,150,571,115,649,115,662,150,663,171,636,175,610,166,584,175,558,171" alt="Brust.png" href="Brust.html">
und hier der Javascript für die Farben
window.addEventListener ('load', function () {
var map = document.querySelectorAll('#workmap 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 mus = this.getAttribute('alt');
document.getElementById('Muskeln').setAttribute('src','Muskeln' + mus);
return false;
}
});
Ja war relativ dreistes copy and paste muss ich zugeben.
Aber zurück zum Thema leider kann ich den Fehler nicht ausmachen.
Fehlen hier irgendwelche Attribute? oder ist etwas komplett falsch geschrieben?
Würde mich über eine Rückmeldung freuen bei weiteren Fragen einfach melden, ich habe bereits ein weiteres Bild für die Brust.png erstellt.
LG
Wir wollten eine Imagemap gestallten bei der manche Bereiche in anderen Farben angezeigt werden.
leider laufen wir da in einige Problem.
Es gab keine Problem bei dem erstellen der areas.
jedoch kommt da dann der Haken wir kriegen es nicht auf die Reihe das bestimmte Teile der Map (in diesem Fall ein menschlicher Körper) in anderen Farben gezeigt wird.
Hier ein Auszug aus dem HTML Code:
<div style="width:1540px; height:600px; margin:0px auto;">
<img src="Muskeln.png" alt="Muskeln" usemap="#workmap">
<map name="workmap">
<!Vorderseite!>
<! Brust !>
<area shape="poly" coords="560,150,571,115,649,115,662,150,663,171,636,175,610,166,584,175,558,171" alt="Brust.png" href="Brust.html">
und hier der Javascript für die Farben
window.addEventListener ('load', function () {
var map = document.querySelectorAll('#workmap 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 mus = this.getAttribute('alt');
document.getElementById('Muskeln').setAttribute('src','Muskeln' + mus);
return false;
}
});
Ja war relativ dreistes copy and paste muss ich zugeben.
Aber zurück zum Thema leider kann ich den Fehler nicht ausmachen.
Fehlen hier irgendwelche Attribute? oder ist etwas komplett falsch geschrieben?
Würde mich über eine Rückmeldung freuen bei weiteren Fragen einfach melden, ich habe bereits ein weiteres Bild für die Brust.png erstellt.
LG