✔ Bildtauschfunktion

[visiondpc]

Hi.

Ich hab hier zwar schon etliche Beiträge zu dem Thema gefunden aber so richtig weiter hilft mir keiner.
Beim Click auf eine Grafik soll darunter ein Div erscheinen und die GRafik soll sich ändern.
Klappt auch alles bis auf den Bildaustausch. Hat da jemand eine Idee woran es liegen könnte?

<script>
<!--
infoframe = null;

function show_infoframe(id,bild) 
{
	infoframe = document.getElementById(id);
	var status = infoframe.style.display;
	if( status == 'none')
	{
		infoframe.style.display = "block";
		document.getElementById(bild).src = "images/minus.gif";
	}
	else
	{
		infoframe.style.display = "none";
		document.getElementById(bild).src = "images/plus.gif";
	}
}
//-->

<img src="images/plus.gif" id="bild_1" onclick="show_infoframe('id_1','bild_1')" style=\"cursor:pointer;\" />

Danke schonmal im Vorraus.

 

[Maik]

Hi,

wie wär's denn mit dieser Variante?

function toggle(id){

 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'images/minus.gif';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'images/plus.gif';
 }

}

<img src="images/plus.gif" id="img_layer1" onclick="toggle('layer1')" style="cursor:pointer;" />
<div id="layer1" style="display:none;">layer 1</div>

 

[visiondpc]

Danke so funktionierts. Komisch nur, daß ich jetzt immer 2x klicken muß um den die Anzeige zu öffnen Obwohl ich kein ondblclick verwendet habe.

 

[Maik]

Kann es sein, dass du die display:none-Angabe für die Layer in einem zentralen Stylesheet notiert hast?

Dann vergleiche hierzu nochmal meinen HTML-Codeschnipsel

 

[Quaese]

Hi,

da will ich mich mal kurz einmischen.

Es kann die CSS-Definition auch zentral stattfinden - entscheidend ist die Reihenfolge des Vergleichs in
der Funktion. Zunächst wird im if-Zweig geprüft, ob das die Eigenschaft block (Standardwert) gesetzt ist. Im
else-Zweig wird die Alternative (none) abgearbeitet. So funktioniert es auch beim ersten Aufruf.

function toggle(id){
  var img = 'img_' + id;

  if(document.getElementById(id).style.display == 'block'){
    document.getElementById(id).style.display = 'none';
    document.getElementById(img).src = '../bilder/plus.gif';
  }else{
    document.getElementById(id).style.display = 'block';
    document.getElementById(img).src = '../bilder/minus.gif';
  }
}

Ciao
Quaese

 

[Maik]

da will ich mich mal kurz einmischen.

Gerne, denn da hab ich gestern wohl verkehrt herum gedacht :-(

 

[visiondpc]

Also erst JavaScript und dann CSS.
Jetzt klappt das auch sofort. Super.

Danke Euch.