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 🙂

Donde andará patolin que no postea?

Patolin anda ocupadin jejeje.

Antes que nada, un feliz año para todos, y que este nuevo año esté lleno de exitos y alegría para todos.

Estos últimos días, he estado un poco ocupado igualando el trabajo, terminando los pendientes chicos, y resolviendo otros problemas técnicos que se presentaron de improviso (ya escribiré sobre un caso interesante de programación que tocó arreglar). Así que ya publicaré mas información pronto.

pato

Hohohohoho Feliz navidad!

En esta época tan especial el año, no podía perderme la oportunidad de desearles a todos ustedes una muy feliz navidad, y esperar que todos sus deseos y aspiraciones para este año 2010 que se nos viene, se cumplan, y sea un año que llene al 100% sus expectativas.

Espero que todos tengan una agradable noche (yo espero que bien festejada) y que reunidos con sus familias o amigos, tengan la mejor noche del año, llena de alegria, paz, armonía, y pavo! 😉

Mis mejores deseos para todos ustedes.

pato

…. y para darle el toque cómico a esta época festiva, algunos videitos

Por qué correa cerró teleamazonas?

[HTML1]

Los muppets cantan Bohemia Rapsodia

[HTML2]

Cuando los aviones de control remoto atacan

[HTML3]

regalos geek para esta navidad

se acercan las navidades, y que mejor forma de mantener a un geek contento, que regalandole tecnología. Aquí algunos ejemplos de regalos practicos, divertidos y muy geek 😉

pacman

Directo desde amazon.com (o el juguetón, al fondo, al lado de los peluches) encontramos este mini arcade que trae algunos de los mejores clásicos de las maquinitas (pacman, ms-pacman, super pacman, dig dug, pole position, y otros mas).

Utiliza 4 baterias AA y se conecta directo a la TV. Nada mejor para esta época de vida rápida y sin tiempo de nada, que conectar la palanca a la tv y jugar una partida de pacman, tal como en aquellas máquinas de moneditas.

Quién no desea pilotear su propio helicóptero? y que mejor si puede volar de tu escritorio a la mesa de la impresora? Este es el regalo perfecto para todos aquellos pilotos de oficina, que desean matar el estress de sus labores, sobrevolando su ambiente de trabajo

portable_charging_station

Seamos sinceros, quien de nosotros (geek o no geek), tiene al menos 2 telefonos celulares, un reproductor mp3, memorias flash, etc, etc, etc. Y peór aun, quien no tiene todos los cargadores de estos aparatos, regados por toda la casa, y siempre se pierden cuando uno más los necesita. Para esto tenemos esta estación de carga, donde, en un solo lugar, podemos conectar todos nuestros «gadgets» y darles una recarga al final del dia… su telefono celular se lo agradecerá.

212adbf

swiss-memory

Si son como yo, este sería el mejor regalo de la vida. Hay 2 cosas que uno debe llevar en su vida, para la supervivencia y el éxito: una navaja suiza y un flash drive. Por que no poner los 2 en un solo lado?

Esta herramienta, combina una navaja suiza (con 5 servicios) y una memoria flash. Utilizala de llavero, y tendrás el mejor llavero del mundo (cuidado y te lo roben, con llaves y todo)

Si te sientes agotado, y necesitas un empujoncito energético, que mejor que el buen Red Bull en lata!

Te despierta, te «da alas» (como dice la propaganda) y te brindará un nuevo aire, por un par de horas, para dar el examen, terminar el proyecto, o simplemente aguantar 2 horitas mas de farra…. aunque este regalito se vería mejor en la fiesta de fin de año…. les dejo a su criterio 😉

96redbull

novedades!

pato

novedades…. muchas novedades

  • arrancamos la semana con la novedad de que los cortes de luz no van a parar
  • lanzamos al aire el website de pheno. Está en inglés, pero va a ser un foro interesante, se los recomiendo.
  • después de algunos inconvenientes, volvió al aire el website del quito tenis club. hay que pulir unos detallitos antes de mostrarlo al público completamente
  • el avión de control remoto va en un 75%. quizas este fin de semana, si la autoridad y el clima lo permiten, hará el vuelo de prueba.
  • se viene la navidad y ya mismo se acaba el año…… como vuela el tiempo cuando uno se divierte

ahora si! de vuelta al blog

hola! estoy funcionando nuevamente jejejeje.

Ahora si en serio, no me gustó el diseño anterior (que lastimosamente yo mismo hice, pero realmente no soy tan bueno diseñando) así que estoy usando un nuevo template, y muchos extras programados que poco a poco los irán descubriendo.

Estoy en fase de pruebas de la integración de wordpress con facebook, para que los usuarios usen su id de facebook para comentar, y de paso estamos probando la programación de aplicaciones de facebook. Estoy en búsqueda de ideas así que si se les ocurre algo (no, el pato de la suerte ya quedó descartado jejeje) haganmelo saber.

Prueben comentando desde su usuario de facebook, haciendo click en el boton de facebook en el cuadro de comentarios, necesito feedback 😉

at. Pato

Logitech Flight System G940

3588107104_a08e5a79f6

Logitech Flight System G940 es el último accesorio para jugadores de una de las marcas que mejor se comporta con ellos. Eso sí, este simulador de vuelo sale por la friolera de 300 dólares a partir de este verano.

Logitech Flight System G940 se compone de un mando con sistema de vibración y unos pedales inspirados en los controles reales de equipos tanto comerciales como militares. Todo lo que podemos necesitar para poner en el aire un avión.

Leer másLogitech Flight System G940