(Resolvido) trocar imagens (onmouseover)

samantha · Fevereiro 14, 2009

Oi, tenho um controle image dentro de meu webform. Como faço para ao deixar o cursor do mouse em cima desse controle, fazer com que a cada 1 segundo troque de imagem, isso num total de 10 imagens e depois volte a imagem inicial e assim por diante.

Ah, e no evento onmouseout quero que independente da imagem que está carregada naquele momento, volte para a minha imagem definida inicialmente.

Se alguém puder me ajudar, agradeço!

Obrigada

kuroi · Fevereiro 15, 2009

samantha, isso ai é com javascript, não sei se da pra fazer alguma coisa com codigo .net a respeito disso, mas com javascript você faz facil.

tipo, com o codigo executado o objeto image vira uma tag img de html.

ai você faz uma funcao javascript q troca os enderecos da imagem. e no onmouseover você chama essa funcao (pode escrever no codigo do objeto asp:Image mesmo).

exemplo, pra mudar a imagem:

document.getElementById("id_do_objeto").src = "http://www.endereco.com/imagem.jpg";

pra voltar a imagem inicial, é so por esse codigo tb no onmouseout.

quanto a esperar 1 segundo, não sei, mas você pode pedir pro moderador mover esse tópico pra javascript q la devem te ajudar.

Jonathan Queiroz · Fevereiro 15, 2009

Para trocar a imagem a cada um segundo você deve utilizar as funções setTimeout e setInterval

Eu fiz uma galeria de imagens bem simples, com essas funções !

Link: http://scriptbrasil.com.br/forum/index.php?showtopic=129512

Se não conseguir entender o código ou tiver alguma sugestão, pode postar !

Obs.:

Vou pedir para que movam este tópico !

Aqui não é a área correta...

quintelab · Fevereiro 16, 2009

Movido .NET :seta: Ajax, JavaScript, XML, DOM

samantha · Fevereiro 17, 2009

Oi gente,

Obrigada pela dica, usei algumas funcionalidades que vocês me passaram, esquentei a mufa procurando por outras para simplificar exatamente aquilo que queria, e ficou desse jeito:

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var timer;

            function TrocarImagem(intImagem)
            {
                if (intImagem == 0)
                {
                     document.images["imagem"].src="Imagens/imagem_1.jpg";
                     clearTimeout(timer);
                }
                else if (intImagem == 1)
                {
                     document.images["imagem"].src="Imagens/imagem_2.jpg";
                     timer = setTimeout( "TrocarImagem(2)", 1000);
                }
                else if (intImagem == 2)
                {
                     document.images["imagem"].src="Imagens/imagem_3.jpg";
                     timer = setTimeout("TrocarImagem(3)", 1000);
                }
                else if (intImagem == 3)
                {
                    document.images["imagem"].src="Imagens/imagem_4.jpg";
                    timer = setTimeout("TrocarImagem(4)", 1000);
                }
                else if (intImagem == 4)
                {
                    document.images["imagem"].src="Imagens/imagem_5.jpg";
                    timer = setTimeout("TrocarImagem(5)", 1000);
                }
                else if (intImagem == 5)
                {
                    document.images["imagem"].src="Imagens/imagem_1.jpg";
                    timer = setTimeout("TrocarImagem(1)", 1000);
                }
            }
        </script>
    </head>
    
    <body id="Body1" runat="server">
        <img id="imagem" src="Imagens/imagem_1.jpg" alt="Imagem" style="border:0" onmouseover="TrocarImagem(1);" onmouseout="TrocarImagem(0);" />
    </body>
</html>

bjs meninos

Entrar

(Resolvido) trocar imagens (onmouseover)

Pergunta

samantha

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

kuroi

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

quintelab

Link para o comentário

Compartilhar em outros sites

samantha

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades