Trucos y preguntas frecuentes sobre diseño en HTML

¿Cómo se puede hacer una imagen de sustitución o con efecto rollover ?

La imagen de sustitución o efecto rollover es el que se consigue cuando al pasar el ratón por encima de un gráfico, éste cambia a otro distinto. Es un efecto muy vistoso y fácil de conseguir sin necesidad de utilizar JavaScript.

Lo primero que se necesita es tener preparada una pareja de gráficos del mismo tamaño. Puedes crear estas dos imágenes en tu editor de imágenes favorito (Photoshop, Fireworks, etc). En nuestro ejemplo hemos preparado una imagen (camino.jpg) a la que hemos cambiado sus valores de luz y la hemos guardado como camino2.jpg.

camino.jpg	camino2.jpg

Lo primero que haremos en nuestro documento es insertar la imagen inicial, que en nuestro caso será "camino.jpg".

<img src="camino.jpg" name="imagen1" id="imagen1" />

Es muy importante añadir a la imagen los atributos name e id con el nombre que deseeis. En el ejemplo los hemos llamado "imagen1". Se pueden incluír además cualquier otro atributo propio de la imagen como sus medidas, alineación, etc.

A continuación convertimos la imágen en un vínculo. Para ello la incluímos dentro de la etiqueta <a href><a>

<a href="documento.html"><img src="camino.jpg" name="imagen1" width="130" height="94" border="0" id="imagen1" /></a>

Ahora añadimos el efecto mouseover que nos mostrará la otra imagen que tenemos preparada y que en nuestro caso hemos llamado "camino2.jpg". Para ello, tenemos que incluír lo siguiente dentro de la etiqueta <a href>:

onmouseover="document.imagen1.src='camino2.jpg' ";

Observa que es aquí donde hacemos referencia al nombre que le dimos a la imagen anteriormente con los parámetros name e id. Sustituye esta palabra por la que tú hayas elegido, y el nombre del archivo camino.jpg, por el tuyo. Es muy importante no olvidar las comillas simples con el nombre del archivo, las comillas dobles que enmarcan todo el valor, y el punto y coma final. Quedará como sigue:

<a href="documento.html" onmouseover="document.imagen1.src='camino2.jpg' ";<img src="camino.jpg" name="imagen1" width="130" height="94" border="0" id="imagen1" /></a>

Por último, sólo queda añadir el efecto "mouseout", es decir, que al retirar el ratón de encima de la imagen ésta vuelva a su situación inicial. Añadiremos lo siguiente a continuación del punto y coma anterior:

onmouseout="document.imagen1.src='camino.jpg'"

El resultado final será el siguiente. Para probarlo, pasa el ratón por encima de la imagen.

En el editor de textos	En el navegador
<a href="documento.html" onmouseover= "document.imagen1.src='camino2.jpg'"; onmouseout="document.imagen1.src ='camino.jpg'"> <img src="camino.jpg" name="imagen1" width="130" height="94" border="0" id="imagen1" /></a>

El código anterior te puede servir en tu caso siempre que no olvides cambiar tres cosas:

• "documento.html" - Utiliza aquí el documento al que tú enlaces (éste es tan sólo un ejemplo)
• "imagen1" - Este es el nombre que yo le he dado a la imagen del ejemplo, tú puedes darle cualquier otro. Pero no olvides cambiarlo en todos los lugares donde aparece en el ejemplo)
• "camino.jpg" y "camino2.jpg". Cámbialos por las imágenes que vayas a utilizar.

Por útimo recordar, que si no se quiere ese feo borde que aparece por defecto en las imágenes que hacen de enlace, se añada el parámetro border=0 dentro de la etiqueta de imagen.

También, si no quieres que la imagen enlace a ningún sitio, sustituye el documento por la almohadilla "#" (<a href="#">)