Bild an Fenstergröße anpassen, die zweite.

Ein Bild kann man recht einfach an die Fensterbreite anpassen. Wenn man <img src="bild.gif" border="0" width="100%"> in seinen Quellcode schreibt, wird das Bild "bild.gif" ohne Rahmen so in die Seite eingepasst, dass es die gesamte Breite einnimmt. Wenn das Bild in einem anderen Element, z.B. einer Tabellenzelle ist, nimmt es die gesamte Breite dieser Zelle ein. Wenn man <img src="bild.gif" border="0" height="100%"> in seinen Quellcode schreibt, wird das Bild so in die Seite eingepasst, dass es die gesamte Höhe einnimmt. (Das ist nicht ganz unproblematisch und funktioniert nur unter gewissen Voraussetzungen.) Wenn man <img src="bild.gif" border="0" width="100%" height="100%"> in seinen Quellcode schreibt, werden die Breite und die Höhe des Bildes angepasst. Natürlich wird das Bild in seiner Form dann an das Fenster angepasst, was meist unerwünscht ist. Um das Bild nicht zu verzerren darf man also immer nur entweder die Breite oder die Höhe festlegen. Um ein Bild ins Fenster einpassen zu können, muss man also wissen, ob die Breite oder die Höe des Fensters die Maße des Bildes bestimmt.

Lösung: (die Teile, die von dir angepasst werden müssen wenn du das Script nachbauen willst, sind farbig dargestellt)

Es werden zunächst, wie immer, die benötigten Variablen deklariert. "b" und "h" sind die Breite und Höhe des unskalierten Hauptbildes. "bild" ist die URL des Hauptbildes. Die Funktionen "Fensterweite()" und "Fensterhoehe()" ermitteln die Fenstergröße. Die Funktion Fensterweite() prüft, ob der Browser die Eigenschaft "window.innerWidth" kennt. Der NN kennt diese Eigenschaft, der IE nicht. Wenn das der Fall ist wird der Wert der in dieser Eigenschaft gespeichert ist zurückgegeben. Kennt der Browser diese Eigenschaft nicht, wird geprüft, ob er das Objekt document.body und dessen Eigenschaft "document.body.offsetWidth" kennt. Der IE kennt diese Eigenschaft, der NN nicht. Wenn das der Fall ist wird der Wert der Eigenschaft "document.body.offsetWidth" zurückgegeben. Wenn der Browser auch das nicht kennt wird b (die tatsächliche Breite des Bildes) zurückgegeben. Die Funktion Fensterhoehe() macht das gleiche mit der Fensterhöhe. Das Script überwacht auch ob sich die Fenstergröße ändert. Das geschieht je nach Browser auf unterschiedliche Weise. Mit if(!window.Weite && window.innerWidth) wird festgestellt ob es die Variable "Weite" gibt und ob der Browser die Eigenschaft "window.innerWidth" kennt. Wenn es die Variable "Weite" nicht gibt (das ist nach dem Laden der Seite zunächst der Fall) und wenn der Browser gleichzeitig die Eigenschaft "window.innerWidth" kennt (das ist bei Netscape der Fall), dann wird mit "window.onresize = neuAufbau;" überwacht ob die Fenstergröße verändert wird und gegebenenfalls die Funktion neuAufbau aufgerufen. Außerdem werden die Variablen "Weite" und "Hoehe" festgelegt. Im IE wird das ganze aber nicht ausgeführt, weil der Browser die Eigenschaft "window.innerWidth" kennt. Das ist auch gut so, denn beim IE wird für die Erkennung der Größe die Eigenschaften "document.body.offsetWidth" und "document.body.offsetHeight" benötigt und die gibt es ja erst nachdem der Body geladen ist. Also wird die Überwachung für den IE nicht in den Head sondern in den Body gesetzt. Sie funktioniert fast genau so wie beim NN. Auch der NN 6 kennt das Objekt "document.body" und dessen Eigenschaften. Er führt jedoch diesen Scriptbereich nicht aus, weil der Browser die Variable Weite schon kennt wenn dieser Scriptbereich ausgeführt wird. Jetzt stehen die Variablen "Weite" und "Hoehe" in jedem Browser zur Verfügung. Indem das Verhältnis von "Weite" zu "Höhe" mit dem Verhältnis von "b" zu "h" verglichen wird, wird festgestellt ob die Fensterbreite oder die Fensterhöhe die Skalierung des Bildes bestimmt. Je nach dem welcher Fall eintritt wird entweder "<img border='0' src='"+bild+"' height='"+(Hoehe-20)+"'>" oder "<img border='0' src='"+bild+"' width='"+(Weite-20)+"'>" in den Quellcode geschieben. Die "-20" sind notwendig, weil NN, abweichend vom Standard, einen Rand um das Bild freilässt. Wenn die Fenstergröße geändert wird ruft der Eventhandler "window.onresize" die Funktion "neuAufbau" auf. Sie ruft noch mal die Funktionen "Fensterweite()" und "Fensterhoehe()" auf und vergleicht die zurück gegebenen Werte mit "Weite" und "Hoehe". Wenn sich die Werte unterscheiden wird der gesamte Quellcode durch "window.history.go(0)" erneut ausgeführt ohne dass die Seite neu vom Server geladen werden muß.

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