Image dynamisch mit Javascript in <a> Tag einfügen

[Der Martin]

Hallo,

switchanchor.setAttribute('src', slidestopimage);
das ist der grund dafür, das du das src-Attribut in dem a-Element hast, du gibst nämlich dem anchor und nicht dem img das Attribut!

richtig, davon abgesehen fehlt noch das alt-Attribut für das Bild. Und anstatt setAttribute() zu bemühen, ist es meist günstiger, direkt auf die Objekteigenschaften zuzugreifen:

switchanchor.src = slidestopimage;

Das kapiert dann nämlich auch der IE zuverlässig, der mit der anderen Methode gelegentlich seine Probleme hat.

Grundsätzlich frage ich mich aber: Warum so umständlich? Warum ein Element mit viel Aufwand aus dem DOM löschen, um dann ein gleichartiges wieder einzubauen? Ich würde stattdessen dem Bild, das ich austauschen möchte, im Quellcode eine ID geben, das Bild im Javascript über diese ID auswählen und einfach seine src-Eigenschaft ändern.

HTML:

<img id="startstop" src="bild.jpg" alt="Slideshow starten/stoppen" onclick="toggle();">

JS:

function toggle()
 { // hier zunächst feststellen, ob starten oder stoppen
   // ...
   document.getElementById("startstop").src = neuerWert;
 }

Bei der Gelegenheit habe ich auch gleich den Link entsorgt. Er ist hier nicht sinnvoll, da er keine Ressource verlinkt. Ein einfacher onclick-Handler auf dem Bild ist da eher angebracht.

So long,
 Martin