Botones con rollover, facilito con jquery!

En esta oportunidad, vamos a tratar un caso que tarde o temprano todo programador o diseñador web tendrá que tratar; el uso de rollovers para los botónes de imágen en su página web. La manera más simple de realizar un botón de rollover, es utilizando una herramienta de diseño web (llamese dreamweaver o similar), pero estas herramientas insertan en nuestro querido y ordenado HTML código que puede desordenar nuestra estructura de programación, complicando el momento de realizar cambios de diseño o programación.

Para solventar este inconveniente, y realizar todo de una forma más ordenada, vamos a utilizar un framework de javascript. En este caso utilizaremos jquery, que es uno de los frameworks más populares, y desde mi punto de vista, uno de los más faciles y prácticos de utilizar.

Para realizar un boton de rollover, son necesarias las 2 imágenes del botón que vayamos a programar, en este caso de ejemplo, vamos a utilizar las 2 imágenes que tenemos a continuación:

boton boton1

Para facilidad de nuestra programación, vamos a crear una estructura de carpetas para separar las imágenes normales, de las que se aplicarán en el rollover. En este caso de ejemplo no se notará la versatilidad de este método, porque tenemos solo un rollover, pero en el caso de que tengamos varios botones de rollover (yo he aplicado este método a una página con aproximadamente 50 botones con rollover, y la pueden observar aqui) nos será de gran utilidad para ordenar nuestros archivos. La estructura de carpetas y archivos, la podemos observar en la siguiente imágen.

arbol

Una vez que tenemos las imágenes listas, procedemos a editar nuestro código HTML. Primero, debemos llamar a jquery en el <head> de nuestra página web, colocando el siguiente código:

<script type=»text/javascript» src=»jquery-1.4.1.js»></script>

Una vez cargado este javascript, debemos insertar el botón en sí. Esto lo hacemos normalmente, dentro del <body> de nuestra página web. Adicionalmente, al botón, debemos linkearlo a la URL que se requiera, quedando el código de la imágen de esta manera:

<a href=»http://mi-link.com»><img class=»boton» name=»boton» src=»imagenes/normal/boton.jpg» /></a>

Como podemos observar, es una imágen con link bastante normal. La única diferencia real se encuentra en que a la imágen le hemos asignado una clase «boton», y además, se ha agregado la etiqueta «name» para asignar un nombre al botón. Este nombre deberá coincidir con el nombre del archivo de imágen, pero sun su extensión. Este identificador de clase lo utilizaremos en la llamada el evento del rollover Para esto, debemos utilizar el código que mostramos a continuación:

<script>
$(document).ready(function() {
$(‘.boton’).mouseover(function() {
var nombre=$(this).attr(«name»);
$(this).attr(«src», «imagenes/roll/»+nombre+».jpg»);
});
$(‘.boton’).mouseout(function() {
var nombre=$(this).attr(«name»);
$(this).attr(«src», «imagenes/normal/»+nombre+».jpg»);
});
});
</script>

Este código debe ser colocado justo después de la etiqueta <body> en nuestra página web. Esta función lo que hace es que, una vez cargada la página completamente ( por eso el llamado a $(document).ready() ), asignamos a todos los elementos que tengan la clase «boton» los eventos mouseover y mouseout.

Como podemos observar en el código, en el evento mouseover (el rollover en sí), obtiene en valor de la etiqueta «name» de la imágen que ejecuta el evento, y con este valor, cargamos la imágen correspondiente que se encuentra en la carpeta «roll» de nuestra estructura de archivos. Así, facilmente, reemplazamos la imágen al pasar el mouse sobre la misma. Y para restaurar la imágen a su estado original, utilizamos el evento «mouseout», que reemplaza por la imágen original (la de la carpeta «normal») a la imágen activada.

Muchos dirán «demasiado código para un solo rollover», pero que pasa si por ejemplo, tenemos 5 rollovers en nuestra página web? bastaría con asignarle a cada imágen la clase «boton» y darle el «name» que corresponda a cada imágen. En un caso hipotético, tendríamos algo así:

<a href=»http://mi-link-1.com»><img class=»boton» name=»boton1″ src=»imagenes/normal/boton1.jpg» /></a>
<a href=»http://mi-link-2.com»><img class=»boton» name=»boton2″ src=»imagenes/normal/boton2.jpg» /></a>
<a href=»http://mi-link-3.com»><img class=»boton» name=»boton3″ src=»imagenes/normal/boton3.jpg» /></a>
<a href=»http://mi-link-4.com»><img class=»boton» name=»boton4″ src=»imagenes/normal/boton4.jpg» /></a>
<a href=»http://mi-link-5.com»><img class=»boton» name=»boton5″ src=»imagenes/normal/boton5.jpg» /></a>

Así, únicamente tendrémos que cargar las imágenes respectivas en las carpetas «normal» y «roll», y sin agregar nada de código en javascript, conseguiremos que los rollovers funcionen, ya que todos utilizan la clase «boton» que es la que activa los eventos de jquery.

Aqui les dejo un link, con el código y las imágenes del ejemplo utilizado. Espero les sea de utilidad 🙂


Comments

Deja una respuesta