En otro tutorial vimos cómo usar la propiedad CSS background-image y el selector :hover para crear una imagen interactiva que cambiaba cuando un usuario movía el ratón sobre la imagen. En ese ejemplo, comenzamos con un icono de inicio gris y lo transformamos en un icono naranja. 
En este tutorial, veremos otra forma de lograr lo mismo usando JavaScript.
Cuándo debe usar CSS vs JavaScript
CSS es el lenguaje utilizado para definir el diseño del sitio web y crear animaciones simples. JavaScript se utiliza para agregar interactividad en función de los comentarios y la actividad de los usuarios del sitio web. Hay lugares donde las capacidades de CSS y JavaScript se superponen. Esta superposición plantea la pregunta: ¿cuál debe usar? La respuesta a esa pregunta no es simple, y se han expresado muchas opiniones sobre el tema. Algunos dicen que debe usar CSS en prácticamente todos los casos y solo usar JavaScript cuando ninguna otra herramienta puede hacer el trabajo. Otros ofrecen un argumento completamente opuesto de que JavaScript debería reemplazar completamente a CSS. En la práctica, la mayoría de los desarrolladores simplemente usan el lenguaje con el que están más familiarizados, incluso si no es la mejor opción para la tarea en cuestión. No vamos a intervenir en el debate. Vamos a dejar que usted tome su propia decisión sobre el asunto y, en su lugar, se centre en mostrarle cómo usar CSS y JavaScript. Un tutorial anterior ya demostró cómo realizar esta transición usando CSS. Puedes verlo aquí. El resto de este tutorial le enseñará cómo usar JavaScript para esta tarea común.
El Código Detrás de la transformación
Aquí está el código JavaScript y HTML utilizado para crear la transformación.
<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> Tomemos esos fragmentos de código uno a la vez para que podamos entender lo que está pasando.
El elemento de anclaje
La primera línea de código que vemos es un elemento de anclaje.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > Dado que nuestro ejemplo implica vincular un icono de inicio a la página de inicio del sitio web, el atributo href apuntaría a la página de inicio de nuestro sitio web. A continuación viene el evento onmouseover JavaScript. Este es el evento que ocurrirá cuando el ratón pase por encima del elemento de anclaje. En este caso, se llama a una función llamada rollover y efectúa el elemento con el nombre ‘home’. Finalmente, tenemos el evento onmouseout que llama a la función rollout, que una vez más afecta al elemento con el nombre ‘home’.
El elemento Image
Anidado dentro del elemento anchor es nuestro elemento image.
<img src="../path/original_image.file" name="home" alt="Home Page"> Usaremos el elemento image para cargar la imagen que aparecerá cuando el ratón no esté sobre el elemento anchor. En el caso de nuestro ejemplo, cargaremos el icono de la casa gris. Luego viene el atributo name. Usamos este atributo para dar el JavaScript para identificar el elemento HTML que queremos modificar con el script. Eche un vistazo rápido al elemento de anclaje y observe cómo ambas funciones usan el parámetro ('home'). El atributo name="home" es la forma en que las funciones de JavaScript identifican el elemento de imagen como el elemento sobre el que se debe actuar.
El Script
Por último, tenemos un script muy corto.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> Este script establece un valor para la función rollover que es llamada por el onmouseover que se activa cuando el ratón de un espectador pasa por encima de la imagen.
Unirlo todo
Si unimos el ancla, la imagen y el script, esto es lo que obtenemos.
Simplifique el código con jQuery
jQuery es una biblioteca JavaScript que le permite crear casi cualquier tipo de animación o transformación JavaScript con menos código. Si quisiéramos usar jQuery para crear la misma transformación, así es como se vería el 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> Lo bueno de usar jQuery es que ya no tenemos que agregar controladores de eventos al propio HTML (¿recuerdas los eventos onmouseover y onmouseout del código original?). Una de las mejores cosas de jQuery es que puede agregar los controladores de eventos de forma dinámica. Esto permite una mayor separación entre el script y el contenido HTML y es una mejor forma de codificar. Como puedes ver, el HTML es mucho más limpio si usamos la biblioteca jQuery y el resultado final es el mismo.
jQuery.(‘#home’).hover (function () {this (this).attr («src», » home168-1.png’)}, function () {this(this).attr (‘src’, ‘ orange_home.png’ ) } );Agregar jQuery a un sitio web
Una cosa a tener en cuenta si decide usar este código en su propio sitio web es que el navegador debe cargar la biblioteca jQuery en cada página donde se use un script jQuery. JavaScript es compatible con todos los navegadores modernos. Sin embargo, la biblioteca jQuery debe agregarse al navegador para que los scripts de jQuery se procesen. Hay dos formas de agregar jQuery a un sitio web.
- Descargue jQuery de jQuery Foundation y cárguelo a su servidor web.
- Enlace a una biblioteca jQuery alojada públicamente.
La forma más fácil de agregar jQuery a un sitio web es vincular a una biblioteca jQuery ya alojada en la web. Puede cargar la biblioteca jQuery alojada por Google pegando la siguiente línea de código en el elemento head de su sitio web.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
