Bilder durch anklicken vergrößern

Scripting-Tipps - JavaScript


Mit JavaScript kann man Bilder auf seiner Seite durch anklicken vergrößern bzw. verkleinern. Die Größe bleibt dabei so lange bestehen, bis wieder auf die Grafik geklickt wird. Sinnvoller Einsatz wäre zum Beispiel in einer Fotogalerie.

In den <head>...</head>-Bereich Ihrer Webseite muss das folgende JavaScript eingefügt werden.

Beispiel:

<script language="javascript">
<!--
var AngezeigteBreite = 500;
var GespeicherteBreite = 0;

function BildAnpassen(Bild)
{
    if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
    {
        if (Bild.width == AngezeigteBreite)
        {
            Bild.width = GespeicherteBreite;
        }
        else
        {
            GespeicherteBreite = Bild.width;
            Bild.style.cursor = "pointer";
            Bild.width = AngezeigteBreite;
        }
    }
}
//-->
</script>


Um nun eine Grafik per Klick zu vergrößern oder zu verkleinern, muss im <img>-Tag noch ein zusätzliches Attribut mit eingebaut werden.

Beispiel:

<img onClick="BildAnpassen(this)" onLoad="BildAnpassen(this)" src="/bild.png" title="Klicken zum Vergrößern/Verkleinern">


Tipp:
So lange das Attribut onClick mit eingefügt wird, lässt sich diese Funktion natürlich bei beliebig vielen Bildern realisieren.




Weitere Artikel: