Trocar imagem com :hover

[Sauloeust81 0]

Boa tarde galera estou fazendo um site no formato Web 2.0 e estou tendo dificuldade em

colocar um hover em uma imagem como faço isso ?

 

Obrigado!!!

[João Prado 64]

explique melhor o que quer

 

quer trocar a imagem quando passar o mouse?

 

então coloque ao invés de uma imagem direto coloque algum elemento com a ou listas e coloque a imagem como background

 

depois insira algo mais ou menos assim no seu css

 

#imagem li:hover{

aqui você coloca as alterações para acontecer quando passar o mouse

}

[Thiago Retondar 18]

Título do tópico alterado:

 

Olá http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Trocar imagem com :hover

 

Sauloeust81, seja bem vindo ao fórum. ^_^

 

Sobre sua dúvida: o que não conseguiu fazer? Utilizou :hover? É uma imagem que quer trocar ou um background?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Guilherme Oderdenge 42]

Boa noite, Sauloeust81!

 

Você nem sabe quanto problema eu já tive com relação ao hover, mas, acredito que sua dúvida seja fácil.

Da maneira que eu interpretei, este problema se resolve da seguinte forma:

 

Digamos que você tenha o seguinte objeto em imagem:

<img src="imagens/minha_imagem.jpg">

Adicione uma classe a ela:

<img src="imagens/minha_imagem.jpg" class="minhaimagem">

No css, você pode fazer o seguinte:

.minhaimagem:hover{
background-image: url(imagens/minha_imagemHover.jpg);
}

Ele irá interpretar que, ao passar o mouse, a imagem seja substituída para uma outra imagem, que no caso é o minha_imagemHover.jpg.

 

• Lembre-se: você pode usar tanto class quanto id para identificar o elemento do objeto;

 

• Dica: procure sempre identificar os tamanhos e/ou quaisquer identificação de qualquer objeto para que sua página carregue mais rapidamente, ou seja, ao invez de utilizar no objeto o elemento "background", use "background-image" e isso serve para qualquer elemento que possa ser "abreviado".

 

Abraço!

[Paulo de Tarso F. M. 24]

Meu caro Kaminari, a troca de imagens não funciona dessa maneira que propôs... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

A troca de imagens realizada da maneira que você colocou só é possível via JavaScript, e não com CSS. Com CSS só é possível a troca de imagens aplicadas como background, e não imagens inseridas com a tag <img>, por meio da técnica conhecida como CSS Sprites.

 

Quando for postar algo, tenha certeza de que a sugestão realmente funcione...

[Professor Kaíque Luan 0]

Boa tarde, desculpa está ressuscitando o tópico.

 

Encontrei uma maneira simples de fazer a troca de imagem com CSS.

<div id="redessociais">
        <a href="#"><img src="images/none.png" id="facebook"></a>
        <a href="#"><img src="images/none.png" id="twitter"></a>
    </div>

No código acima eu apenas fiz a referencia na tag img para uma imagem transparente, isso mesmo, não tem nada ali no final das contas apenas uma imagem transparente.

#facebook{
        background-image:url("images/facebook_off.png");    
    }    
        #facebook:hover{
        background-image:url("Images/facebook_on.png");
    }
    
    #twitter{
        background-image:url("images/twitter_off.png");
    }
        #twitter:hover{
            background-image:url("images/twitter_on.png");    
        }

No Código acima que acontece a mágica.

 

Vou detalhar mais um pouco.

 

Aqui está a imagem normal:

 

 

 

E por fim a imagem com o pseudo Hover:

 

 

Resultado, vamos ter uma troca de imagens com o css.

[rikaschmitt 54]

Boa tarde, desculpa está ressuscitando o tópico.

 

Encontrei uma maneira simples de fazer a troca de imagem com CSS.

<div id="redessociais">
        <a href="#"><img src="images/none.png" id="facebook"></a>
        <a href="#"><img src="images/none.png" id="twitter"></a>
    </div>

No código acima eu apenas fiz a referencia na tag img para uma imagem transparente, isso mesmo, não tem nada ali no final das contas apenas uma imagem transparente.

#facebook{
        background-image:url("images/facebook_off.png");    
    }    
        #facebook:hover{
        background-image:url("Images/facebook_on.png");
    }
    
    #twitter{
        background-image:url("images/twitter_off.png");
    }
        #twitter:hover{
            background-image:url("images/twitter_on.png");    
        }

No Código acima que acontece a mágica.

 

Vou detalhar mais um pouco.

 

Aqui está a imagem normal:

 

 

 

E por fim a imagem com o pseudo Hover:

 

 

Resultado, vamos ter uma troca de imagens com o css.

 

Se for assim, nem coloque a <img> transparente, que é inútil. Coloca um "display block" no <a> e pronto.

 

E pra um efeito simples desse, de "opacidade", dá para usar uma única imagem e brincar com a "opacity" no hover.

[Professor Kaíque Luan 0]

 

Se for assim, nem coloque a <img> transparente, que é inútil. Coloca um "display block" no <a> e pronto.

 

E pra um efeito simples desse, de "opacidade", dá para usar uma única imagem e brincar com a "opacity" no hover.

 

 

a tag imagem é necessário pois vamos estár lidando com o link individual em cada imagem, e se eu mexer na opacidade vou estar afetando toda a imagem e não a parte do centro do monitor dando o efeito de TV desligada e ligada...