Tanaceto y la Información

Siempre es preferible un final catastrófico a una catastrofe sin fin.

Cómo hacer una página básica html en Dreamweaver CS3 (III): Las imágenes de sustitución

Posted by tanaceto en octubre 12, 2007

Hoy vamos a seguir explicando cómo se pone una imagen de sustitución (rollover image) en el dreamweaver CS3. Consiste en crear un espacio para una imagen que cuando pasamos el ratón sobre ella cambie a otra imagen (durante el tiempo que el cursor del ratón se quede sobre la imagen).

* Recuerda que una imagen individual se introduce en Insertar/Imagen (Insert/Image).

1. Creamos nuestra página con su tabla correspondiente. Para saber más de esto consulta los antiguos post relacionados (1 y 2).

2. Seleccionamos la tabla y le damos a Insertar/Objetos de imagen/Imagen de sustitución (Insert/Image Objets/Rollover Image). Nos saldrá esta ventana:

lk2.png

3. En ella vemos dos pequeños rectángulos donde ponemos las dos imágenes que queremos insertar. La primera es la que se verá normalmente, y la segunda solo se verá cuando pasemos el ratón por encima de la imagen. De paso también hemos introducido un enlace para cuando se presione con el ratón sobre la imagen (siempre será la segunda imagen la que se vea cuando presionemos).

Un ejemplo de una página con imágenes de sustitución la encontramos en la página web del documental Teranga.

* Si combinamos una imagen de sustitución con una imagen gif animada (podemos hacerla con el Adobe ImageReady, por ejemplo), podemos crear una animación cuando el ratón pasa sobre el objeto/imagen seleccionada. Se pueden conseguir efectos muy bonitos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: