Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Reyals

Imagens randômicas com fade

Por , em Javascript

Recommended Posts

Reyals    0

Reyals
Postado

Pessoal. Alguém conhece um script que ao carregar o site, uma determinada imagem "A" fica alterando para imagem "B", e essa imagem "B", volta para a "A" num intervalo de alguns segundos. E esse efeito de alterar deve ser feito com fade. igual a este site:www.ufu.brObrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Oi, tudo bom?

Eu abri o codigo que tem na página e achei muito complicado...

Aí eu fiquei quebrando a cabeça aqui e consegui fazer um mais simples mas acho que não é tão estavel quanto o outro.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    <title>teste</title>    <script>      fadeValue = 0;      vis = true;      function trocaImagem() {        wait=100;        if (vis) {          document.getElementById("divImg").filters.alpha.opacity=fadeValue;           fadeValue += 10;        } else {          document.getElementById("divImg").filters.alpha.opacity=fadeValue;           fadeValue -= 10;        }          if (fadeValue == 100) { vis = false; wait=5000; }        if (fadeValue == 0) { vis = true; wait=5000; }          setTimeout('trocaImagem()',wait);      }    </script>  </head>  <body onLoad="trocaImagem();" leftmargin="0" topmargin="0">    <img id="imgBase" src="1oa.gif" width="122" height="79">      <div id="divImg" style="position:absolute; filter:alpha(opacity=0); width:122px; height:79px; z-index:1; left: 0px; top: 0px;">      <img id="imgFade" name="imgFade" src="2oa.gif" width="122" height="79">    </div>  </body></html>

 

Tópicos a serem observados:

1- A imagem de fade fica dentro de um div e este div fica sobre a imagem normal

2- Só vai funcionar se a sua imagem de fade estiver dentro do div com nome de divImg e no style deve conter filter:alpha(opacity=0);

3- A pausa está com um valor de 5 segundos. Para alterar, altere a variavel wait.

4- Na tag body, deve haver onLoad="trocaImagem();"

 

Abraços =)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito