Freitag, 27. April 2018

00:34

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

Beispiel 2: Grafik einblenden / ausblenden

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 ] __________________________





© 2007 - 2018 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1

Diese Seite wurde zuletzt am 23.12.2016 18:01 aktualisiert.