Bild anzeigen mit Innerhtml

[Horst]

Hallo,

ich habe eine css-Webseite und möchte nun über einen Menüclick in einem anderen div ein Bild sowie einen Text zum Bild erscheinen lassen (wenn möglich ohne Java).
Mit dem Text klappt das mit innerHTML schon gut:

<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=
'Bildtext'">Menü-Linktext</a></li>

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

[ChrisB]

Hi,

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

Wie eine vernünftige Problembeschreibung in so einem Falle - statt "ich schaffe es nicht" - aussehen sollte, kannst du hier nachlesen: </hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[Hansi]

<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=
'Bildtext'">Menü-Linktext</a></li>

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

  
<!-- Die einfachste Methode: -->  
<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=  
'<img src=\'http://www.example.com/img/img_9.jpg /><br /><br />Bildtext\''">Menü-Linktext</a></li>  

[Hansi]

Sorry, zu früh gepostet:

  
<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=  
'<img src=\'http://www.example.com/img/img_9.jpg\' width=\'100\' height=\'100\' alt=\'\' /><br /><br />Bildtext'">Menü-Linktext</a></li>  

Oder du gehts über eine Funktion, ist übersichtliger.
Kannst natürlich auch ein Bild erstellen (createElement) und ins Dokument anhängen (appendChild).

PS: Java ist nicht JavaScript, und eine onclick Befehl ist bereits JavaScript!!!

[Horst]

Super, das funktioniert einwandfrei, vielen Dank!
Ist es möglich, dem aufgerufenen Bild sowie dem Bildtext nun noch einen link hinzuzufügen (bei click auf Bild oder Bildtext soll dann eine neue Webseite geöffnet werden)?

Sorry, zu früh gepostet:

<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=
'<img src='http://www.example.com/img/img_9.jpg' width='100' height='100' alt='' /><br /><br />Bildtext'">Menü-Linktext</a></li>

>   
> Oder du gehts über eine Funktion, ist übersichtliger.  
> Kannst natürlich auch ein Bild erstellen `(createElement)`{:.language-javascript} und ins Dokument anhängen `(appendChild)`{:.language-javascript}.  
>   
> PS: Java ist nicht JavaScript, und eine `onclick`{:.language-javascript} Befehl ist bereits JavaScript!!!

[ChrisB]

Hi,

bitte zitiere vernünftig!

Super, das funktioniert einwandfrei, vielen Dank!
Ist es möglich, dem aufgerufenen Bild sowie dem Bildtext nun noch einen link hinzuzufügen (bei click auf Bild oder Bildtext soll dann eine neue Webseite geöffnet werden)?

Ja, ist es.

Wie sieht dein Versuch aus?

MfG ChrisB

[Horst]

Hi,

bitte zitiere vernünftig!

Super, das funktioniert einwandfrei, vielen Dank!
Ist es möglich, dem aufgerufenen Bild sowie dem Bildtext nun noch einen link hinzuzufügen (bei click auf Bild oder Bildtext soll dann eine neue Webseite geöffnet werden)?

Ja, ist es.

Wie sieht dein Versuch aus?

Nun, ich hätte mir vorgestellt, dass ich einfach den link z.B. vor den Bildtext schreibe, aber das geht offensichtlich nicht:

<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=
'<img src='http://www.example.com/img/img_9.jpg' width='100' height='100' alt='' /><br /><br /><a href="http://...">Bildtext</a>'">Menü-Linktext</a></li>

MfG ChrisB

[Hansi]

<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=
'<img src='http://www.example.com/img/img_9.jpg' width='100' height='100' alt='' /><br /><br /><a href="http://...">Bildtext</a>'">Menü-Linktext</a></li>

Schau doch wie es gemacht worden ist, du musst "'" anwenden, sonst beendest du den String zu früh.

[ChrisB]

Hi,

bitte zitiere vernünftig!

Was daran hast du nicht begriffen?

Nun, ich hätte mir vorgestellt, dass ich einfach den link z.B. vor den Bildtext schreibe, aber das geht offensichtlich nicht:

