Fenstergröße an's Bild anpassen

Demo 1 Demo 2 Demo 3 Demo 4 Autor: Ich
www.friedels-home.de
IE 5 IE 6 NN 6 NN 7 MOZ 1 TB 1 TB 2 TB 3 OP 8 OP 9 OP 10

Die Idee zu diesem Script ist mir durch eine Frage bei supportnet.de gekommen. Ein User hatte eine Seite mit Thumbnails gemacht. Wenn man ein Thumbnail angeklickt hat, hat sich ein neues Fenster in Normalgröße mit dem Bild geöffnet. Ihn hat gestört, dass die Fenstergröße und -form nicht zu den Bildern gepasst hat. Mit diesem Script in der Bildseite wird das Fenster angepasst.

Die Bildseite

Der Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>K&ouml;cherbaumald</title>
    <script type="text/javascript">
    <!--
    var aww = screen.availWidth;
    var awh = screen.availHeight;
    var bb, bh, bv, ib, ih, rb, rh;


    function init() {
      bb= Number(window.document.bild.width);
      bh= Number(window.document.bild.height);
      bv= bb/bh;

      
      self.moveTo(0,0);
      self.resizeTo(aww ,awh);

      
      if (document.body.offsetWidth) ib =document.body.offsetWidth;
      if (window.innerWidth) ib =window.innerWidth;
      if (document.body.offsetHeight) ih =document.body.offsetHeight;
      if (window.innerHeight) ih =window.innerHeight;

      rh= awh-ih;
      rb= aww-ib;

      if (bb>ib || bh>ih) Bild()
      else Fenster();

    };


    function Fenster() {
      self.resizeTo(bb+rb,bh+rh);
    };

    function Bild() {
      if (bb/bh < ib/ih) {
        self.resizeTo(parseInt((ih*bv)+rb),awh);
        window.document.bild.height = ih;
      }
else {
        self.resizeTo(aww,parseInt(ib/bv+rh));
        window.document.bild.width= ib;
      };
    };

    //-->
    </script>
  </head>

  <body style="margin:0; padding:0; overflow:hidden" onLoad="init()">
    <img src="006.jpg" style="margin:0;" border="0" name="bild">
  </body>
</html>

Wie du siehst handelt es sich um eine ganz normale Html-Seite mit Head und Body. Im Body ist nur das Bild. Das Bild hat keinen Rahmen und keinen Abstand zu benachbarten Elementen. Außerdem bekommt es einen Namen unter dem es vom Script angesprochen werden kann. Als Name habe ich "bild" gewählt. Im Beispiel ist der Dateiname des Bildes 006.jpg und das Bild ist im selben Ordner wie die Html-Seite. Du musst hier natürlich Namen und Pfad deines Bildes einsetzen. Natürlich soll auch die Seite keinen Rand haben. Schließlich soll das Bild möglichst genau ins Fenster passen. Also bekommt das Bodytag die Eigenschaften style="margin:0;" und padding:0;. Außerdem muss mit overflow:hidden verhindert werden, dass Scrollbars einblendet werden. Das Bild soll ja das gesammte Fenster füllen. Da ist für Scrollbars kein Platz.

Die Variablen

Im Head der Seite ist das Script. Zuerst werden die benötigten Variablen definiert. aww ist die verfügbare Breite des Bildschirms, awh ist die verfügbare Höhe. Verfügbar bedeutet, dass das die Bildschirmabmessungen ohne diejenigen Elemente, die immer im Vordergrund sind, sind. Wenn also unten die Windows Taskleiste immmer im Vordergrund ist, wird der davon belegte Platz nicht mitgerechnet. bb und bh sollen die Bildbreite und -höhe speichern, bv soll das Verhältnis aus Bildbreite zu Bildhöhe speichern, ib und ih speichern die innere Breite und Höhe des Fensters, rb und rh speichern die Breite und Höhe des Fensterrahmens. Also die Differenz zwischen Außen- und Innenbreite bzw. -höhe des Fensters. aww und awh können bereits während dem Laden der Seite festgelegt werden. Die anderen Variablen werden später durch die folgenden Funktionen mit Werten belegt.

