Hi there icthus123,
and a warm welcome to these forums. :agree:
Here is an example...
http://mysite.orange.co.uk/azygous/image_fade.html
...and here is the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fading images without flash</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#000;
color:#fff;
}
#container {
position:relative;
width:300px;
height:300px;
border:3px double #fff;
margin:100px auto;
}
#top {
position:absolute;
width:300px;
height:300px;
z-index:1;
}
#bot {
position:absolute;
width:300px;
height:300px;
z-index:0;
}
</style>
<script type="text/javascript">
var preloads=[];
var objt;
var objb;
var topop=100;
var botop=0;
var speed=75;
var topnum=0;
var botnum=1;
var test=0;
window.onload=function() {
objt=document.getElementById('top');
objb=document.getElementById('bot');
fadeout();
}
function fadeout() {
if(test==0) {
topop--;
botop++;
}
if(objt.filters) {
objt.style.filter='alpha(opacity='+topop+')';
objb.style.filter='alpha(opacity='+botop+')';
}
else {
objt.style.opacity=topop/100;
objb.style.opacity=botop/100;
}
if(topop==0){
topnum+=2;
if(topnum>preloads.length-1){
topnum=0; //if the number of images is odd change this value to 1;
}
objt.src=preloads[topnum].src;
test=1;
}
if(test==1){
topop++;
botop--;
}
if(topop==100){
botnum+=2;
if(botnum>preloads.length-1){
botnum=1; //if the number of images is odd change this value to 0;
}
objb.src=preloads[botnum].src;
test=0;
}
fader=setTimeout('fadeout()',speed);
}
function preload(){
for(i=0;i< arguments.length;i ++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[i];
}
}
preload('images/dog.jpg','images/ball_shad.jpg','images/banana.jpg','images/aaa.jpg','images/ten_quid.jpg','images/apple0.jpg','images/girl.jpg','images/clouds.jpg','images/grap.jpg','images/buddha.jpg');
</script>
</head>
<body>
<div id="container">
<img id="top" src="images/dog.jpg" alt=""/>
<img id="bot" src="images/ball_shad.jpg" alt=""/>
</div>
</body>
</html>