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

Es folgt der Quellcode einer Beispielseite. 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 sinddann 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>Hier kommt der Seitentitel hin</title>
<script type="text/javascript">
<!--
var bb, bh, ba;
var zb, zh, za;
var fb, fh;
var Foto = new Image();
Foto.src = "006.jpg";

function calk() {
  bh = document.ers.height;
  bb = document.ers.width;
  ba = bb/bh;
  zh = document.getElementById("zellex").offsetHeight;
  zb = document.getElementById("zellex").offsetWidth;
  za = zb/zh;
  if (ba>=za) {
    fb = zb-10;
    fh = fb/ba;
  } else {
    fh = zh-10;
    fb = fh*ba;
  }
  window.document.aaa.src = Foto.src;
  window.document.aaa.width = fb;
  window.document.aaa.height = fh;
}
//-->
</script>
</head>
<body onLoad="calk()" onresize="calk()">
<table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td align="center" id="zellex">
  <img border="0" src="blind.gif" width="100%" height="100%" name="aaa">
</td></tr><tr><td height="1">
  <p>Dein Text.</p>
</td></tr></table>
<div style="position:absolute; top:0px; left:0px; visibility:hidden;">
  <img border=0 src="006.jpg" name="ers">
</div>
</body>
</html>

Um in einer Html-Seite ein Bild so groß wie möglich darstellen zu können, muss man zuerst mal wissen wie groß das eigentlich ist. Wir müssen also feststellen wie breit und wie hoch der Platz ist, der für das Bild zur Verfügung steht. Außerdem brauchen wir das Verhältnis der Bildhöhe zur Bildbreite. Mit diesen Daten kann man bestimmen wie breit und wie hoch das Bild dargestellt werden muss.

Wir bauen in die Seite eine Tabelle ohne Rahmen ein. Im Beispiel besteht diese Tabelle aus 2 Zellen die übereinander angeordnet sind. Du kannst die Zellen aber beliebig anordnen. Wichtig ist, dass die Tabelle 100% der Breiteund Höhe des Fensters einnimmt. Im Beispiel ist in der unteren Zelle der Text. Hier kommt natürlich auch die Überschrift und alle anderen Seiteninhalte außer dem Bild hin. In die obere Zelle kommt zunächst nur ein blind.gif. Ein blind.gif ist ein Bild, das aus nur einem einzigen Pixel besteht. Dieser eine Pixel ist transparent. Dadurch ist das ganze Bild unsichtbar. Natürlich werden blind.gif normalerweise ohne Rahmen verwendet. Sie sollen schließlich unsichtbar sein. Dieses blind.gif wird auf 100% Breite und Höhe der Zelle scaliert.

Browser verteilen den Platz der Tabelle anteilmäßig auf die einzelnen Zellen, sodass eine Zelle mit relativ viel Inhalt auch relativ groß wird. Das ist in unserem Fall unerwünscht. In der einen Zelle ist schießlich nur ein blind.gif, während inder anderen möglicherweise relativ viel Text ist. Dementsprechend würde die obere Zelle sehr klein dargestellt werden und die untere Zelle würde mehr Platz bekommen als der Text eingentlich braucht. Das wird mit einem kleinen Trick verhindert. Die untere Zelle mit dem Text bekommt eine feste Höhe von 1 Pixel. Natürlich ist der Text mehr als 1 Pixel hoch. Aber zum Glück dehnt jeder Browser eine Tabellenzelle immer mindestens so weit aus, dass ihr Inhalt hinein passt. Durch die Festlegung der Höhe auf 1 Pixel erreicht man also nicht, dass die Zelle tatsächlich nur 1 Pixel hoch ist, sondern dass genau so groß ist, dass der Text gerade eben hinein passt. Dadurch hat die obere Zelle genau die Breite und Höhe, die maximal für das Bild zur Verfügung steht. Damit wir durch ein Script diese Breite und Höhe abfragen können geben wir der Zelle eine beliebige Id (im Beispiel "zellex").

