Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde,
Estou montando um site onde a maioria dos botões são feitos com imagens, e para dar um efeito melhor usei o famoso "OnMouseOver", funciona de boa, porém quando a pessoa entrar no site a imagem "out" só carrega quando ela coloca o cursos em cima do botão. Em conexões mais lentas a segunda imagem pode nem chegar a carregar e isso seria um problema, pois ficaria aquele quadrado sem imagem e o efeito não funcionaria.
Pensando nisso, gostaria de saber se existe uma maneira de fazer o "OnMouseOver" com a mesa imagem, ou seja, seria uma imagem contendo o "in" e o "out" portanto a imagem que ficaria aparecendo no botão seria a primeira parte (in) e quando a pessoa passa o mouse a imagem simplesmente troca de posição e então aparece a segunda parte (out). Isso é possível?
Tenho quase certeza de que já vi um tutorial desses explicando como se faz mas sem querer apaguei o histórico aqui e nunca mais consegui encontrar, rs.
Se não for possível isso, gostaria de saber então como faço um "preload" das imagem "out" para que assim elas carreguem sem a pessoa ter que passar o mouse em cima.
Então é isso pessoal, aguardo resposta, e fico muito feliz de fazer parte do melhor fórum para tirar as minhas dúvidas nessa parte.
Obrigado à todos!
Olá Bruno.
Existe uma forma muito prática usando apenas CSS.
Imagine que você tenha uma imagem com um X no tamanho de 30px por 30px na cor vermelha, e a mesma imagem na cor preta. Onde a preta deverá ser exibida com o mouse sobre a imagem.
Você deverá criar uma única imagem de 30px por 60px, com as duas imagens juntas, uma abaixo da outra.
Então sua div que carregará a imagem ficará. Exemplo:
#menu-imagem-botao{
width: 30px;
height: 30px;
cursor: pointer;
background: url(../img/bt_next.png) no-repeat scroll center top transparent;
display: block;
}Perceba que está limitando a exibição dessa imagem a 30px por 30px. E está alinhando essa imagem que na verdade tem 60px de altura ao topo. Onde a DIV só exibirá a metade superior da imagem.
Então o CSS de OnMouseHover ficará:
#menu-imagem-botao:hover{
background-position: center bottom;
}Onde a imagem estará alinhada na base da DIV, exibindo somente a parte inferior da imagem.
Essa é a forma mais simples e eficaz de se fazer esse tipo de efeito. Até onde sei, é claro.
Qualquer dúvida, poste ae.
Abs,
Faça um background com os botões e manipule-o pelos elementos trabalhando com o background-position. Recomendo este artigo detalhadíssimo sobre CSS sprites.
Se já trabalhou ou trabalha com pré-processadores, recomendo o gerador de sprites do Compass. É SHOW! :thumbsup: Caso não esteja familiarizado, depois de ler e compreender o funcionamento dos CSS sprites, recomendo ferramentas como o Sprite Cow.
>
Olá Bruno.
Existe uma forma muito prática usando apenas CSS.
Imagine que você tenha uma imagem com um X no tamanho de 30px por 30px na cor vermelha, e a mesma imagem na cor preta. Onde a preta deverá ser exibida com o mouse sobre a imagem.
Você deverá criar uma única imagem de 30px por 60px, com as duas imagens juntas, uma abaixo da outra.
Então sua div que carregará a imagem ficará. Exemplo:
#menu-imagem-botao{
width: 30px;
height: 30px;
cursor: pointer;
background: url(../img/bt_next.png) no-repeat scroll center top transparent;
display: block;
} Perceba que está limitando a exibição dessa imagem a 30px por 30px. E está alinhando essa imagem que na verdade tem 60px de altura ao topo. Onde a DIV só exibirá a metade superior da imagem.
Então o CSS de OnMouseHover ficará:
#menu-imagem-botao:hover{
background-position: center bottom;
} Onde a imagem estará alinhada na base da DIV, exibindo somente a parte inferior da imagem.
Essa é a forma mais simples e eficaz de se fazer esse tipo de efeito. Até onde sei, é claro.
Qualquer dúvida, poste ae.
Abs,
Aproveitando o post acima e REFORÇANDO-O!!
O CSS sprite é fantástico e reduz muito as requisições http.
Nesse caso acima vc não precisa do javascript como o "onMouseOver".
Para você deixar com um aspecto mais bonito, você aplica no código o efeito transition do CSS3:
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-ms-transition: all .5s linear;
transition: all .5s linear;
Fica muito bom!!EduardoAugustoPHP, cuidado com transição de background-position. O efeito fica realmente estranho com o fundo "voando" pelo elemento.
Tópico: assim como a Diéssica, sugiro outra ferramenta de sprite, que é a presente no Fireworks. É ótima também! O arquivo final recebe o mesmo nome do arquivo fonte, e os "slices" são exportados como os seletores para o CSS. Muito rápido.
E ainda há várias configurações "extras" para alcançar um melhor resultado. :thumbsup:
pesquise por css sprite