Bild und Text ins Fenster einpassen

Demo

Autor: Ich

www.friedels-home.de

IE 5

IE 6

NN 6

NN 7

Moz 1

OP 6

OP 7

Der Grundgedanke dieses Scripts ist folgender:
Man macht eine Html-Seite in der eine Tabelle ist, die nur eine Zelle hat. In der Tabelle ist links oben ein Bild das rechts vom Text umflossen wird. Das Bild wird zunächst in Originalgröße angezeigt. Jetzt wird durch das Script die Breite und die Höhe des Bildes bestimmt. Außerdem wird die innere Breite und die innere Höhe des Fensters bestimmt. Dann wird das Verhältnis aus Bildbreite zu Bildhöhe bestimmt und das Verhältnis aus Fensterbreite zu Fensterhöhe. Wenn ersteres Verhältnis gößer als das zweite ist (breites Bild in hohem Fenster), wird der Text unter dem Bild angeordnet. Ansonsten bleibt es dabei, dass der Text rechts neben dem Bild ist. Falls das Bild kleiner ist als das Fenster wird es erst man vergrößert damit es sicher zu groß ist. Dann wird es so lange verkleinert bis die Tabelle nicht breiter und nicht höher als das Fenster ist. Dann wird noch geprüft, ob die Tabelle so Breit ist wie das Fenster. Wenn sie wesentlich schmaler ist wird sie auf Fensterbreite vergrößert. Das ist notwendig wenn das Bid hoch und schmal ist und auf der Seite wenig Text ist. Sonst würde rechts neben dem Bild nur eine Schmale Spalte Text stehen.

Es folgt der Quellcode der Seite, die du sehen kannst wenn du auf "Demo" klickst. Danach kommt die Erklärung dazu. Damit du leichter erkennen kannst worauf sich die einzelnen Teile der Erklärung beziehen sind Teile des Quellcodes farbig hinterlegt. Die Erklärungen sind dann in der gleichen Farbe hinterlegt wie der Quellcode auf den sich der jeweilige Text bezieht.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
<!--
var fb, fh, bb, bh, bv=0, tb, th; 
var a=0, b=0; 
 
function init() { 
  bb= Number(window.document.bild.width); 
  bh= Number(window.document.bild.height); 
  bv= bb/bh; 
  bild(); 
}; 
 
function bild() {
  bb= Number(window.document.bild.width); 
  bh= Number(window.document.bild.height); 
  if (document.body.offsetWidth) fb =document.body.offsetWidth; 
  if (window.innerWidth) fb =window.innerWidth; 
  if (document.body.offsetHeight) fh =document.body.offsetHeight; 
  if (window.innerHeight) fh =window.innerHeight; 
  if ((fb-20)/fh < bv) { 
    window.document.bild.align = "center"; 
  }; 
  tb = document.getElementById('tabelle').offsetWidth; 
  th = document.getElementById('tabelle').offsetHeight; 
  if (b==0 && bb<fb) { 
    window.document.bild.width = fb; 
    window.document.bild.height= window.document.bild.width/bv; 
    b=1; 
    init(); 
  }; 
  b=1; 
  kleiner(); 
};
 
function kleiner() { 
  if ((fb-tb<0 || fh-th<0) && bb>100) { 
    window.document.bild.width = window.document.bild.width*0.98-30; 
    window.document.bild.height= window.document.bild.width/bv; 
  } else a=1; 
  if (a==0) init(); 
  if (tb<fb-100) document.getElementById('tabelle').width = fb-30; 
}; 
//-->
</script>
</head>
 
<body style="margin:0;" onLoad="init()" onResize="location.reload()">
<table cellspacing=0 cellpadding="10" id="tabelle"><tr><td>
<img src="006.jpg"  style="margin-top:3px; margin-right:20px; margin-bottom:3px; " border=0 align="left" name="bild">
<h1>Überschrift</h1>
<p>Text ...</p>
</td></tr></table>
</body>
</html>

Natürlich wird alles in eine ganz normale, leere Html-Seite eingebaut. Der Body der Seite enthält nichts weiter als eine Tabelle, die nur aus einer Zelle besteht. Damit die Tabelle durch das Script angesprochen werden kann erhält sie das Attribut name="tabelle". In diese Tabelle kommt das Bild und der Text. Das Bild wird links ausgerichtet, hat keinen Rahmen und hat den Namen "bild".

Die Bildausrichtung und die Bildgröße wird mit einer Funktion geändert. Die Funktion kommt in einen Scriptbereich in den Head der Seite. Bevor die Funktion definiert wird, werden erst mal die benötigten Variablen definiert. Die Variaben haben folgenden Zweck:
Variable Zweck
fb Fensterbreite
fh Fensterhöhe
bb Bildbreite
bh Bildhöhe
bv Verhältnis aus Bildbreite zur Bildhöhe
tb Tabellenbreite
th Tabellenhöhe
a Solange a=0 muss das Bild noch verkleinert werden.
b Solange b=0 muss noch geprüft werden ob das Bild vergrößert werden muss.

Variable	Zweck
fb	Fensterbreite
fh	Fensterhöhe
bb	Bildbreite
bh	Bildhöhe
bv	Verhältnis aus Bildbreite zur Bildhöhe
tb	Tabellenbreite
th	Tabellenhöhe
a	Solange a=0 muss das Bild noch verkleinert werden.
b	Solange b=0 muss noch geprüft werden ob das Bild vergrößert werden muss.