innerHTML= '<img ...><a href="http://...">Bildtext</a>'">Menü-Linktext</a></li>
                                                      ^^
Du hast den JavaScript-String mit ' begonnen, also beendest du ihn auch damit wieder. Was soll das '" da?
Und zu früh beenden tust du ihn hier auch, wenn >Menü-Linktext</a> noch mit zum Stringinhalt gehören soll.

MfG ChrisB

[Der Martin]

Hi,

ich habe eine css-Webseite und möchte nun über einen Menüclick in einem anderen div ein Bild sowie einen Text zum Bild erscheinen lassen (wenn möglich ohne Java).

ich nehme an, du meinst nicht Java, sondern Javascript. Das ist ungefähr so ein großer Unterschied wie Gummi und Gummibärchen.

<li><a href="#" onclick="document.getElementById('andererdiv').innerHTML=
'Bildtext'">Menü-Linktext</a></li>

Und warum benutzt du dann hier *doch* Javascript? - By the way, wenn du auf einen Klick reagieren möchtest, führt an Javascript kaum ein Weg vorbei - es sei denn, du möchtest beim Klick eine neue Version der Seite laden, auf der die gewünschten Elemente dann eingeblendet sind. Das wäre als Fallback sowieso empfehlenswert. Oder du sorgst dafür, dass Besucher ohne Javascript das entsprechende Element von Anfang an sehen, auch ohne Klick.

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

Du verwendest die Eigenschaft innerHTML. Mal von der Bezeichnung ausgehend, was könnte man da wohl als Wert notieren? Nicht nur Text, sondern ...?

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

[…]ungefähr so ein großer Unterschied wie Gummi und Gummibärchen.

*g*

By the way, wenn du auf einen Klick reagieren möchtest, führt an Javascript kaum ein Weg vorbei

Doch! Es geht mit CSS3: ':target' [CSS3-SELECTORS, Meiert]

Kannst du als IE-Nutzer aber nicht kennen. ;-)

Qapla'

[Der Martin]

Hallo Gunnar,

[…]ungefähr so ein großer Unterschied wie Gummi und Gummibärchen.
*g*

freut mich, wenn dir der Vergleich gefällt - is' aber nich' von mir.

By the way, wenn du auf einen Klick reagieren möchtest, führt an Javascript kaum ein Weg vorbei
Doch! Es geht mit CSS3: ':target' [CSS3-SELECTORS, Meiert]

Ja, mag sein. CSS3 betrachte ich aber vorläufig noch nicht als flächendeckend verwendbar und würde Lösungen aus jener Generation auch noch nicht empfehlen (abgesehen davon, dass ich da selbst noch ungebildet bin).

Kannst du als IE-Nutzer aber nicht kennen. ;-)

Das kommt erschwerend dazu, wäre aber keine Entschuldigung. Ich habe auch schon programmiert, als ich noch keinen eigenen Computer hatte. :-)
Dass ich IE-Nutzer bin, heißt ja nicht, dass ich andere nicht wahrnehme.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

freut mich, wenn dir der Vergleich gefällt - is' aber nich' von mir.

Autsch. Dann sollte ich meinen Vorschlag zurückziehen?

Ja, mag sein. CSS3 betrachte ich aber vorläufig noch nicht als flächendeckend verwendbar

AFAIS unterstützen alle aktuellen Browser bis auf IE ≤ 8 ':target'.

Für IEs kann man immer noch JavaScript anbieten. IE 8 kennt den proprietären Eventhandler 'hashchange'.

Qapla'

[Der Martin]

Hi,

freut mich, wenn dir der Vergleich gefällt - is' aber nich' von mir.
Autsch. Dann sollte ich meinen Vorschlag zurückziehen?

ehrlicherweise schon. Immerhin schmückst du mich mit fremden Federn. Kann man die Vorschläge denn ohne weiteres zurückziehen? Vermutlich nur durch administrativen Eingriff.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Immerhin schmückst du mich mit fremden Federn.

Ja, das kommt davon, wenn man zitiert, ohne die Quelle anzugeben. ;-)

Qapla'

[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