SwitchContent Script

[Henryk]

Schönen guten Morgen :)

Leider fehlt mir die Konzentration und Zeit mich selbst einzulesen - daher hoffe ich das mir jemand von euch helfen könnte.

Ich suche ein simples gestricktes Javascript für folgende Problembehebung :

Ich habe eine Menge Links welche Bilder als dynamischen Content in einem TD-Element aufrufen sollen. Das folgenden Codebausteine sehen wie folgt aus :

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

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

---

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 ?

Sofern weitere Angaben fehlen - bitte fragen ...

mit freundlichen Grüßen

Henryk

[frankx]

Hellihello Henryk,

der Ansatz ist wie folgt:

showpic = function (bild_url) {
 my_cell=document.getElementById("pic");
 my_cell.innerHTML='<img src="'+bild_url+'">';
 return false; //damit der Browser nichts weiter mit dem Link macht;
}

vermutlich muss es auch heißen ... showpic('pics/bild1.gif') in den links.

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

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

Gruß,

frankx

[Henryk]

return false; //damit der Browser nichts weiter mit dem Link macht;

ich danke dir funktioniert wunderbar ...

nur sobald ich return false im Javascript drinlasse springt er immer auf eine seperate Seite und gibt mir false aus mit dem Javascriptcode als URL

sofern ich das "return false" auskommentiere funktioniert es allerdings fehlerfrei .__.

[Siechfred]

Ich habe eine Menge Links welche Bilder als dynamischen Content in einem TD-Element aufrufen sollen.

Also quasi nur einblenden? Oder sollen zuvor eingeblendete Bilder ausgetauscht werden?

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

So wird das nichts. Die Funktion "showpic" (Name ist egal) erwartet einen String als Parameter, den musst du schon in Hochkommata setzen:

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

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

Besser wäre, gleich ein IMG-Element zu verwenden, das könntest du ganz einfach mit Hilfe des images-Objekt manipulieren. Zur Identifizierung kannst du dem Bild einen Namen geben:

<td valign="top" align="center" id="pic">  
  <img name="showcase" src="start.png" alt="Dynamisches Bild">  
</td>

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 ?

Die Manipulation mittels images-Objekt sollte eigentlich kein Problem sein, versuche dich mal daran und frage bei Problemen einfach nochmal nach.

Siechfred

[Tim Tepaße]

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