nicht angemeldet
Hallo zusammen,
ich hab ein kleines Script gebastelt, das Bilder überblenden kann und bei Internet Explorer >= 4.0 und Firefox >= 1.5 funktioniert.
Falls es jemand verwenden möchte, nur zu!
<html>
<head>
<style type="text/css">
<!--
#overlay { position:absolute; top:10px; left:100px; width:900px; height:150px; z-index:4; }
#animation1 { position:absolute; top:10px; left:100px; width:900px; height:150px; z-index:2; }
#animation2 { position:absolute; top:10px; left:100px; width:900px; height:150px; z-index:3; }
#status { position:absolute; top:200px; left:100px; width:900px; height:150px;}
-->
</style>
<script type="text/javascript">
// config stuff
var image_time = 3000; // show the images for X ms time
var fade_time = 1000; // fade animation takes X ms time
var fade_steps = 10; // devide fade animation into X steps
// images to show
var images = new Array();
var i = 0;
images[i] = new Image(); images[i].src = "images/image1.jpg"; i++;
images[i] = new Image(); images[i].src = "images/image2.png"; i++;
images[i] = new Image(); images[i].src = "images/image3.jpg"; i++;
f = 0;
i = images.length-1;
blank = new Image();
blank.src = "images/blank.png";
var status;
var animation1;
var animation2;
var fadein;
var fadeout;
var isMozilla = false;
var isIE = false;
var init = false;
function init_function() {
status = document.getElementById("status").firstChild;
animation1 = document.images["animation1"];
animation2 = document.images["animation2"];
fadein = animation1;
fadeout = animation2;
if (animation1.style.MozOpacity!=null)
isMozilla = true;
else if (animation1.style.filter != null) {
isIE = true;
}
}
function setAlpha(element, value) {
if (isMozilla) {
element.style.MozOpacity = value/100;
}
if (isIE) {
element.style.filter = "Alpha(opacity="+value+")";
}
}
function Animation() {
if (!init) {
init = true;
init_function();
}
// change images?
if (f == fade_steps) {
i = (i+1)%images.length;
f = 0;
// find correct image order
if ((i % 2) == 0) {
fadein = animation1;
fadeout = animation2;
}
else {
fadein = animation2;
fadeout = animation1;
}
if (isIE || isMozilla) {
fadeout.src = images[(i+3)%3].src;
fadein.src = images[(i+4)%3].src;
// change alpha values
setAlpha(fadein, 0);
setAlpha(fadeout, 100);
/*status.nodeValue += "----------------------------------------------\r\n"+
"f="+f+"\r\n"+
"i="+i+"\r\n"+
"fade in: "+fadein.src+" "+fadein.style.MozOpacity+"\r\n"+
"fade out: "+fadeout.src+" "+fadeout.style.MozOpacity+"\r\n";*/
//status.nodeValue += ((i+3)%3)+" => "+((i+4)%3)+"\r\n";
window.setTimeout("Animation()", image_time);
return;
}
}
else {
// continue/start fading...
f++;
// change alpha value
var value = f*(100/fade_steps);
setAlpha(fadein, value);
setAlpha(fadeout, 100-value)
/*status.nodeValue += "f="+f+"\r\n"+
"i="+i+"\r\n"+
"fade in: "+fadein.src+" "+fadein.style.MozOpacity+"\r\n"+
"fade out: "+fadeout.src+" "+fadeout.style.MozOpacity+"\r\n";*/
window.setTimeout("Animation()", fade_time/fade_steps);
}
}
window.setTimeout("Animation()", 3000)
</script>
</head>
<body bgcolor="#000000">
<img id="animation1" src="images/image1.jpg" />
<img id="animation2" src="images/image3.jpg" />
<pre id="status" style="color: white;"> </pre>
</body>
</html>