cross browser image transitions using CSS & Javascript

[1DMF]

Hi,

I've created a little script using the CSS3 filter option and Javascript to change images and create a transition effect.

Only I've found that the CSS3 filter is an IE only attribute.

The CSS forum suggested I ask you guys for a JS way of doing it, which confused me because I'm using JS.

So I'm hoping someone can advise how I keep my code but use the correct syntax / CSS3 attribute, effect, what ever, that is cross browser compatible.

The 'init_img_dissolve' function is called 'onload'

Many thanks.

1DMF

CSS...

.imgTrans{ 
    filter:revealTrans(duration=2,transition=3); 
    }

HTML...

<div id="dissolveIMG1"></div>

JAVASCRIPT...

// DISOLVING IMAGES //
var sponsorImages=new Array();
sponsorImages[0]=new Image();
sponsorImages[0].src = '/images/sponsor1.gif';

sponsorImages[1]=new Image();
sponsorImages[1].src = '/images/sponsor2.gif';

sponsorImages[2]=new Image();
sponsorImages[2].src = '/images/sponsor3.gif';

sponsorImages[3]=new Image();
sponsorImages[3].src = '/images/sponsor4.gif';

sponsorImages[4]=new Image();
sponsorImages[4].src = '/images/sponsor5.gif';

sponsorImages[5]=new Image();
sponsorImages[5].src = '/images/sponsor6.gif';

sponsorImages[6]=new Image();
sponsorImages[6].src = '/images/sponsor7.gif';

sponsorImages[7]=new Image();
sponsorImages[7].src = '/images/sponsor8.gif';

sponsorImages[8]=new Image();
sponsorImages[8].src = '/images/sponsor9.gif';

sponsorImages[9]=new Image();
sponsorImages[9].src = '/images/sponsor10.gif';
 
var img_index = new Array();
var img_tout = new Array();
var swapSpeed = 3500;

function init_img_dissolve(id){
    img_index[id] = 0;
    document.getElementById('dissolveIMG'+id).innerHTML = '<img id="sponsorIMG' + id + '" width="250" height="70" class="imgTrans" src="' + sponsorImages[img]index[id[/img]].src + '">';      
    img_tout = setTimeout("dissolve_IMG(" + id + ")",4500);
}
 
function dissolve_IMG(id){

	    img_index[id]++;
        if(img_index[id] == sponsorImages.length){
            img_index[id] = 0;
        }                
		if(document.getElementById('sponsorIMG'+id).filters){
		    document.getElementById('sponsorIMG'+id).filters[0].stop();        
	        document.getElementById('sponsorIMG'+id).filters[0].apply();
        }
        	        
	    document.getElementById('sponsorIMG'+id).src = sponsorImages[img]index[id[/img]].src;	        	        
	    if(document.getElementById('sponsorIMG'+id).filters){
		    document.getElementById('sponsorIMG'+id).filters[0].play();
        }		    
		img_tout[id] = setTimeout("dissolve_IMG(" + id + ")",swapSpeed);			                    
    
}

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts