nicht angemeldet
CrossBrowser Positionierung von grafischen Objekten als Hintergrundbilder
Das Problem ist das Zentrieren von grafischen Elementen.
Ich habe in meinem HTML- Dokument eine Tabelle die horizontal zentriert und mit einer festen Pixelgröße zum oberen Bildschirmrand liegt, und MouseOver- Buttons beinhaltet. Über diese Tabelle soll eine transparente GIF- Animation ( ein Punkt wandert entlang einer Linie rauf und runter) mit Hilfe einer neuen Ebene zentriert gelegt werden und soll sich als Endlosschleife bewegen, ohne das die MouseOver- Funktionalität der darunterliegenden Buttons beeinträchtigt wird.
Mit dem unten beschriebenen Script wird die GIF- Animation schön immer in der Mitte des Bildschirms positioniert, egal wie groß dieser ist.
Wie kann ich Grafiken aber so positionieren, dass diese nur in horizontaler Richtung zentriert werden (auch bei veränderlicher Bildschirmgröße), die vertikale Position zum oberen Bildschirmrand aber immer das Gleiche bleibt - nicht vertikal mittig sondern mit einem festen Pixelabstand zum oberen Bildschirmrand fixiert - also ein Mischung von % und px- Werten.
Hat da jemand eine Idee?
Hier ist das ganze beschrieben:
<BODY BGCOLOR="#FFFFFF" ONLOAD="bglayer()"><STYLE TYPE="text/css">
<!--
#Bild
{
position: absolute;
visibility: hide;
z-index: 1;
}
#Text
{
position: absolute;
visibility: show;
z-index: 2;
}
-->
</STYLE> <SCRIPT LANGUAGE="JavaScript">
<!-- ... Quelle Dummy ...
function bgcenter(){}
function bglayer(){}
// ... Ende Dummy ... -->
</SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2">
<!-- ... Quelle Beispiel ...
// Browserabhaengige Informationen
var nn = (navigator.appName == "Netscape") ? true : false
// Bildinformationen
var imgURL = "bild.gif"
var imgWidth = 180
var imgHeight = 50
// Zentrieren des Hintergrundbilds
function bgcenter()
{
with(nn ? document.Bild : Bild)
{
if(nn)
{
top = Math.floor((innerHeight - imgHeight) / 2)
left = Math.floor((innerWidth - imgWidth) / 2)
width = imgWidth
height = imgHeight
}
else
{
style.top = Math.floor((Number(document.body.clientHeight) - imgHeight) / 2)
style.left = Math.floor((Number(document.body.clientWidth) - imgWidth) / 2)
style.width = imgWidth
style.height = imgHeight
}
}
}
// Initialisierung der Darstellung
function bglayer()
{
with(nn ? document.Bild : Bild)
{
if(nn)
with(document)
{
/*en("text htm*/;
write("<IMG SRC="" + imgURL + "" " +
"WIDTH=" + imgWidth + " " +
"HEIGHT=" + imgHeight + " ALT="">")
close()
}
else
innerHTML = "<IMG SRC="" + imgURL + "" " +
"WIDTH=" + imgWidth + " " +
"HEIGHT=" + imgHeight + " ALT="">"
bgcenter()
visibility = true
}
}
// -->
</SCRIPT>
<DIV ID="Bild"></DIV>
<DIV ID="Text">
<P>Das Hintergrundbild ändert seine Position, wenn das Fenster in der
Größe verändert wird.</P> </DIV>
</BODY>
-
Moin,
mein persöhnlicher Faforit, Doc Ozone, hat diese "Spielerei" vor einiger Zeit eingesetzt. Du findest bei ihm im Archiv die umgesetzten Sachen (SPOT...)
Ein Auszug aus der Initialisierung der Seite:<!--DocOzone's Javascript code, copyright 1998
// Feel free to borrow and modify this javascript,
// but be sure leave this credit in the source!
// (Please note, the CODE, not the images! :)
// Your pal, -Dr. Thaddeus Ozone-
// http://www.ozones.com/
//window.onerror=null;window.onResize="history.go(0); setup()";
netscape = (document.layers) ? 1:0
goodIE = (document.all) ? 1:0
var layerstart = "document.all.";
var styled = ".style.";
var count = 0;
var XCpos = 10;
var YCpos = 10;function setup() {
if (goodIE) {
var layerstart = "document.all.";
var styled = ".style.";
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight; }
else if (netscape) {
windowWidth = window.innerWidth-16;
windowHeight = window.innerHeight;
var layerstart = "document.";
var styled = ".";}
var centertop = ((windowHeight)/2);
var centerleft = ((windowWidth)/2);
}Was du mit Var center xxx machst ist ja deine Sache 8-)
Bye Guido
-
Hallo!
Soweit ich dein Problem beurteilen kann:
#Bild
{
position: absolute;
top:100px; /*Wert beliebig*/
visibility: hide;
z-index: 1;
}if(nn)
{// diese Zeile brauchst du nicht top = Math.floor((innerHeight - imgHeight) / 2)
left = Math.floor((innerWidth - imgWidth) / 2)
width = imgWidth
height = imgHeight
}
else
{//und diese auch nicht style.top = Math.floor((Number(document.body.clientHeight) - imgHeight) / 2)
Ich denke das wars.
Grüße
Thomas -
Danke Jungs, es funktioniert WUNDERBAR !!!!