Logo im Hintergrund

Demo Autor: Ich
www.friedels-home.de
IE 5 IE 6 NN 4 NN 6 NN 7 MOZ 1 Opa5 Opa6 Opa7

Der Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function movelogo(){
  var a, e, f;
  a = eval(document.getElementById("iznzu"));
  e=(document.aaa.width*2 - document.ccc.width)/2;
  f=(document.aaa.height*2 - document.ccc.height)/2;
  a.style.left = e;
  a.style.top =f;
}
//-->
</script>
</head>
<body onload="movelogo()" onResize="javascript:location.reload()">
<div style="position: absolute; width:50%; height:50%; z-index:-2;">
  <img border="0" src="blind.gif" width="100%" height="100%" name="aaa">
</div>
<div id="iznzu" style="position: absolute; z-index:1">
  <img src="logo2.gif" width="150" height ="162" name="ccc">
</div>
<div id="asd" style="position: absolute; z-index:2">
  Hier kommt dein Seiteninhalt hin.
</div>
</body>
</html>

Der logische Aufbau

Fenstergröße

<div style="position: absolute; width:50%; height:50%; z-index:-2;">
  <img border="0" src="blind.gif" width="100%" height="100%" name="aaa">
</div>

Als erstes definieren wir ein DIV (natürlich im Body der Datei), das die halbe Breite und Höhe des Fensters hat. DIVs haben die praktische Eigenschaft, dass man sie mit der Eigenschaft z-index schichtweise übereinander anordnen kann. Dieses DIV bekommt einen negativen z-index. Dadurch liegt das Bild hinter dem normalen Seiteninhalt. In dieses DIV bauen wir ein blind.gif mit 100% Breite und 100% Höhe ein. Das ist ein Bild, das nur aus einem einzigen Pixel besteht. Und dieser Pixel ist transparent. Das ganze Bild ist also unsichtbar und hat nur 51 Byte. Dieses Bild soll natürlich keinen Rahmen haben, sonst wäre es ja sichtbar. Ausserdem muss es möglich sein, die Eigenschaften des Bildes durch ein Script ab zu fragen. Dazu bekommt das Bild einen Namen. Welchen Namen du hier einsetzt, spielt keine Rolle. Er darf auf dieser Seite aber nur ein mal verwendet werden. Ausserdem darf er nur aus Ziffern und Buchstaben bestehen und muss mit einem Buchstaben anfangen. Sonderzeichen und Umlaute sind nicht erlaubt. Ich habe den Namen "aaa" verwendet. Dieses Bild hat nur einen Zweck. Damit soll die Größe des Fensters bestimmt werden.

Das Logo

<div id="iznzu" style="position: absolute; z-index:1">
  <img src="logo2.gif" width="150" height ="162" name="ccc">
</div>

Als nächstes wird ein weiteres DIV eingebaut, das das Logo enthält. Wenn das Logo in Orginalgröße dargestellt werden soll, brauchst du die Breite und Höhe nicht an zu geben. Auch dieses DIV muss absolut positioniert werden, damit man es später durch das Script in die Mitte schieben kann. Es wäre praktisch, wenn man auch hier einen negativen z-index verwenden könnte. Dann würde das Bild immer hinter dem Seiteninhalt erscheinen. Das klappt auch mit IE 5, IE 6, OP 5, OP 6 und OP 7 einwandfrei. Aber NN 6, NN 7 und MOZ 1 stellen DIVs mit negativen z-index nicht dar. Sie sind dort unsichtbar. Das Problem lässt sich nur lösen, indem man diesem DIV einen kleinen, positiven z-index gibt und den eigentlichen Seiteninhalt in ein weiteres DIV mit größerem z-index setzt. Das DIV mit dem Logo bekommt eine Id damit dessen Eigenschaften vom Script verändert werden können. Ich habe die Id iznzu verwendet, du kannst aber eine beliebige andere Zeichenfolge verwenden. Die Regeln sind die selben, wie beim Namen des Bildes oben. Da auch die Breite und Höhe des Logos gebraucht wird, bekommt das Logo auch einen Namen. Im Beispiel habe ich ccc verwendet.

Das Script

<script type="text/javascript">
<!--
function movelogo(){
  var a, e, f;
  a = eval(document.getElementById("iznzu"));
  e=(document.aaa.width*2 - document.ccc.width)/2;
  f=(document.aaa.height*2 - document.ccc.height)/2;
  a.style.left = e;
  a.style.top =f;
}
//-->
</script>

Das Script kommt in den Head der Datei. Es wird eine Funktion namens movelogo() deklariert. Natürlich kannst du auch einen anderen Namen verwenden. In dieser Funktion werden zunächst, wie immer, die Variablen definiert.

Da das blind.gif den Namen aaa hat, ist document.aaa.width die Breite des blind.gif und document.aaa.height ist die Höhe des blind.gif. Entsprechend ist dann document.aaa.width*2 die Breite des Fensters und document.aaa.height*2 ist die Höhe des Fensters.

Das Logo hat den Namen ccc. Also ist document.ccc.width die Breite des Logos und document.ccc.height ist die Höhe.

Wenn wir von der gesamten Fensterbreite die Breite des Logos abziehen und das Ergebnis durch 2 teilen, erhalten wir die Breite, die links und rechts vom Logo frei bleiben. Die Position eines Objekts (in diesem Fall das DIV mit dem Logo) wird immer festgelegt, indem man den Abstand der linken, oberen Ecke des Objekts zur linken, oberen Ecke des Bezugsobjekts (in diesem Fall der Body der Seite) angibt. Die waagerechte Position ist also (document.aaa.width*2 - document.ccc.width)/2; und wird in der Variablen e gespeichert. Analog dazu ist die senkrechte Position f=(document.aaa.height*2 - document.ccc.height)/2;,

Mit a = eval(document.getElementById("iznzu")); wird das Objekt mit der Id iznzu in der Variablen a gespeichert. Dieses Objekt ist das DIV, das das Logo enthält. a.style.left ist also die horizontale Position des Logos. Und der wird der Wert e zugewiesen. Genau so wird mit a.style.top =f; die senkrechte Position festgelegt. Das Logo ist jetzt also genau in der Mitte des Fensters.

Aufrufen der Funktion

<body onload="movelogo()" onResize="javascript:location.reload()">

Die Funktion movelogo() wurde im Head nur deklariert. Sie kann jetzt also an beliebiger Stelle aufgerufen werden. Natürlich soll das Logo gleich beim Seitenaufbau in der Mitte erscheinen. Aber das Script kann natürlich die Größe des blind.gif erst bestimmen, nachdem es vollständig dargestellt wurde. Das gleiche gilt für das Logo. Das Script darf also erst gestartet werden, wenn die Seite vollständig geladen ist. Dass erreicht man mit dem Eventhandler onload="movelogo()" im Bodytag.

Damit auch nach einer Änderung der Fenstergröße das Logo in der Mitte ist, wird die Seite einfach nach jeder Größenänderung neu geladen. Das Erreicht man mit onResize="javascript:location.reload()".


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