OnClick - 2 Divs ausblenden, 1 Div einblenden @ tutorials.de: Tutorials, Forum & Hilfe

waswiewo · 15.05.10 19:10

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

**Quaese** · 17.05.10 09:43

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

waswiewo · 17.05.10 20:20

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?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQuery: Mehrere Divs hintereinander einblenden

Einblenden / Ausblenden

Einblenden/ausblenden

einblenden eines divs

layers einblenden und ausblenden

E-Mail:

Abonnieren Abbestellen