Zugriff auf Image eines bestimmten Nodes im DOM

[Elena]

Hallo liebe Gemeinde,

also ich habe folgendes Problem: Ich möchte beim Anklicken eines Bildes zwei JS-Funktionen aufrufen. Die eine klappt eine Zeile einer Tabelle auf, die andere tauscht das verlinkte Bild aus. Bei zugeklappter Zeile ist also ein anderes Bild sichtbar, als bei aufgeklappter Zeile. Das klappt auch soweit.

Nun ist das Problem aber, dass ich diesen Algorithmus an seeeeeeeehr vielen Stellen aufrufen muss und den JS-Funktion daher die Referenzen auf die jeweiligen Elemente, die das ganze betrifft, mitgeben will.

Im Moment sieht das ganze so aus:

<a href="#" onFocus="this.blur()" OnClick="expandRow(document.getElementById('myTablerow')); changeImage(document.getElementById('myImage'), 1); return false;">  
   <img id="myImage" border="0" src="../bilder/Icon_Aufklappen.gif" height="30 px" align="top">  
</a>

Das funktioniert auch. Ich würde aber gerne ohne Ids in den Images und Rows arbeiten, damit ich den Code an den 1000 Bearbeitungs-Stellen ohne Modifizierung übernehmen kann. Ich würde also gerne innerhalb des Aufrufes von changeImage() auf das <img../>-Element zugreifen, ohne dass dieses eine eindeutige ID hat. Genauso bei der Tabellenzeile. Ich habs schon mit this.childNodes[0] anstatt document.getElementById('myImage') probiert. Denn this ist doch eigentlich das <a>-Element und ChildNodes[0] dann das <img>?!? Aber das klappt nicht.

Kann mir jemand sagen wieso und wie ich es besser machen kann?

Vielen Dank!
Elena

[bleicher]

Grüße,
ruf es mit "this" statt mit id auf ;) das gibt direkt den element als argument an die funktion
versuch gar den onCLick dem body zuzuweiesen und selection am eventObject zu machen :)
MFG
bleicher

[Elena]

Grüße,
ruf es mit "this" statt mit id auf ;) das gibt direkt den element als argument an die funktion
versuch gar den onCLick dem body zuzuweiesen und selection am eventObject zu machen :)
MFG
bleicher

Hallo bleicher,

du bist ja fix :) Aber leider verstehe ich nicht ganz was du meinst. Also mit this hab ichs ja probiert (s. o.) aber wohl irgendwie falsch. Könntest du mir ein Codebeispiel schicken, wie du das meinst?

Schönen Dank schon mal,
Elena

[bleicher]

Grüße,
kurzbeispiel:

onclick="bums(this)"

function bums(object){
object.style.display="none";
}
MFG
bleicher

[Elena]

Grüße,
kurzbeispiel:

onclick="bums(this)"

function bums(object){
object.style.display="none";
}
MFG
bleicher

Hallo bleicher,

vielen Dank für deine Hilfe!

Also was du schreibst, habe ich schon verstanden und so auch im Code. Es behandelt aber nicht mein eigentliches Problem. Das Problem, das ich habe ist, dass ich nicht weiß, wie ich auf das "Image als Childelement" und auf die "Tabellenzeile als Parentelement" innerhalb der jeweiligen Methode zugreifen kann.

Aufbau:

<table>  
   <tr></tr>  
   <tr></tr>  
   <tr>/* DIESES tr ELEMENT BRAUCHE ICH!!! */</tr>  
   <tr>  
      <td>  
         <img..>  
         <a href="#" onFocus="this.blur()" onClick="expandRow(this); changeImage(this, 1); return false;">  
            <img id="loesung" border="0" src="../bilder/Icon_Aufklappen.gif" height="30 px" align="top">  
               /* DIESES img ELEMENT BRAUCHE ICH AUCH!!! */  
            </img>  
         </a>  
      </td>  
  </tr>  
</table>

Wie kann ich nun innerhalb von expandRow() und changeImage() auf die jeweiligen Elemente zugreifen? Folgendes funktioniert nicht:

function changeImage(object, nr) {  
   object.src = myImages[nr].src;  
}  
  
function expandRow(object) {  
   object.parent.parent.parent.childNodes[2].style.visibility = 'visible';  
}  

Was mach ich nur falsch..? Bin wirklich dankbar für Hilfe. Hab nun schon ewig im Netz rumgesucht, aber ich komme einfach nicht auf den Kniff.

Vielen Dank,
die [hoffnungsvolle] Elena

[bleicher]

Grüße,

schau dir auch das an:

http://de.selfhtml.org/javascript/objekte/index.htm
http://de.selfhtml.org/javascript/objekte/node.htm

und um Gottes Wille - hol dir Opera, es hat sehr gute Development tools, damit kannst du ein jedes Objekt untersuchen und seine verfügbaren Eigenschaften und Knoten "Live" sehen

function changeImage(object, nr) {

object.src = myImages[nr].src;
}

dein "object" ist das <a> element der die funktion aufruft - wenn dann

[code lang=javascript]
object.firstChild.src=myImages[nr].src;

  

> function expandRow(object) {  
>    object.parent.parent.parent.childNodes[2].style.visibility = 'visible';  
> }  
> [/code]  
  
eigenschaft "parent" bei einem a wäre mir ehrlich gesagt neu^^  
  
object.parentNode :)  
  
und  
  
!!!!!!!!!!!!!!!!!!!!!!!!!ACHTUNG!!!!!!!!!!!!!!!!!!!!!!!!!!!  
ich bin damit 100 mal auf die Fresse gefallen - ein Zeilenumbruch ist auch ein DOM-Knoten, bei dem o.g. "firstChild" kann es passieren dass du damit den Zeilenumbruch (textnode mit whitespace drin) abgreifst  
  
uU kommst du nicht drum herum durch childNodes() mit einer schleife zu gehen und den <http://de.selfhtml.org/javascript/objekte/node.htm#node_type@title=nodeType()> zu überprüfen  
MFG  
bleicher

-- 
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_-  
![](http://img296.imageshack.us/img296/9641/minibannerso7.jpg)  
  
[FirefoxMyth](http://www.firefoxmyths.com)