Bild anzeigen mit Innerhtml

[molily]

Aber ich schaffe es nicht, mit demselben click ein Bild im selben div erscheinen zu lassen. Wie müsste der code dafür aussehen?

Wenn du solche Sachen machst, solltest du HTML-Code nicht dynamisch mit JavaScript einfügen bzw. zumindest nicht in einem JavaScript-String in einem HTML-Event-Handler-Attribut unterbringen. Das führt dich nur zu Maskierungsorgien, an denen du gescheitert bist. (Nicht böse gemeint. Vor dir sind tausende daran gescheitert und nach dir werden auch noch viele daran scheitern. Das liegt in der Sache.)

Man muss es sich nicht so kompliziert machen - gut, wenn man es sauberer umsetzen will, muss man dafür ein bisschen ausholen. Das lohnt sich aber langfristig, weil man einen besseren Arbeitsstil lernt.

Wieso bringst du die Inhalte nicht einfach im HTML unter und blendest sie beim Klick ein? Dadurch sind sie auf jeden Fall zugänglich und du kannst dir Maskierungen sparen.

Eine sinnvollere Lösung könnte konzeptionell so aussehen:

<script type="text/javascript">  
[code lang=javascript]// Klasse vergeben, die angibt, dass JavaScript aktiv ist  
document.documentElement.className = "js";  
  
// Initialisiere Event-Handling, wenn das Dokument geladen ist  
window.onload = function () {  
   // Beim Klick auf den Zeige-Link ...  
   document.getElementById('zeigeBild').onclick = function () {  
      // ... spreche das Inhalts-Element an und lösche die Klasse  
      document.getElementById(this.id.substring(1)).className = "";  
   };  
};

</script>
<style type="text/css">

/* Barrierefreies Verstecken mit der Klasse hide - aber nur wenn JavaScript aktiviert ist */  
.js .hide {  
   position: absolute;  
   left: -9000px;  
   width: 0;  
   overflow: hidden;  
}

</style>

<a href="#inhalt" id="zeigeBild">Zeige Inhalt XYZ</a>

<p id="inhalt" class="hide">
   <a href="..."><img src="..." alt="Dein Bild"></a>
</p>[/code]

Das kann man jetzt natürlich noch verallgemeinern und flexibler umsetzen, weil du vermutlich mehrere Inhalte hast, die sich mit JS einblenden lassen sollen. JavaScript-Bibliotheken helfen bei solchen Standardaufgaben.

Mathias