OnClick - 2 Divs ausblenden, 1 Div einblenden

waswiewo

waswiewo

Erfahrenes Mitglied
Guten Tag,

ich bastel grade an einem kleinen Schnipsel..

Ich Habe ein Div. In diesem Div liegt ein verlinktes Bild. Beim klicken auf das Bild soll das Div durch ein darüber liegendes, verstecktes Div ersetzt werden. Gleichzeitig soll ein Weiteres Div ausgeblendet werden. Ich habe im Netzt schon ein wenig gefunden und versucht ein wenig umzuschreiben, nur passiert da nichts =)

Hier der Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>lala</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript">
function ein() {
 if(document.getElementById('einklappen').style.dispay=='block') {
  document.getElementById('einklappen').style.display='none';
  document.getElementById('ausklappen').style.display='block';
  document.getElementById('ein-ausklappen').style.display='none';
 }
}

function aus() {
 if(document.getElementById('ausklappen').style.dispay=='none') {
  document.getElementById('einklappen').style.display='block';
  document.getElementById('ausklappen').style.display='none';
  document.getElementById('ein-ausklappen').style.display='block';
 }
}
</script>

</head>
<body>


<div id="header">
	<img src="Bilder/logo.png" alt="Logo" />
	<div id="sprachauswahl">
		<img src="Bilder/sprache-1.png" alt="" /><a href="#"><img src="Bilder/deutsch.png" alt="" onmouseover="this.src='Bilder/deutsch-over.png'" onmouseout="this.src='Bilder/deutsch.png'" /></a><a href="#"><img src="Bilder/englisch.png" alt="" onmouseover="this.src='Bilder/englisch-over.png'" onmouseout="this.src='Bilder/englisch.png'" /></a><img src="Bilder/sprache-2.png" alt="" />
	</div>
</div>

<div id="navi-background">
	<div id="navi-bg">
		<img src="Bilder/videowerbung.png" onmouseover="this.src='Bilder/videowerbung-over.png'" onmouseout="this.src='Bilder/videowerbung.png'" alt="Videowerbung" /><img src="Bilder/puffer.png" alt="Puffer" /><img src="Bilder/grafikwerbung.png" onmouseover="this.src='Bilder/grafikwerbung-over.png'" onmouseout="this.src='Bilder/grafikwerbung.png'" alt="Grafikwerbung" /><img src="Bilder/puffer.png" alt="Puffer" /><img src="Bilder/textwerbung.png" onmouseover="this.src='Bilder/textwerbung-over.png'" onmouseout="this.src='Bilder/textwerbung.png'" alt="Textwerbung" />

		<div id="einklappen">
		<a href="#" onclick="ein()"><img src="Bilder/einklappen.png" onmouseover="this.src='Bilder/einklappen-over.png'" onmouseout="this.src='Bilder/einklappen.png'" alt="" /></a>
		</div>

		<div id="ausklappen">
		<a href="#" onclick="aus()"><img src="Bilder/ausklappen.png" onmouseover="this.src='Bilder/ausklappen-over.png'" onmouseout="this.src='Bilder/ausklappen.png'" alt="" /></a>
		</div>

	</div>
</div>

<div id="ein-ausklappen">
	<div id="contend"></div>

		<div id="link">
			<a href="#"><img src="Bilder/funktionen.png" onmouseover="this.src='Bilder/funktionen-over.png'" onmouseout="this.src='Bilder/funktionen.png'" alt="" /></a><a href="#"><img src="Bilder/kaufen.png" onmouseover="this.src='Bilder/kaufen-over.png'" onmouseout="this.src='Bilder/kaufen.png'" alt="" /></a>
		</div>
	</div>

</body>
</html>

Hab ich da irgendwas falsch abgeändert? =)

Mfg waswiewo
 
Hi,

du hast Tippfehler in deinen if-Bedingungen. Du schreibst dort dispay statt display.

Ausserdem solltest du die if-Bedinungen dahingehend anpassen, dass sie mit den anfänglich unbestimmten Zuständen (kein style direkt im Element) umgehen können.
Weiterhin wirst du in der zweiten if-Bedingung ebenfalls prüfen müssen, ob der Aufklappen-Button sichtbar ist und darauf reagieren.
Code: 
function ein() {
 if(document.getElementById('einklappen').style.display=='block' || document.getElementById('einklappen').style.display=='') {
  document.getElementById('einklappen').style.display='none';
  document.getElementById('ausklappen').style.display='block';
  document.getElementById('ein-ausklappen').style.display='none';
 }
}

function aus() {
 if(document.getElementById('ausklappen').style.display=='block' || document.getElementById('ausklappen').style.display=='') {
  document.getElementById('einklappen').style.display='block';
  document.getElementById('ausklappen').style.display='none';
  document.getElementById('ein-ausklappen').style.display='block';
 }
}

Ciao
Quaese
 
Hi,

danke für die klasse Hilfe! Funktioniert so einwandfrei..

Habe mehrmals nach Tippfehlern gesucht, aber keine gefunden. Warscheinlich habe ich schon zu lange vor dem Bildschirm gesessen xD

Vielen Dank nochmal ;)

mfg waswiewo

##### E D I T:
Könnte man das ein und ausblenden zusätzlich mit nem 2 Sekunden Fade versehen? Oder ist dies zu kompliziert?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück