Tudo certo galera?
O primeiro tutorial do hardcódigo acabou de sair!
Coisa bem simples mas que pode ajudar a acelerar o desenvolvimento quando o site fizer uso do efeito de imagem on e off.
Nesse tutorial vamos usar o Jquery que você pode baixar no link:
http://code.jquery.com/jquery-1.9.1.min.js
Para quem não conhece o Jquery é uma biblioteca que reúne diversos recursos que são uma mão na roda para todo desenvolvedor WEB.
E então vamos ao código:
<!-- Biblioteca Jquery -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// comando para inicialização do código após o carregamento do HTML
$(document).ready(function(){
// Evento acionado quando o mouse entrar em uma classe on_off
$(".on_off").mouseenter(function(){
// Define a variável img como o objeto que o mouse está em cima atualmente
img = this;
// O comando replace() substitui o texto de _off por _on realizando a troca da imagem
img.src = img.src.replace(/_off\./, "_on.");
});
// Evento acionado quando o mouse sair de uma classe on_off
$(".on_off").mouseleave(function(){
// Define a variável img como o objeto que o mouse está em cima atualmente
img = this;
// O comando replace() substitui o texto de _on por _off realizando a troca da imagem
img.src = img.src.replace(/_on\./, "_off.");
});
});
</script>
<img src="botao_off.jpg" alt="Botão" width="181" height="181" class="on_off" />
<br />
<img src="like_off.jpg" alt="Botão 2" width="181" height="181" class="on_off" />
No caso todas as imagens com recurso de on e off devem ter a classe “on_off” e no nome devem ser identificadas com o nome_on e nome_off.
Na linha “$(document).ready(function(){” iniciamos o jquery informando que o código deve ser executado após o carregamento do HTML.
Logo após isso definimos 2 eventos:
“$(‘.on_off’).mouseenter()” e “$(‘.on_off’).mouseleave()”.
E usando o codigo:
img = this;
img.src = img.src.replace(/_off\./, “_on.”);
E
img = this;
img.src = img.src.replace(/_on\./, “_off.”);
Trocamos a url da imagem substituindo o texto de _on e _off e isso faz a mudança da imagem.
Simples, prático e fácil!
Link para download dos arquivos do tutorial:
https://www.dropbox.com/s/bxayhex0r0yxkxc/tutorial_1.zip
Valeu e até a próxima!
Dúvidas e sugestões fiquem a vontade para comentar!
