¿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
Comentarios recientes