Viñeta cambiante
Se trata de un enlace con una viñeta o pequeña imagen tipo icono a su izquierda, pero solo va a ser visible al pasar el ratón por encima del enlace.
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 o al final de la sección body.
El funcionamiento es muy sencillo: se usan dos imágenes que se alternarán cuando el ratón entre o salga del texto del enlace.
La función imgOver() coloca la imagen activa para 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.