Bilder zoomen

Im Internet Explorer hat der Nutzer von Haus aus nicht die Möglichkeit den Zoom der Bilder festzulegen. Mit einem einfachen Trick können Sie es dem Besucher ihrer Seiten ermöglichen.

Wenn Sie ein Bild aufrufen, können Sie festlegen wie groß der Browser es darstellen soll, unabhängig von der tatsächlichen Auflösung.
Unten sehen Sie dazu ein Beispiel.

<IMG ALT="Lok" ID="iBild1" SRC="../../grafik/urlaub2004/aunz_525.jpg" STYLE="WIDTH:120px; HEIGHT:160px">
<IMG ALT="Lok" ID="iBild2" SRC="../../grafik/urlaub2004/aunz_525.jpg" STYLE="WIDTH:240px; HEIGHT:320px">
<IMG ALT="Lok" ID="iBild3" SRC="../../grafik/urlaub2004/aunz_525.jpg" STYLE="WIDTH:360px; HEIGHT:480px">
        

Um die Bildgröße individuel zu verändern, rate ich zu folgender Vorgehensweise:
Zuerst sollten Sie auf der jeweiligen Seite die Originalgröße von jedem Bild und die Anzahl der Bilder hinterlegen, z.B.

xBild1=320; yBild1=240; Bilderanzahl=1;

Nun sollten Sie am besten im Datenframe oder in einem Cookie den momentanen Zoom speichern, z.B.

Zoom=125;

Die Initialisierungprozedur der jeweiligen Seite muss nun für alle Bilder der Seite die Darstellungsgröße anpassen, z.B.

for(x=1; Bilderanzahl; x++) {
  eval("iBild"+x).style.width=eval("xBild"+x)*parent.Datenfenster.Zoom/100;
  eval("iBild"+x).style.heigth=eval("yBild"+x)*parent.Datenfenster.Zoom/100;
}
        

Wie der Besucher den Zoom verändern kann, überlasse ich wieder Ihrer Fantasie. Wenn der Besucher den Zoom für alle Bilder verändert, müssen Sie den Wert in der Variable für den Zoom speichern und anschließend wieder die obrige Schleife aufrufen.

Soll der Besucher den Zoom von jedem Bild individuell verändern können, wird die Routine etwas schwieriger. Sie müssen zuerst den momentanen Zoom des jeweiligen Bildes ausrechnen und danach entsprechend anpassen.
Der unteren Function werden die Variablen modus und bild übergeben. Die Variable bild enthält den ID des zu zoomenden Bildes.

function BildZoom(modus,bild) { //Zoom von bild, modus: 1 = Zoom erhöhen; 2 = Zoom verringern
  localzoom = parseInt(document.getElementById("iBild"+bild).style.width) / eval("xBild"+bild) * 100;
      //momentanen Zoom des Bildes ausrechnen
  if (modus==1) {
    localzoom = localzoom + 25;            //Lokalen Zoom m 25% erhöhen
    if (localzoom >= 200) localzoom = 200; //Bei über 200% Zoom auf 200% setzen
  }
  if (modus==2) {
    localzoom = localzoom - 25;          //Lokalen Zoom u 25% verringern
    if (localzoom <= 25) localzoom = 25; //Bei unter 25% Zoom auf 25% setzen
  }
  document.getElementById("iBild"+bild).style.width = (eval("xBild"+bild)/100*localzoom)+"px";
  document.getElementById("iBild"+bild).style.height = (eval("yBild"+bild)/100*localzoom)+"px";
      //Zoom des Bildes anpassen
}
        

An den oberern Bildern können Sie den Zoom-Effekt ausprobieren. Die Lupen zum Vergrößern/-kleinern aller Bilder blenden Sie ein, in dem Sie im Menü auf die Fläche "Lupe / config" klicken. Der Rest ist bekannt.
Wenn Sie ein Bild mit der linken Maustaste anklicken, wird der Zoom nur für das entsprechende Bild erhöht. Ein Klick mit einer anderen Maustaste (z.B. rechts) verringert den Zoom für das entsprechende Bild.