Imagens ON e OFF – Tutorial

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!

Publicado por

Felipe Do E. Santo

Professor, Mozilla Tech Speaker, Mozilla Rep, Desenvolvedor Web e Gamer nas horas vagas.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.