Tim Tepaße: SwitchContent Script

Beitrag lesen

Hallo,

wer kann mir dazu ein kleines Javascript schreiben das mein TD mit dem passenden Bild neu füllt oder mir eine gute & leicht verständliche Referenz geben

Eigentlich ist showpic() recht leicht zu implementieren; es muss nur ein paar Dinge machen:

Erstens: Aus dem übergebenen String etwas machen, dass als HTML-Quellcode geparst werden kann → einfache Stringverkettung.
Zweites: Die Tabellenzelle im Dokument finden → document.getElementById().
Drittens: Den HTML-Inhalt dieser Tabellenzelle gegen das neue Bild austauschen → element.innerHTML()

(Statt innerHTML gingen auch DOM-Methoden wie document.createElement() und Verwandte – sind aber erheblich komplizierter.

<a href="javascript:showpic(pics/bild1.gif)">Bild1</a>

Die solltest Du noch mal überarbeiten. javascript-URIs sind eigentlich nicht sehr schön, präferiert werden Event-Handler wie onclick. Zudem hast Du da einen Fehler drinnen: showpic wird kein String (Erkennbar an den „Anführungszeichen“) übergeben, sondern etwas, das eigentlich nicht richtiges Javascript ist. Du kannst damit nur scheitern. Die Bild-URL solltest Du daher zum String machen, indem Du sie in Anführungsstriche setzt. Da  sich der JS-Code schon in doppelten Anführungsstrichen (Zollzeichen) befindet, empfehlen sich einfache (der Apostroph). So also:

<a href="pics/bild1.gif" onclick="showpic(this.href)">

Dies deswegen, so dass Benutzer, die aus was für Gründen auch immer kein Javascript benutzen dürfen, trotzdem das Bild sehen können. Ohne über das Nichtausführen von javascript-URIs oder leeren href-Attributen stolpern zu müssen. Das ist einfachste Fehlertoleranz.

<td valign="top" align="center" id="pic"></td>

Nebenbei: Langfristig lebt man entspannter, wenn man HTML-Struktur und Darstellung trennt, also Darstellungsinformationen wie die Attribute valign und align in CSS verlagert. Für Deinen Fall empfiehlt sich wohl auch noch ein display:block; für das in der Tabellenzelle enthaltene Bild.

Tim