nicht angemeldet
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>