Jetzt muss also noch das Seitenverhältnis des Originalbildes bestimmt werden. Dazu fügen wir unter der Tabelle ein Div mit dem Bild ein. Da das Bild dazu dient, die Größenverhältnisse zu bestimmen, wird es in Originalgröße eingebaut. Es wird also keine Größe angegeben. Ausserdem wird das Div unsichtbar gemacht, denn auf der Seite soll das Bild ja nicht in dieser Größe sichtbar sein. Viele Browser zeigen den Platz, wo das Div ist, dann als leere Fläche unter der Tabelle an und es erscheinen Scrollbars. Das ist natürlich nicht erwünscht. Deshalb positionieren wir das Div absolut oben links in der Ecke. Sofern das Bild nicht größer als das gesamte Fenster ist, werden dadurch keine Scrollbars angezeigt und es entstehen keine ungewollten leeren Flächen. Um die Breite und Höhe des Bildes per Script abfragen zu können geben wir dem Bild einen beliebigen Namen (im Beispiel "ers").

Das Script

Im Head der Seite wird ein Scrptbereich festgelgt. In diesem Bereich definieren wir zunächst einige Variablen.
"bb"speichert die Breite des Originalbildes.
"bh"speichert die Höhe des Originalbildes.
"ba"speichert das Verhältnis bb/bh.
"zb"speichert die Breite der oberen Zelle.
"zh"speichert die Höhe der oberen Zelle.
"za"speichert das Verhältnis zb/zh.
"fb"speichert die errechnete Breite des Bildes.
"fh"speichert die errechnete Höhe des Bildes.
"Foto"speichert das Bild als Objekt. Man kann ihm dadurch sehr einfach Eigenschaften zuweisen. Ihm wird auch gleich die Eigenschaft zugewiesen, dass seine Quelle im Beispiel "006.gif"ist. Das musst du natürlich durch Namen und Pfad deines Bildes ersetzen.

Danach kommt eine Funktion, die die ganzen Berechnungen durchführt. Ich habe diese Funktion "calk()" genannt. In dieser Funktion werden zunächst den Variablen "bb", "bh", "zb"und "zh" die entsprechenden Werte zugewiesen und die Werte von "ba" und "za" werden berechnet. Danach wird untersucht ob "ba" größer oder gleich "za" ist (breites, niedriges Bild und schmale, hohe Zelle). Wenn das der Fall ist wird die Bildbreite 10 Pixel kleiner als die Zellenbreite festgelegt. Es bleibt also rechts und links jeweils ein Rand von 5 Pixel Breite. Natürlich kannst du hier auch einen anderen Wert eintragen um den Rand zu vergrößern oder zu verkleinern. Die Bildhöhe wird berechnet indem die Bildbreite durch ba dividiert wird. Wenn die Bedingung nicht erfüllt ist (schmales, hohes Bild und breite, niedrige Zelle), wird die Bidhöhe 10 Pixel kleiner als die Zellenhöhe festgelegt und die Bildbreite durch Bildhöhe mal ba festgelegt.

Die Abmessungen des Bildes sind jetzt also bekannt. Jetzt wird das blind.gif, das den Namen "aaa" hat, gegen das Bild ausgetauscht. Dann werden Höhe und Breite des Bildes auf die errechneten Werte scaliert.

Die Funktion calk soll natürlich gleich beim Laden der Seite ausgeführt werden. Da "bb", "bh", "zb" und "zh", aber natürlich erst bestimmt werden können wenn die ganze Seite vollständig geladen ist, darf die Funktion auch erst dann ausgeführt werden. Das erreicht man indem die Funktion calk durch den Eventhandler "onLoad" im Bodytag aufgerufen wird. Damit die Bildgröße erneut berechnet und angepasst wird wenn die Fenstergröße verändert wird, wird zusätzlich der Eventhandler "onResize" verwedet.


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