Initialisierung - init()

Die Funktion init() wird ausgeführt sobald die Seite vollständig geladen ist. Das wird durch den Aufruf mit dem Eventhandler onLoad im Bodytag erreicht. Zuerst werden die Bildabmessungen bestimmt. Da as Bild ja den Namen bild hat, kann es durch window.document.bild angesprochen werden. Alle getesteten Browser kenne die Eigenschaften width und height des Bildes, aber einige Brwoser geben den Wert als Zahl zurück und einige hängen die Einheit px an. Deshalb wird mit der Funktion Number() der numerische Anteil des Wertes extrahiert. Anschließend wird das Seitenverhältnis des Bildes errechnet. Bei einem Bild, das größer als der zur Verfügung stehende Platz ist, soll ja das Bild angepasst werden. Dazu muss erst mal festgestellt werden wie viel Platz eigentlich für das Bild zur Verfügung steht. Dazu wird das Fenster mit self.resizeTo(aww ,awh); auf maximale Größe gebracht und, damit es dann ganz sichtbar ist, mit self.moveTo(0,0); die linke obere Fensterecke in die linke obere Ecke des Desktops verschoben. Leider ist die innere Breite und Höhe des Fensters nicht so einfach zu bestimmen. Alle aktuellen Browser kennen document.body.offsetWidth und document.body.offsetHeight. Während IE, Opa, Moz und NN7 darin die innere Breite bzw. Höhe des Fensters speichern, gibt der NN6 grundsätzlich 0 zurück. Einige Browser kennen auch window.innerWidth und window.innerHeight, zum Glück auch der NN6. Deshalb wird die innere Breite und Höhe erst mal mit document.body.offsetWidth und document.body.offsetHeight bestimmt und dann wird bei Browsern, die document.body.offsetWidth und document.body.offsetHeight kennen der Wert mit diesem Ergebnis überschrieben. Die Breite des Fensterrahmens kann man jetzt einfach bestimmen indem man die innere Fensterbreite von der verfügbaren Breite des Monitors abzieht. Entsprechendes gilt für die Höhe. Wenn das Bild breiter oder höher als das Fenster ist muss die Bildgröße angepasst werden. Dazu wird die Funktion bild() aufgerufen. Ansonsten muss das Fenster ans Bild angepasst werden. Dazu wird die Funktion fenster() aufgerufen.

Fenster anpassen - function fenster()

Da sicher gestellt ist, dass das Bild in Breite und Höhe kleiner als der verfügbare Platz ist, braucht nur noch das Fenster in Breite und Höhe ans Bild angepasst werden. Da bei resizeTo(); die Aussenmaße des Fensters angegeben werden müssen, werden die Maße aus Bildmaß + Rahmenmaß errechnet.

Bild anpassen - function bild()

Wenn diese Funktion aufgerufen wird muss das Bild verkleinert werden damit es ins Fenster passt. Dazu muss erst mal festgestellt werdenob die Breite oder die Höhe des Fensters die Abmessungen des Bildes bestimmen. Dazu wird das Seitenverhältnis Breite zu Höhe des Bildes mit dem Seitenverhältnis des Fensters verglichen. Wenn das Verhältnis beim Bild kleiner als beim Fenster ist, muss das Fenster die maximale Höhe haben. Die Fensterbreite wird dann aus "(ih*bv)+rb" errechnet. Dieser Wert wird mit "parseInt()" in eine Ganzzahl umgewandelt. Das Bild hekommt dann die innere Höhe des Fensters, die in ih gespeichert ist. Die Bildbreite passt sich automatisch an. sodass das Bild nicht verzerrt wird. Wenn das Verhältnis beim Bild nicht kleiner als beim Fenster ist, muss das Fenster die maximale Breite haben. In diesem Fall wird die Höhe mit "parseInt(ib/bv+rh)" errechnet. Das Bild bekommt die Breite, die in ib gespeichert ist.

 

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: