namespace Programatik - jQuery: Criando efeitos de "troca" de imagens

31.10.08

jQuery: Criando efeitos de "troca" de imagens

03:19:00, por mrxrsd

1471 visualizações
Categorias: jquery, design, css

Empolgado com a ultima lição de jQuery, vi uma técnica chamada spriteNav e resolvi fazer uma implementação usando jQuery, depois vou ver se faço um plugin para facilitar o uso.

Resposta:

O que é spriteNav, basicamente é uma técnica aonde temos na mesma imagem as duas "faces da moeda", porém só exibimos uma de cada vez.
Qual é a vantagem? Algumas pessoas fazem esse efeito com duas imagens, vocês já devem ter visto sites em que você passa o mouse em cima de um botão e de repente ele fica sem fundo e depois a imagem aparece, é porque ela ainda não estava no cache, essa técnica evita que isso aconteca, pois está tudo na mesma imagem.

Nossa imagem original:

Vamos então fazer um javascript que vai trocar as duas "faces" da nossa imagem.

Javascript:

$(document).ready(
        function(){
                $('#img1').hover(                                                       function(e){                                                            $('#img1').css('background-position','0 0'); 
                },
                        function(e){ 
                                $('#img1').css('background-position','0 -63'); 
                                                                                        }                                                       );                                              
});

E o css responsável pelos atributos da nossa imagem

CSS:

#img1 { 
                width: 105px; 
                height: 62px; 
                display: block;                 
                background:url('dotnet2l.png') no-repeat 0px -63px;             
        }