✔ onmouseover mittels DOM

V

visiondpc

Erfahrenes Mitglied
Hallo,
ich experimentiere grade ein wenig mit dem Document Object Model herum. Und zwar versuche ich für sämtliche Bilder innerhalb einer Webseite einen Mouseover-Effekt zu erstellen. Das Event seber ist auch keine Problem, nur der Bildaustauch funktioniert nicht. Da bekomme ich immer die Meldung das "document.getElementsByTagName("img")[i]" no properties hat.
Ich denke mal ich weiß warum, weil i zu dem Zeitpunkt wo der Mouseover ausgeführt wird 3 ist. Das leuchtet mir aber nicht ganz ein da ja nur 3 Objekte vorhanden sind.
Deswegen frage ich mich
1. Warum zählt der 4 Objekte und
2. wie kann ich genau die gewünschte Grafik ansprechen und
3. besteht die Möglichkeit die JS-Funktion auch irgendwie in den Head-Bereich einzubauen (wenn ich die so in den head setze findet das Skript die Tags nicht)?

HTML: 
<body>
<img src="1.png" id="img1" />
<img src="2.png" id="img2" />
<img src="3.png" id="img3" />
<script type="text/javascript">
//<![CDATA[
for(i=0;i<document.getElementsByTagName('img').length;i++)
{
	document.getElementsByTagName('img')[i].onmouseover = function()
	{
		document.getElementsByTagName('img')[i].attributes.src.nodeValue = '4.png';
	}
}
//]]>
</script>
</body>

Ich sag schonmal im Voraus danke.
 
Moin,

Du greifst innerhalb der onmouseover-Funktion auf i zu, diese wird jedoch ausserhalb der Schleife ausgeführt und hat keinen Bezug auf den "Schleifenzähler" i, sondern auf die globale Variable i, welche die Gesamtanzahl von Bildern zurückliefert.
Hier mal eine Beschreibung zum Inkrementieren: http://www.teialehrbuch.de/Kostenlose-Kurse/JavaScript/12694-Inkrement-und-Dekrementoperatoren.html

In der Funktion kannst du bequem per this auf das aktuelle Bild zugreifen.

Um das im <head> zu notieren, kannst du bspw. so vorgehen:

Code: 
document.onmouseover=function(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  if(o.tagName=='IMG')o.attributes.src.nodeValue = '4.png';
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück