Homepage-Tipps & -tricks für Webmaster mit Javascript

Verdeckte (versteckte) Textinfos oder Grafiken einblenden / ausblenden bzw. aufklappen / zuklappen

Das nachfolgende Beispiel kann sehr vielseitig zum Einsatz gebracht werden, sofern Javascript im Browser aktiviert ist. Sie können es beispielsweise für Ihre FAQ nutzen, um die Seite optisch kurz zu halten. Ihre Besucher decken nur die Informationen auf, die sie tatsächlich auch interessieren.

Selbstverständlich können auch für Besucher mit deaktiviertem Javascript die verborgenen Inhalte zugänglich gemacht werden. Dazu definieren Sie <noscript>...</noscript>-Bereiche, in welche Sie die entsprechenden Inhalte hinterlegen; diese werden lediglich bei deaktiviertem Javascript angezeigt!

Beispiel 1: Text aufklappen / zuklappen

Frage 1: Gibt es hier auch Homepagevorlagen?

Frage 2: Darf ich diese Vorlagen downloaden?

Beispiel 2: Grafik einblenden / ausblenden

Grafik 1 ansehen

Grafik 2 ansehen

Beim ersten Klick auf einen der Links können Sie die verdeckten Infos oder Inhalte aufklappen; beim zweiten Klick verstecken sie sich wieder!

Anweisung in der ausgelagerten Javascript-Datei "tricker.js":

function tricker(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

Anweisung im Html-Dokument

<html>
<head>
<title>Javascript: Text und Grafik ein- und ausblenden</title>
<script type="text/javascript" src="tricker.js"></script>
</head>
<body>
<div><a onclick="return tricker('1')" href="javascript:void(0)">
Frage 1: Gibt es hier auch Homepagevorlagen?</a></div>
<div id="1" style="display:none">Antwort: ja</div>
<div><a onclick="return tricker('2')" href="javascript:void(0)">
Frage 2: Darf ich diese Vorlagen downloaden?</a></div>
<div id="2" style="display:none">Antwort: ja</div>
<div><a onclick="return tricker('3')" href="javascript:void(0)">
Grafik 1 ansehen</a></div>
<div id="3" style="display:none"><img alt="Grafik 1" src="bild_1.jpg"></div>
<div><a onclick="return tricker('4')" href="javascript:void(0)">
Grafik 2 ansehen</a></div>
<div id="4" style="display:none"><img alt="Grafik 2" src="bild_2.jpg"></div>
</body>
</html>

Bei Hinzufügen weiterer Links mit "Aufklapp"-Informationen darf die fortlaufende Nummerierung (siehe Anweisungen oben: rote Markierungen) nicht vergessen werden!

Das könnte Sie vielleicht auch interessieren:
[ Javascript- und Noscript-Bereich definieren! ]

[ veröffentlicht am 18.08.2009 ] __________________________

zurück | weiter

Diese Seite wurde zuletzt am 31.08.2010 11:55 aktualisiert.

Anzeigen

Marktplatz

Kostenlos: die eigene Homepage direkt online ohne Programmierkenntnisse erstellen, in Flash und HTML mit MMS to Website, Bildergalerie, Gästebuch, Counter ...
[ mehr Infos ]

Schnäppchen in dem Bereich Computer & Co.: Vergleichen Sie die Top Angebote verschiedener Anbieter!
[ mehr Infos ]

Mit klarmobil.de ab 9 Cent/Min. in alle Netze ohne Grundgebühr keine Vertragsbindung incl. 10 EUR Startguthaben für nur 4,95 EUR - [ jetzt wechseln und sparen! ]

Eigene Homepage mit Jimdo - schnell & einfach selbst erstellt incl. eigener Domain für nur EUR 5 / Monat [ mehr Infos ]

WebPack® S 3.0: 500 MB Webspace * Traffic-Flatrate * 100 Subdomains * 200 E-Mail-Adressen * 50 E-Mail-Konten * 5 FTP-Zugänge * Webmailer - für nur EUR 1,49* im Monat.
[ mehr Infos ]