JavaScript

Grafiken nur bei Bedarf anzeigen

Details

Veröffentlicht am Mittwoch, 08. Oktober 2008 18:39

Geschrieben von Jan Pionzewski

Manchmal mag es sinnig sein, bestimmte Grafiken oder Bilder erst nach einem Klick auf einen Button sichtbar zu machen. Mit ein wenig CSS und JavaScript lässt sich das auch sehr gut bewerkstelligen.

Mit dem folgenden Beispiel wird ein kleiner Button angezeigt. Wenn man auf diesen Button klickt, wird das Bild grafik.jpg eingeblendet. Bei einem erneuten Klick auf den Button wird die Grafik wieder ausgeblendet.

Beispiel:

<form method="POST" name="form">
<input type="button" name="cmdShowHide"
value="Zeigen und Verbergen"
language="JavaScript" onclick="// check the display status.
if (imgShowHide.style.display == &quot;none&quot;)
// Inhalt zeigen
imgShowHide.style.display = &quot;block&quot;;
else
// Inhalt verbergen
imgShowHide.style.display = &quot;none&quot;;"></form>

<img ID="imgShowHide" SRC="grafik.jpg" style="display:none;">