Fading Opacity and Sequencing Problem Here

Okay, so I figured out one problem I was having with this code and fixed that, but now I am hitting a snag with two other problems.

The basic idea is that there are three images I want to fade in and out in a sequential order. For the time being, I am working solely with alpha opacity (will be adding code for FF in the future) and was pretty sure I had it worked out that one image would fade out while the next image faded in. Unfortunately it is not doing what it is supposed to and instead of fading from the first image to the next, it is snapshotting from the first to the second. Furthermore, it doesn't seem to be going to the third image at all. I am not getting any error messages from the script, but I am at a complete loss as to why it isn't preforming the fade function or continuing through the sequential order. Any hints on which direction I should go (or for that matter, anyone willing to point out a blatant error on my part) would be welcomed. I've highlighted the part of the code that doesnt seem to be working as it should.



<script type="text/javascript" charset="ISO-8859-1">
<!--
var allimgs=new Array("desertbg2.jpg","illyanaone.jpg","illyanatwo.jpg","illyanatre.jpg","temple.gif","momglyph.gif","momnonglyph.gif","roeglyph.gif","roenonglyph.gif","totmglyph.gif","totmnonglyph.gif")
var imgload=new Array()
var whichimg=new Array("illypic1","illypic2","illypic3")
var currentimg=0
var nextimg=1
var fade = new Array(100,0,0)

for (pl=0;pl<allimgs.length;pl++)
{
imgload[pl]=new Image()
imgload[pl].src=allimgs[pl]
}

function initializeview()
{
document.getElementById("illypic1").filters.alpha.opacity=fade[0]
document.getElementById("illypic2").filters.alpha.opacity=fade[1]
document.getElementById("illypic3").filters.alpha.opacity=fade[2]
setTimeout("startrotation()",3000)
}

function startrotation()
{
for (fr=0;fr<20;fr++)
{
fade[currentimg]=fade[currentimg]-10
fade[nextimg]=fade[nextimg]+10
document.getElementById(whichimg[currentimg]).filters.alpha.opacity=fade[currentimg]
document.getElementById(whichimg[nextimg]).filters.alpha.opacity=fade[nextimg]
}
if (nextimg=2)
{
nextimg=0
}
else
{
nextimg=nextimg+1
}
if (currentimg=2)
{
currentimg=0
}
else
{
currentimg=currentimg+1
}
setTimeout("startrotation()",3000)
}
-->
</script>

Well, I managed to fix the sequencing problem but I am still running into difficulties with the opacity. If anyone has any clue please send it my way, here is the updated code where I am having the problem.


function fadeimg()
{
document.getElementById(whichimg[nextimg]).style.visibility="visible"
for (i=1;i<11;i++)
{
fade[currentimg]=100-(10*i)
fade[nextimg]=0+(10*i)
document.getElementById(whichimg[currentimg]).filters.alpha.opacity=fade[currentimg]
document.getElementById(whichimg[nextimg]).filters.alpha.opacity=fade[nextimg]
}
document.getElementById(whichimg[currentimg]).style.visibility="hidden"
setTimeout("rotateimg()",3000)
}

So nobody had any clue on this? Ah well, guess it is back to the old drawing board again.

Try something on these lines


<script type="text/javascript">
<!--
var allimgs=new Array("desertbg2.jpg","illyanaone.jpg","illyanatwo.jpg","illyanatre.jpg","temple.gif","momglyph.gif","momnonglyph.gif","roeglyph.gif","roenonglyph.gif","totmglyph.gif","totmnonglyph.gif")
var imgload=new Array()

for (pl=0;pl<allimgs.length;pl++){
imgload[pl]=new Image()
imgload[pl].src=allimgs[pl]
}

function initializeview(){
setTimeout("startrotation()",1000)
}

lastimg=1
nextimg=2
step=10
moz=document.getElementById&&!document.all
hm=0
timer=null

function startrotation(){
clearTimeout(timer)

if(!moz){
document.getElementById("illypic"+lastimg).filters.alpha.opacity+= -step
document.getElementById("illypic"+nextimg).filters.alpha.opacity+= step
}
else{
document.getElementById("illypic"+lastimg).style.MozOpacity-=(step/100)

hm+=step/100
document.getElementById("illypic"+nextimg).style.MozOpacity=hm-0.1
}

if(!moz){
if(document.getElementById("illypic"+lastimg).filters.alpha.opacity<=0){
document.getElementById("illypic"+lastimg).filters.alpha.opacity=0
lastimg=nextimg
nextimg++
if(nextimg==4){
nextimg=1
}
}

}
else{

if(document.getElementById("illypic"+lastimg).style.MozOpacity<0){
document.getElementById("illypic"+lastimg).style.MozOpacity=0
lastimg=nextimg
nextimg++
hm=0
if(nextimg==4){
nextimg=1
}
}

}


timer=setTimeout("startrotation()",50)
}
setTimeout("initializeview()",1000)
-->
</script>


<img id="illypic1" src="desertbg2.jpg" style="filter:alpha(Opacity=100);-moz-opacity:1">
<img id="illypic2" src="illyanaone.jpg" style="filter:alpha(Opacity=0);-moz-opacity:0">
<img id="illypic3" src="illyanatwo.jpg" style="filter:alpha(Opacity=0);-moz-opacity:0">

Thanks Mr. J. Will give it a shot and see if that gets me to where I want. I solved the problem in IE but want to make sure it is cross browser compatable. Looks like your code might solve the problem. Will let you know the results the next chance I get.