Viñeta cambiante

Se trata de un enlace con una viñeta a su izquierda que solo debe ser visible al pasra el ratón.

Este efecto puede conseguirse con CSS, pero en este ejemplo se ve como hacerlo con Javascript.

Solución

<script>

//on.gif y off.gif : urls de las imagenes

function imgOver(imagen){

   imagen.src ="on.gif" ;

}

function imgOut(imagen){

   imagen.src = "off.gif"

}

</script>

<body>

<img name="imglnk1" src="off.gif" style="width:14px; height:14px">

<a href="https://creatuweb.espaciolatino.com"

onMouseOver="imgOver(imglnk1)" onMouseOut="imgOut(imglnk1)">

CreaTuWeb

</a>

</body>

Explicación

Este es el script, que deberás colocar en la sección head de tu página.

El funcionamiento es muy sencillo: se usan dos imágnes que se alternarán cuando el ratón entre o salga del texto del enlace.

La función imgOver() coloca la imagen activa de cuando el ratón está encima del enlace y cuando el ratón sale la función que actúa es imagenOut() la otra que colocará la otra imagen.

Para que no se modificque la posición del texto se usa una imagen gif que es un punto transparente, y se le da el tamaño de la imagen visible. Es un viejo truco de Javascript.

Puedes colocar otras imágenes, como pueden ser gifs animados.

Como lo uso

 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á una de las imágenes y cuando el ratón pase por encima se usará la otra imagen. Pueden ser dos versiones de la misma imagen o bien una imagen invisible y otra visible.