[Resolvido] Aplicar efeito a:hover em imagens

[Kher 2]

Gostaria de ajuda para aplicar um efeito a:hover no código abaixo de modo que quando o mouse passar em cima do ícone a imagem mude para a posição "bottom". O que me confunde são os códigos php que não sei como poderei aplicar o efeito. O código está ssim:

 

<div id="topmenu">
<?php
$contact = get_option('contact_link');
$imprint = get_option('imprint_link');
?>

<a href="/"><img src="<?php bloginfo('template_directory'); ?>/images/home.gif"></a>
<?php if (!empty($contact) && $contact==0) {
?>
<a href="<?php echo $contact;?>"><img src="<?php bloginfo('template_directory'); ?>/images/contact.gif"></a>
<?php
}
?>
<a href="http://www.twitter.com/ampliatta"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.gif"></a>
<a href="http://www.facebook.com/ampliatta"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.gif"></a>
<?php if (!empty($imprint) && $imprint==0) {
?>
<a href="<?php echo $imprint;?>"><img src="<?php bloginfo('template_directory'); ?>/images/imprint.gif"></a>
<?php
}
?>
</div>

 

 

A id #topmenu é:

 

#topmenu {
margin-top: 20px;
float: right;
clear: both;
}

 

Eu tentei criar o código abaixo para o ícone home por exemplo mas não deu certo:

#topmenu a {background:url(images/home.gif) no-repeat left top}
#topmenu a:hover {bacground-position:left bottom;}

 

Será que além dessa CSS eu deveria colocar algo mais no código da página?

[William Bruno 1501]

pq não deu certo ? oq aconteceu de errado ?

[Kher 2]

Não sei porque não funcionou, precisaria algum código mais na página? No código acima eu digitei "bacground" ao invés de "background", no entanto foi só aqui, no style está correto e não funcionou. Aparece a imagem duplicada no lugar ao invés de mostrar só a parte de cima e depois a parte de baixo no efeito hover.

[allex_carvalho 124]

#topmenu a {background:url(images/home.gif) no-repeat left top}

Está faltando um ; no fim desta linha.

[William Bruno 1501]

poste um link para o site, para verificarmos online oq acontece.

 

o caminho da imagem está correto ?

[_Leandro_ 0]

Pelo que vi você está querendo usar css-sprites....

Como que está a sua imagem? que dimensões tem?

Pode ser problema no posicionamento... ao invés de usar top e bottom, podes trabalhar com unidade ex: 0px e -20px no hover...

 

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[Kher 2]

Meu código tava faltando vírgula só aqui. A imagem é de 50x50 pixels (http://dl.dropbox.com/u/4195506/home.gif). O site ainda não está na rede para postar aqui, estou editando em servidor local. Tentei usar posições em pixels mas também não consegui o efeito de mudar o posicionamento

[William Bruno 1501]

ah ta.. agora vi o erro.

 

cara, ou você usa <img /> ou você usa background.. os 2 juntos dessa forma ai não faz sentido.

 

 

<a href="/">home</a>

e então o css que você fez, ai sim dá certo.

 

se você quiser usar uma tag <img /> dentro do <a>, ai você vai precisar de javascript para fazer a troca, e de arquivos de imagem diferentes.

[Kher 2]

se você quiser usar uma tag <img /> dentro do <a>, ai você vai precisar de javascript para fazer a troca, e de arquivos de imagem diferentes.

 

Ahhhh!!! Saquei! Vou refazer isso em CSS e simplicar as coisas então :D

Grato