Isam: childNode [ ].childNode [ ] ????

hej,

hab mal wieder ein kleines JS-Problem:

Also kurz: ich möchte, dass 3 Grafiken beim drüberfahren mit der Maus in den Vordergrund treten (kann man bestimmt auch einfacher machen, aber ich würde es gerne mit JS und dem Node-Objekt machen um das mal zu rallen).

Dies meine Funktion

function img_hover (x)
{
 var i;

for (i = 0; i <= 2; i++)
  document.getElementById("below").childNodes [i].childNodes [0].setAttribute("style", "z-Index:" +i + 1);

document.getElementById("below").childNodes [x].childNodes [0].setAttribute("style", "z-Index:4");
}

und das mein Quelltext:

<div id="below">
 <a href="http://blabla.de"><img class="pa" style="top:30px; left:100px; z-index:1;" src="main/bla1.png" alt="" onmouseover="img_hover(0)" /></a>
 <a href="http://blabla.de"><img class="pa" style="top:15px; left:35px; z-index:2;" src="main/bla2.png" alt="" onmouseover="img_hover(1)" /></a>
 <a href="http://blabla.de"><img class="pa" style="top:5px; left:85px; z-index:3;" src="main/bla3.png" alt="" onmouseover="img_hover(2)" /></a>
</div>

das der Fehler:
'document.getElementById (...).childNodes [...].childNode.0' ist 0 oder kein Objekt

Wer kann mir mal nen tip geben wo der Fehler is, kann ich einen Unterknoten überhaupt mit einem doppelten childNode ansprechen?
Was is eigentlich mit dem Objekt style.zIndex kann ich das per Node auch ansprechen?

Danke i.

  1. Hallo!

    das der Fehler:
    'document.getElementById (...).childNodes [...].childNode.0' ist 0 oder kein Objekt

    Das Problem ist, das die Zeilumbrüche auch Knoten sind, und zwar Textknoten (#text). Lass Dir mal mit "alert(document.getElementById("below").childNodes.length);" die Anzahl der Kindknoten ausgeben. Das sind 6 Stück ingesamt. Schön anschauen kann man sich das im DOM-Inspektor im Mozilla.

    div['below']
      |- #text
      |- a
      |- #text
      |- a
      |- #text
      |- a

    Verwende am besten getElementByTagName(), um Dich durch den Baum zu "hangeln".

    Mal als Beispiel:

    document.getElementById("below").getElementsByTagName('img')[0].getAttribute('src')

    So bekommst Du den Wert des src-Attributes vom ersten Bild, innerhalb des DIV-Elementes mit der ID "below".

    MfG, André Laugks

    --
    L-Andre @ gmx.de
    1. hej Andre,

      document.getElementById("below").getElementsByTagName('img')[0].getAttribute('src')

      Das wars! Das ich da aber auch selber nich draufgekommen bin :-/
      Ich bedanke mich

      grüße i.

      1. FsmE,

        hej Andre,

        document.getElementById("below").getElementsByTagName('img')[0].getAttribute('src')

        Das wars! Das ich da aber auch selber nich draufgekommen bin :-/
        Ich bedanke mich

        grüße i.

        Zurück zu Deiner Eingangsfrage:

        "Element.childNodes[n].childNodes[m]" geht aber prinzipiell auch.

        Der IE frickelt selbsttätig die überflüssigen "#text"-Knoten raus, für Mozilla, Netscape und andere mußt Du nur vorher eine Prozedur zum Code-Säubern einbauen. Diese Methode empfiehlt sich, wenn Du keine klaren tagName-Vorgaben hast.

        In sensibus mistis,
        HaThoV

        --
        Besuchen Sie http://www.4html.de, wenn Sie an einer
        Neuen Generation von Web-Publishing mitarbeiten wollen.
        1. Hallo!

          Der IE frickelt selbsttätig die überflüssigen "#text"-Knoten raus, für Mozilla, Netscape und andere mußt Du nur vorher eine Prozedur zum Code-Säubern einbauen. Diese Methode empfiehlt sich, wenn Du keine klaren tagName-Vorgaben hast.

          Das mit den text-Knoten ist ja vom W3C "vorgeschrieben". Die Stelle finde ich jetzt nicht.

          Was das soll, verstehe ich nicht...

          MfG, André Laugks

          --
          L-Andre @ gmx.de
          1. FsmE,

            Das mit den text-Knoten ist ja vom W3C "vorgeschrieben". Die Stelle finde ich jetzt nicht.

            Was das soll, verstehe ich nicht...

            Es liegt einfach an der maschinenlesbaren Sicht einerseits und an der menschentauglichen andererseits. Aus maschinentechnischer Sicht sind CRs und Blanks einfach überflüssig, und deswegen gehören die da nicht hin. Zur Verdeutlichung ein "idealer" HTML-Content:

            <html><head><title>kukuruz</title></head><body><p>Hier steht jetzt was...</p></body></html>

            Ab einer gewissen Größenordnung kann allerdings kein Mensch das interpretieren, ohne wahnsinnig zu werden. HTML ist aber in erster Linie als maschinenles- und schreibbares Format gedacht. Die oben aufgeführte Form ist "ideal" in dem Sinne, als sie die kleinstmögliche Datenmenge enthält. Puristen legen Wert auf sowas.

            MfG, André Laugks

            In sensibus mistis,
            HaThoV

            --
            Besuchen Sie http://www.4html.de, wenn Sie an einer
            Neuen Generation von Web-Publishing mitarbeiten wollen.