Imagem com Rollover usando o JQuery
Quem usa o Dreamweaver há algum tempo sabe que o mesmo tem uma função para fazer rollover em imagens. Aquele efeito de quando o visitante passa o mouse por cima da imagem, ela troca para outra.
Primeiro problema é que além do código ser confuso, você acaba por “sujar” seu HTML, tendo que colocar instruções javascript dentro de tags, geralmente no atributo “a” ou no “img”.
O JQuery tem uma forma de fazer exatamente a mesma coisa, porém com um código mais leve e organizado. Sem ter que fazer download de plugins nem colocar instrução nenhuma de javascript no seu HTML.
Fácil assim:
$('img.rollover1').hover(function() {
$(this).attr('src', base_url+'public/imagens/backoffice/up_on.gif');
},
function() {
$(this).attr('src', base_url+'public/imagens/backoffice/up_off.gif');
}
);
Lembrando que img.rollover1 você pode trocar pela class da sua imagem. E lógico, o caminho das imagens também
Seu HTML ficará assim
<a href="#"><img class="rollover1" src="imagem_original.gif" alt="" /></a>
Muito mais simples.
Em outro post, eu explico como fazer o autocarregamento das imagens, que o Dreamweaver teima em colocar dentro da tag body (!!!)

