Bilder durch anklicken vergrößern

Mit JavaScript kann man Bilder auf seiner Seite durch anklicken vergrößern bzw. verkleinern. Die Größe bleibt dabei so lange bestehen, bis man erneut auf die Grafik klickt.

Ein sinnvoller Einsatz wäre zum Beispiel bei einer Fotogalerie.

 

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

 

Code-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.

 

Code-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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.