[Resolvido] Alpha em imagem do IE e sem travar

[nakid.mkt 0]

Olá pessoal!

 

Tenho alfuns banners rotativos na home do meu site. É desses que milhares de sites possuem.

 

Achei melhor fazer em javascript ao invés de Flash. Teria funcionado muito bem se não fosse o meu probleminha com o IE.

 

o site já está no ar e é o www.cozinhaitabom.com.br (aliás, estão convidados a participar).

 

Abram com o IE e vejam que carroça! Era pra ser tão rápido quanto no direfox.

 

 

parte técnica:

 

Uso uma função chamada conta() para rodar os banners e essa função é rechamada a todo momento com o

 

setTimeout("conta()", 100);

 

dessa forma ela é executata 10x por segundo.

 

como quero usar um alpha + e alpha - progressivo na transição das imagens usei os:

 

document.getElementById("alpha").style.opacity = (alpha)/100; //para o firefox

document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')'; // para o IE

 

mas no ie fica lento como vocês viram

 

se eu retiro o

 

document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')'; volta a rodar rapidinho no IE, mas perco o efeito de transição.

 

 

Alguém sabe o que acontece?

 

 

segue abaixo o código todo da minha função caso queiram verificar:

 

//alpha ->variavel global que determina a transparencia da minha div.
//"alpha" -> id da minha div que recebe a imagem.
//contador -> variavel global quevairia de 500 a 400. De 500 a 400 alpha + na div. De 100 a 0 alpha - na div.
 


function conta() {
	
		
	if(contador == 0) {
		contador=500;
		
		document.getElementById("it"+i).style.display = '';
		document.getElementById("it"+i+'s').style.display = 'none';
		if (i==4)
			i=0;
		else 
			i++;
		document.getElementById("it"+i).style.display = 'none';
		document.getElementById("it"+i+'s').style.display = '';	

		
		document.getElementById('alpha').innerHTML='<a href="receita.php?rec_id='+rec_id[i]+'"><img src="fotos/receitas/f1/'+banner[i]+'" border="0" /></a>';			
	}
	
	
	if(contador > 0) {
		if (contador>400) {
			alpha+=5;
			document.getElementById("alpha").style.opacity = (alpha)/100;
			document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')';
		}
		if (contador<=100) {
			alpha-=5;
			document.getElementById("alpha").style.opacity = (alpha)/100;
			document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')';
		}	
		document.getElementById('nakid').value=alpha;
		contador -= 5;
		setTimeout("conta()", 100);
	}	
}

[nakid.mkt 0]

Consegui resolver mais uma vez com a programação orientada a gambiarras...

 

 

o problema não era a interação

 

document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')';

 

e

 

setTimeout("conta()", 100);

 

 

O problema é que para funcionar bem o ie precisa ter as imagens rotativas carregadas dentro da página.

Criei uma div que contém todas as cinco imagens que circular. Para elas não ficarem aparecendo no fundo do site carreguei com largura e altura =0 e pronto! Mágica! Funcionando rapidinho!

 

Se alguém tiver o mesmo problema, tá ai uma solução

 

abraço!