Hintergrund
alex
- javascript
0 Utz Grimminger0 alex
0 alex
Wenn ich das Hintergrundbild auf volle Groesse maximiere und in der html-datei noch ein paar Bilder im Kreis rotieren lasse, dann tritt der Effekt ein, dass das Hintergrundbild "wackelt". Kann das irgendwer abstellen?
Hier der Quellcode:
########### bgresize.js zum vergroessern des Hintergrundbildes####
NS4=(document.layers);
IE4=(document.all);
ver4=(NS4 IE4);
scaleWidth = false;
scaleHeight = true;
function makeIm() {
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<DIV ID=elBGim"
+ " STYLE='position:absolute;left:"+pos+";top:0;z-index:-1'>"
+ "<IMG NAME='imBG' BORDER=0 SRC="+imSRC;
if (scaleWidth) imStr += " WIDTH="+winWid;
if (scaleHeight) imStr += " HEIGHT="+winHgt;
imStr += "></DIV>";
document.write(imStr);
}
###############html-datei mit rotierenden bildern ###############
<html><BODY BGCOLOR="#000000" onload=initObjects()>
<SCRIPT language=javascript src="bgresize.js"></script>
<SCRIPT LANGUAGE="JavaScript1.2">
imSRC = "../hintergrund/bild.jpg"; x=screen.height/384; pos=screen.width-x*334-115; makeIm();
</SCRIPT>
<SCRIPT language=JavaScript>
var r = 160; // radius
var xoff = 180; // x offset
var yoff = 170; // y offset
var pi = Math.PI; // get pi
var inc = pi / 45; // degrees per rotation cycle
var objects; // objects to be rotated
var pos; // position for objects
function initObjects() {
objects = new Array(); // define your objects
objects[0] = document.all.fly1.style;
objects[1] = document.all.fly2.style;
objects[2] = document.all.fly3.style;
objects[3] = document.all.fly4.style;
pos = new Array();
pos[0] = 0;
for (i = 1; i < objects.length; i++) {
pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));
}
rotateObjects();
}
function rotateObjects() {
for (i = 0; i < pos.length; i++) {
pos[i] += inc; objects[i].visibility = "visible";
objects[i].left = (r * Math.cos(pos[i])) + xoff
objects[i].top = (r * Math.sin(pos[i])) + yoff;
}
setTimeout ("rotateObjects()", 75);
}
</SCRIPT>
<DIV id=fly1 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
<DIV id=fly2 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
<DIV id=fly3 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
<DIV id=fly4 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
</BODY></HTML>
Hi Alex, (<-- schön, so ne Anrede, nicht?)
sag mal, kann es sein, dass Deine "rotierenden Bilder" ab und an ein bisschen über das sichtbare Fenster hinausgehen? Dass damit automatisch die Fenstergröße verändert wird und Deine bgresize.js anspringt, die die Größe des Hintergrundbildes dem kurzzeitig vergrößerten Fenster anpasst? Und das dann halt wie Wackeln aussieht?
Wenn ja: dann bau ne Abfrage ein, dass bgresize.js nur beim Start des Ganzen "zuschlägt" und nicht auf Veränderungen der Fenstergröße reagiert.
Grüße,
Utz (<-- schön, so ein Gruß, nicht?)
Hi Alex, (<-- schön, so ne Anrede, nicht?)
sag mal, kann es sein, dass Deine "rotierenden Bilder" ab und an ein bisschen über das sichtbare Fenster hinausgehen? Dass damit automatisch die Fenstergröße verändert wird und Deine bgresize.js anspringt, die die Größe des Hintergrundbildes dem kurzzeitig vergrößerten Fenster anpasst? Und das dann halt wie Wackeln aussieht?
Wenn ja: dann bau ne Abfrage ein, dass bgresize.js nur beim Start des Ganzen "zuschlägt" und nicht auf Veränderungen der Fenstergröße reagiert.
Grüße,
Utz (<-- schön, so ein Gruß, nicht?)
Werd ich gleich mal überprüfen, danke für den Tip. Ich hab aber die Befürchtung, da ich das Teil im Voll-
bild laufen lasse, daß es an irgendetwas anderes liegen muß. Trotzdem werde ich das nochmal genauer
checken...
bye
.
.
.
<DIV id=fly1 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
<DIV id=fly2 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
<DIV id=fly3 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
<DIV id=fly4 style="POSITION: absolute"><img src="stuff/01.jpg"></DIV>
OK, für alle die es interessiert.
Ich hab's selbst noch geknackt, hier die Lösung:
In den oberen style definitionen einfach die breite des bildes mit width: spezifizieren.
bye