| El script | Como funciona |
| <SCRIPT LANGUAGE="JavaScript"> <!-- //on.gif y off.gif son direcciones //de las imágenes ImagenOn = "on.gif" ImagenOff = "off.gif" function imgOver(imagen){ imagen.src = imagenOn } function imgOut(imagen){ imagen.src = imagenOff } //--> </SCRIPT> |
Este es el script, que deberás colocar en la sección HEAD de tu página. El funcionamiento es muy sencillo: defines dos variables en las que guardas las direcciones de dos imágenes que se alternarán cuando el ratón entre o salga del testo del enlace. La función imgOver coloca la imagen activa de cuando el ratón está encima del enlace (ImagenOn) y cuando el ratón sale la función que actúa es la otra imgOut que colocará la otra imagen (ImagenOff). Una buena idea es colocar como ImagenOn un gif animado y como ImagenOff el mismo gif pero estático, o bien un gif animado y una imagen invisible, o un gif estático y una imagen invisible. Las combinaciones son de tu incumbencia. Ambas imágenes deberán tener las mismas dimensiones para evitar que el texto se desplace.
|
| La página | Como se usa |
| <img name="imglnk1" src="off.gif" width=10 height=10 border=0> <A href="http://creatuweb.espaciolatino.com" onMouseOver="imgOver(imglnk1)" onMouseOut="imgOut(imglnk1)">CreaTuWeb</A> |
En la página (en la sección BODY) colocas el enlace con una imagen a su izquierda, a modo de viñeta. Cuando no está el ratón se mostrará la imagen ImagenOn y cuando el ratón pase por encima se usará la ImagenOff. Pueden ser dos versiones de la misma imagen o bien una imagen invisible y otra visible. |
| El script en funcionamiento | ||
|
Como puedes ver al pasar el ratón por los enlaces cambian la viñeta |
||