[Resolvido] mudar src da <img> no hover

[dzanella 0]

Olá pessoal...

estou com mais uma dúvida no CSS e com certeza vcs poderão me ajudar...

tenho o seguinte HTML:

<div class="icone">
        <a href="Clientes.aspx"><img src="Images/icon_clientesBW.png" class="botao" border="none" id="btClientes"/></a>
        <br />
        Clientes
     </div>

 

gostaria de saber se tem como mudar a imagem no hover...

 

Pra vcs entenderem melhor, tenho a mesma imagem em cores e em BP e queria que qdo o mouse passasse sobre a <img> ela ficasse colorida, caso contrario, em PB...

 

e aí? alguma solução?

[Ted k' 126]

você pode fazer isso jogando a imagem no css, e jogar o hover na div:

 

http://www.w3schools.com/css/pr_pseudo_hover.asp

[dzanella 0]

já fiz de todas as formas abaixo e nenhuma funcionou:

#btClientes:hover
{
src : url('Images/icon_clientes.png');
}

==================================================

#btClientes:hover img
{
src : url('Images/icon_clientes.png');
}

==================================================

.botao #btClientes:hover img
{
src : url('Images/icon_clientes.png');
}

==================================================

.icone #btClientes:hover img
{
src : url('Images/icon_clientes.png');
}

[Ted k' 126]

não... olha só:

 

HTML

<a href="Clientes.aspx" id="btClientes">Clientes</a>

 

CSS

#btClientes {float: left; margin: 0; padding: 0; width: 100px; height: 100px; background: url(Images/icon_clientes.png); text-indent: -5000px;}
#btClientes:hover {background: url(Images/icon_clientes_OVER.png);}

[Evandro Oliveira 331]

1. Javascript embarcado

<img src="Images/icon_clientesBW.png" class="botao" border="none" id="btClientes" onmouseover="this.src='enderecodaimagemcolorida.jpg'" onmouseout="this.src='enderecodaimagempb.jpg'" />

 

2. Javascript em camadas

var img = document.getElementById('btClientes');
img.mouseover = function(){ this.src = 'enderecodaimagemcolorida.jpg'; }
img.mouseout = function(){ this.src = 'enderecodaimagempb.jpg'; }

 

3. Sobreposição de imagens

<a href="#"><img src="1.jpg" height="10" width="30" alt="link"></a>

a {
   background: url('2.jpg') top left no-repeat;
   display: inline-block;
}

a:hover img { visibility: hidden; }

 

4. CSS Sprites

http

://www.alistapart.com/articles/sprites

http

://maujor.com/tutorial/css-sprites.php

http

://imasters.com.br/artigo/6041/css_sprite

 

Minhas recomendações vão do 4 ao 1. Na contramão vem a facilidade de serem implantadas. Enquanto a alternativa 1 lhe requer apenas alguns caracteres a mais de marcação, a 4 pode vir a necessitar até mesmo de um redesenho nas imagens. A seu favor, as alternativas mais difíceis levam consigo a garantia de bom funcionamento na maioria dos cenários (javascript desabilitado, imagens desabilitadas, css alternativo, etc).

[dzanella 0]

usando background muda, mas aki não obedeceu o tamanho de 100px X 100px... e eu não queria que ficasse escrito nada em cima do icone, apenas abaixo, como no codigo anterior...

tem como fazer isso e definir o tamanho do <a>??

[Evandro Oliveira 331]

Leia, você tá precisando. E muito!

http://w3schools.com/css/

[dzanella 0]

Resolvido...

o primeiro método do Evandro já supriu minhas necessidades...

 

Valeu Evandro!!!

vou dar uma olhada nos links q você passou!