Die Bildgröße kann man natürlich erst feststellen wenn das Bild geladen ist. Deshalb wird das in der Funktion init() gemacht und diese Funktion wird durch onLoad="init()" im Bodytag aufgerufen. In der Funktion wird also erst mal die Bildbreite und -höhe bestimmt und in den Variablen bb und bh gespeichert. Dann wird das Verhältnis Breite/Höhe in bv gespeichert. Bildbreite und -höhe werden in der Folge noch des öfteren neu bestimmt, aber bv bleibt so wie es ist. Sonst würde das Bild durch Rundungsfehler mit jedem Berechnungsschritt mehr verzerrt werden. Nachdem bv feststeht wird die Funktion bild() aufgerufen.

Diese Funktion wird im Laufe der Berechnung mehrmals aufgerufen. Wenn der Aufruf nicht aus init() erfolgt kann es natürlich sein, dass sich die Breite und Höge des Bildes geändert hat. Also wird erst mal bb und bh neu bestimmt. Leider gibt es keine Methode fest zu stellen wie viel Platz in einem Fenster ist, die in allen Browsern funktioniert. Im Netscape Navigator und Mozilla ist window.innerWidth und die innere Breite des Fensters. Opera und der Internet Explorer kennen window.innerWidth nicht. Aber in diesen Browsern kann man mit document.body.offsetWidth die Breite des Body feststellen. Dabei muss man aber beachten, dass auch Mozilla document.body.offsetWidth kennt, aber er gibt als Wert 0 zurück. Mit if (document.body.offsetWidth) fb = document.body.offsetWidth; wird also im IE und Opera die Fensterbreite in fb gespeichert. In Mozilla wird fb=0. Mit if (window.innerWidth) fb = window.innerWidth; wird in NN und Mozilla die Fensterbreite in fb gespeichert. In den nächsten beiden Zeilen wird die Fensterhöhe nach dem selben Schema erfasst und in fh gespeichert. Wenn das Verhältnis Fensterbreite/Fensterhöhe kleiner als bv (Bildbreite/Bildhöhe) ist, also bei einem breiten Bild im hohen Fenster, macht es keinen Sinn rechts neben das Bild noch Text zu machen. Auch wenn Fensterbreite/Fensterhöhe nur wenig größer ist als bv sieht es nicht gut aus wenn rechts neben dem Bild noch Text ist. Dort würde dann im ungünstigsten Fall in jeder Zeile gerade ein Wort stehen. Solche Zeilen lassen sich natürlich nicht in den Blocksatz setzen und man erhält einen sehr ungleichmässigen Rand. Um das zu verhindern ziehen wir von der Fensterbreite 120 Pixel ab und prüfen ob die verkleinerte Breite/Fensterhöhe kleiner als bv ist. Wenn das der Fall ist wird mit window.document.bild.align = "center"; festgelegt, dass rechts neben dem Bild kein Text kommt. Als nächstes wird die innere Breite und Höhe der Tabelle festgestellt. Ziel des Scripts ist, dass das Bild so groß ist, dass der Text neben und/oder unter dem Bild gerade noch Platz hat. Dazu wird das Bild so lange schrittweise verkleinert bis der Text genug Platz hat. Es muss also erst mal sicher gestellt werden, dass das Bild mindestens so groß ist wie es zum Schluss sein muss. Solange noch nicht geprüft wurde ob das Bild vergrößert werden muss gilt b=0. Wenn das der Fall ist und das Bild weniger Breit ist als das Fenster wird das Bild auf Fensterbreite verbreitert und die Bildhöhe wird im selben Verhältnis vergrößert. Jetzt wird b=1 damit beim wiederholten Ausführen der Funktion bild() das Bild nicht nochmal vergrößert wird. Natürlich muss b auch 1 werden, wenn das Bild am Anfang groß genug war.

Danach wird die Funktion kleiner() aufgerufen. Das ist die Funktion, die das schrittweise Verkleinern übernimmt.Es wird geprüft ob das Bild verkleinert werden muss. Das Bild befindet sich zusammen mit dem Text in einer Tabelle. Wenn diese Tabelle breiter oder höher als das Fenster ist wird das Bild verkleinert. Aber nur wenn das Bild nicht schon weniger als 100 Pixel breit ist. Schließlich soll man ja noch etwas erkennen können. Wenn bei einer Bildbreite von 100 Pixel immer noch nicht alles ins Fenster passt wird das Verkleinern abgebrochen. Wenn die Bedingungen zum Verkleinern erfüllt sind, wird die Bildbreite auf 98% reduziert und dann 30 Pixel abgezogen. Dann wird die Bildhöhe auf die neue Breite/bv eingestellt. Wenn die Bedingungen zum Verkleinern nicht erfüllt sind wird a=1. Die Verkleinerung ist dann abgeschlossen. Wenn a=0 wird init() erneut aufgerufen. Das ganze läuft dann so lange, bis die Verkleinerungsbedingung nicht mehr erfüllt ist.Es kann sein, dass das Bild jetzt (fast) so hoch wie das Fenster, aber ziemlich schmal ist. Wenn rechts daneben nicht viel Text steht, ist der Text jetzt zu einer schmalen Spalte zusammen gedrückt und rechts daneben ist das Fenster leer. Das sieht nicht gut aus. Deshalb wird jetzt geprüft ob die Tabelle mehr als 100 Pixel schmaler als das Fenster ist. Wenn das der fall ist wird die Tabelle auf annähernd Fensterbreite verbreitert.

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