em outro tutorial, analisamos como usar a propriedade CSS background-image e o seletor :hover para criar uma imagem interativa que mudou quando um usuário moveu o mouse sobre a imagem. Nesse exemplo, começamos com um ícone home cinza e o transformamos em um ícone laranja. 
neste tutorial, veremos outra maneira de realizar a mesma coisa usando JavaScript.
quando você deve usar CSS vs JavaScript
CSS é a linguagem usada para definir o layout do site e criar animações simples. JavaScript é usado para adicionar interatividade com base no feedback e atividade do usuário do site. Existem lugares onde os recursos de CSS e JavaScript se sobrepõem. Essa sobreposição levanta a questão: qual você deve usar? A resposta a essa pergunta não é simples, e muitas opiniões foram expressas sobre o assunto. Alguns dizem que você deve usar CSS em praticamente todos os casos e só usar JavaScript quando nenhuma outra ferramenta pode fazer o trabalho. Outros oferecem um argumento completamente oposto de que JavaScript deve substituir CSS inteiramente. Na prática, a maioria dos desenvolvedores simplesmente usa a linguagem com a qual estão mais familiarizados, mesmo que não seja a melhor escolha para a tarefa em questão. Não vamos pesar no debate. Vamos permitir que você se decida sobre o assunto e, em vez disso, se concentre em mostrar como usar CSS e JavaScript. Um tutorial anterior já demonstrou como realizar essa transição usando CSS. Você pode vê-lo aqui. O resto deste tutorial irá ensiná-lo a usar JavaScript para esta tarefa comum.
o código por trás da transformação
aqui está o código JavaScript e HTML usado para criar a transformação.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')"> <img src="../path/original_image.file" name="home" alt="Home Page"> </a> <script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> vamos pegar esses pedaços de código um de cada vez para que possamos entender o que está acontecendo.
o elemento âncora
a primeira linha de código que vemos é um elemento âncora.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > como nosso exemplo envolve vincular um ícone inicial à página inicial do site, o atributo href apontaria para a página inicial do nosso site. Em seguida vem o evento JavaScript onmouseover. Este é o evento que ocorrerá quando o mouse paira sobre o elemento âncora. Nesse caso, uma função chamada rollover é chamada e afeta o item com o nome ‘home’. Finalmente, temos o evento onmouseout que chama a função rollout, que mais uma vez afeta o item com o nome ‘home’.
o elemento de imagem
aninhado dentro do elemento âncora é o nosso elemento de imagem.
<img src="../path/original_image.file" name="home" alt="Home Page"> usaremos o elemento de imagem para carregar a imagem que aparecerá quando o mouse não estiver pairando sobre o elemento âncora. No caso do nosso exemplo, estaremos carregando o ícone da casa cinza. Em seguida vem o atributo name. Usamos esse atributo para fornecer o JavaScript para identificar o elemento HTML que queremos modificar com o script. Dê uma olhada rápida no elemento âncora e observe como ambas as funções usam o parâmetro ('home'). O atributo name="home" é como as funções JavaScript identificam o elemento de imagem como o item a ser agido.
o Script
por último, temos um script muito curto.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> este script define um valor para a função rollover que é chamada pelo onmouseover acionado quando o mouse de um visualizador paira sobre a imagem.
colocando tudo junto
se colocarmos a âncora, a imagem e o script juntos, aqui está o que obtemos.
Simplifique o código com jQuery
jQuery é uma biblioteca JavaScript que permite criar praticamente qualquer tipo de animação ou transformação JavaScript com menos código. Se quiséssemos usar o jQuery para criar a mesma transformação, veja como seria o código.
<a href="home_url"> <img src="../path/original_image.file" alt="Home Page"> </a> <script> jQuery.('#home').hover( function(){ $(this).attr( 'src' , 'hover-image.file' ) }, function(){ $(this).attr( 'src' , 'original-image.file' ) } ); </script> o bom de usar o jQuery é que não precisamos mais adicionar manipuladores de eventos ao próprio HTML (lembre-se dos eventos onmouseover e onmouseout do código original?). Uma das melhores coisas sobre o jQuery é que ele pode adicionar os manipuladores de eventos dinamicamente. Isso permite uma maior separação entre o script e o conteúdo HTML e é uma maneira melhor de codificar. Como você pode ver, o HTML é muito mais limpo se usarmos a biblioteca jQuery e o resultado final for o mesmo.
jQuery.(‘#home’).hover (função () {$(isto).attr (‘src’, ‘ home168-1.o que é isso?attr (‘src’, ‘ orange_home.png’ ) } );adicionar jQuery a um site
uma coisa a ter em mente se você decidir usar esse código em seu próprio site é que a biblioteca jQuery deve ser carregada pelo navegador em todas as páginas onde um script jQuery é usado. JavaScript é suportado por todos os navegadores modernos. No entanto, a biblioteca jQuery deve ser adicionada ao navegador para que os scripts jQuery sejam processados. Existem duas maneiras de adicionar jQuery a um site.
- baixe o jQuery da fundação jQuery e faça o upload para o seu servidor web.
- Link para uma biblioteca jQuery hospedada publicamente.
a maneira mais fácil de adicionar jQuery a um site é vincular a uma biblioteca jQuery já hospedada na web. Você pode carregar a biblioteca jQuery hospedada pelo Google colando a seguinte linha de código no elemento head do seu site.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
