Canal RSS

Javascript RollOver Image (Imagenes cambiantes)

Publicado en

¿Alguna vez han tenido la necesidad de hacer el clasico rollover image con js? ¿que es esto ?

Bueno, el termino rollover image se refiere a una imagen que contiene un link asociado, y que al momento de detectar el puntero del mouse encima de esta, cambia su estado. Este efecto se realiza cargando otra imagen en el mismo lugar, por medio de js.

ahora, ¿que se necesita?. La etiqueta HTML <img> contiene dos propiedades que hacen referencia a sus eventos OnMouseOver y OnMouseOut, el primero se ejecuta cuando el puntero del mouse pasa por encima, y el segundo, cuando esto deja de suceder.

Entonces solo habría que construir una funcion js que intercambiara las imagenes, y en la etiqueta HTML, llamar a esa funcion en cada uno de los eventos, con el valor de la imagen a desplegar. Eso no es problema cuando son 2 o 3 imagenes… pero, ¿y si son demasiadas?, ¿su codigo esta preparado para administrar varias imagenes?

Con ayuda de la pagina de desarrollo de Mozilla, y algo de codigo de la pagina DHTMLGoodies, me inspiré y decidi hacer un script js para facilitar esta tarea.

Ustedes solo tienen que hacer referencia a una libreria js, la cual contiene todo el codigo.

ahora, viene lo interesante, en lugar de poner la etiqueta <img> y sus propiedades, deben escribir una etiqueta personalizada (<rollover_img />), con las siguientes propiedades

  • border : determina el grueso del borde de la imagen (0 si no lleva borde)
  • img_off : determina la URL de la imagen en estado OFF
  • img_on: determina la URL de la imagen en estado ON (cuando el cursor pase encima)
  • url_link: determina el link URL asociado a la imagen.

En el body de su pagina HTML, llamar a la funcion de busqueda de TAGS : initRollOver_search();

listo ! no tienen porque preocuparse por eventos, por escribir una sola linea de codigo, nada.

espero que les sea de ayuda, si alguno de ustedes tiene alguna aportacion al codigo, le agradecería su retroalimentacion.

descarga el codigo aqui

About these ads

»

  1. oye se ve muy chida tu aplicacion pero no la puedo descargar, podrias volver a subir el archivo para que pueda descargarlo

    Responder
  2. que tal, acabo de subir el archivo, para que todos puedan mandarlo, de todos modos te lo envie a tu correo, saludos.

    Responder
  3. mm no funciona tu enlace para cargar la pagina del codigo :p espero y lo vuelvas a subir gracias!

    Responder
  4. Me podrias pasar el codigo por favor…

    Responder
  5. vaya a mi tampoco me va el enlace….parecia muy interesante

    Responder
  6. Queria descargarlo para probarlo que tal funcionaba, pero veo que el link no funciona, espero que lo vuelvas a subir.

    Responder
  7. etyhrthdghsrghfgdfgh
    dg
    dfd
    ndfb

    Responder
  8. No funciona el LINK joooooooooooooo!!

    Responder

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: