OnMouseOver com a mesma imagem. É possível?

[BrunoJavan 3]

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!

[William Bruno 1501]

pesquise por css sprite

[alexsouzaweb 2]

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,

 

[Diéssica 140]

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.

[EduardoAugustoPHP 27]

 

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!!

[André do Vale 76]

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: