Ein- und ausblenden von Divs bei klick

[1g0r]

Hey,

ich suche jetzt schon seit einer Weile nach einer Möglichkeit, nach einem Klick aufs Bild, das Bild auszublenden/verschwinden lassen und Text einzublenden.

Also:
Klick auf Bild = Bild weg, Text da (nicht an gleicher Stelle)

Hat da jemand eine Idee?

Ich bin noch reativ neu in diesem Bereich und bitte um keine total abgefahrenen bzw zusammenhangslose HTML/Java-Fragmente.

Vielen Dank ;D

[Matthias Apsel]

Om nah hoo pez nyeetz, 1g0r!

Klick auf Bild = Bild weg, Text da (nicht an gleicher Stelle)

* Was soll beim nächsten Klick geschehen?
* Welche Browser müssen/sollen unterstützt werden?
eventuell ist :target eine Möglichkeit (wiki). Du könntest dann z.B. die display-Eigenschaft auf den gewünschten Wert setzen.

Matthias

[1g0r]

beim nächsten klick soll der zustand bleiben. bild weg, text da...

die variante mit :target habe ich schon probiert...bin irgendwie auch nicht glücklich damit geworden. habe es vielleicht auch falsch gemacht.
vielleicht hast du noch einen link für mich?

oder eine andere idee?

[Matthias Apsel]

Om nah hoo pez nyeetz, 1g0r!

beim nächsten klick soll der zustand bleiben. bild weg, text da...

die variante mit :target habe ich schon probiert...bin irgendwie auch nicht glücklich damit geworden. habe es vielleicht auch falsch gemacht.
vielleicht hast du noch einen link für mich?

Was dann natürlich nicht funktioniert. Da müsste man dann etwas mit JavaScript anfangen. Wie sind denn da deine Kenntnisse?

Skizze:

• das Bild bekommt einen onclick-Handler
• bei Klick änderst du die Klassenzugehörigkeit von Bild und Text

Matthias

[1g0r]

Oh, da sind meine Kenntnisse sehr begrenzt...

Via "copy-and-paste! hab ich da auch schon etwas geschafft.

Immerhin kann ich jetzt via Klick aufs Bild den Text ein und ausblenden.
Aber das Bild soll dann ja verschwinden!

[Steel]

Moin!

Immerhin kann ich jetzt via Klick aufs Bild den Text ein und ausblenden.
Aber das Bild soll dann ja verschwinden!

Dann haett ich die Frage, wie Du das mit dem Ein- und Ausblenden des Textes machst. Das muesste dann doch genauso mit dem Bild funktionieren.

[1g0r]

<script>function click( id ) {  
  	var e = document.getElementById( id );  
  	if( e.style.display == 'none' ) {  
    e.style.display = '';  
 	}  
 	else {  
    e.style.display = 'none';  
 	}  
	}  
    </script>  
  
<a href="javascript:click('pic');"><img src="img/clickforcontent.png" alt="klick" id="klick_button" title="klick" /></a>  
  
<div id="pic">text tralala </div>

das wars glaub ich. damit klicke ich auf bild und der text erscheint...aber wenn ich wieder auf das bild klicke geht der text wieder weg. Der text soll ja erst "weg" sein und dann via klick aufs bild erscheinen und da bleiben.

[Matthias Apsel]

Om nah hoo pez nyeetz, 1g0r!

das wars glaub ich. damit klicke ich auf bild und der text erscheint...aber wenn ich wieder auf das bild klicke geht der text wieder weg. Der text soll ja erst "weg" sein und dann via klick aufs bild erscheinen und da bleiben.

Ich übersetz' mal ein bisschen

<script>function click( id ) {

var e = document.getElementById( id );

Such dir das Element, mit der gewünschten Id

if( e.style.display == 'none' ) {

wenn der per inline-style gesetzte (also im HTML [code lang=html]<img src="..." alt="..." style="display: none;">

  

>     e.style.display = '';  
>  	}  

mache was ungültiges draus, nämlich `display: '';`{:.language-css} mit dem Ergebnis, dass der Standardwert ("inline" in dem Fall) angewendet wird, das Bild also dargestellt wird.  
  

>  	else {  
  
Anderenfalls (also) sichtbar  

>     e.style.display = 'none';  
>  	}  
  
mache unsichtbar  

> 	}  
>     </script>  
>   

Jetzt sollte es dir möglich sein, zumindest das Wiederunsichtbar machen zu unterbinden.  
  
Über das Sichtbarmachen des anderen Elementes muss man sich danach unterhalten. Wichtig wäre hier dann auch die gewünschte HTML-Struktur. (Online-Beispiel)  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

• bei Klick änderst du die Klassenzugehörigkeit von Bild und Text

Warum denn das? Es genügt die Klassenzugehörigkeit (oder ein anderes Attribut) eines gemeinsamen Vorfahrernelements zu ändern.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

• bei Klick änderst du die Klassenzugehörigkeit von Bild und Text

Warum denn das? Es genügt die Klassenzugehörigkeit (oder ein anderes Attribut) eines gemeinsamen Vorfahrernelements zu ändern.

richtig, so es denn keine unerwünschten Nebenwirkungen gibt (z.B. mehrere Bilder)

Matthias