EL
IDIOMA UNIVERSAL INTERACTIVO
Movimientos mágicos
de mouse
 |
|
Pasa
el cursor por la imagen
|
Lograr que dos imágenes se alternen entre sí al pasar por encima el cursor es uno de los trucos más fáciles de hacer con JavaScript. Prueba con el ejemplo de la izquierda.
Para crearlo, hay que tener en cuenta algunos detalles. Primero, elegir dos imágenes con el mismo tamaño para mostrar alternativamente. Así, evitarás que se vean saltos molestos al producirse el cambio.
También, insertar en tu página el primer gráfico
Comparte
tus dudas y consejos con otros usuarios de Javascript
TEMAS RELACIONADOS
(apagado.jpg) y usar el atributo
"NAME" del tag <IMG> para identificarlo
con una palabra. En el ejemplo se lo llama "cambio".
Recuerda que si no identificas la imagen, te resultará imposible
incorporarla a una función.
Luego de cumplir con estos dos pasos, estás listo para programar.
Aquí está el código que deberás escribir:
La acción principal del script es cambiar la propiedad scr de la imagen para poder mostrar otro archivo. Las funciones "prender" y "apagar" son las encargadas de hacerlo. Ellas exhiben los gráficos "encendido.jpg" y "apagado.jpg", respectivamente. Por otro lado, los eventos onMouseOver y onMouseOut se ocupan de poner en acción el código. El primero, onMouseOver, "enciende" la imagen, y onMouseOut la "apaga". Ambos eventos se ubican dentro de la etiqueta <A HREF>.
Un último detalle: para que el script funcione en todos los navegadores, es necesario que la imagen sea un vínculo, porque los eventos que controlan la posición del cursor no son admitidos por la etiqueta <IMG> en el Netscape Navigator, aunque sí en el Internet Explorer 5 o superior. En próximas entregas, verás en detalle los diferentes eventos que existen y cómo se asocian a los elementos propios del HTML.
Es todo. Ahora sólo resta que apliques
este truco a tus propias ideas.
Guía de lectura