4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Imagen de Sustitución o roll-overEs una imagen, vínculo a otro documento, que cambia de aspecto al pasar el puntero del ratón por encima de ella.

1º Debemos tener realizadas las dos imágenes en photoshop y guardadas en nuestra carpeta raíz.

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

2º Abrimos Dreamveavear (lo encontramos en Inicio > Todos los programas > Macromedia > Macromedia Dreamweavear mx

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

3º Debido a que es más flexible el trabajo en capas utilizaremos este medio, para resolver nuestro proyecto web.

Insertar > capa

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Aparecerá en nuestro espacio de trabajo un recuadro el cual podemos mover hacia cualquier dirección y además modificar sus dimensiones. La utilización de capas nos permite colocar cada uno de los elementos dentro de cada capa configurando nuestro sitio Web como un rompecabezas. Por lo tanto se pueden insertar texto, imágenes, videos, etc.

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Nota: para insertar cualquier elemento dentro de una capa, debemos hacer clic dentro de ésta y aparecerá una barrita de texto que indica que la capa esta activada

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

4º imagen de sustitución insertar > imágenes interactivas > imagen de sustitución

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Luego aparecerá un recuadro, el cual generará la imagen de sustitución:

imagen original: Uds. ubican la primera imagen que veremos:

imagen de sustitución: la 2da imagen

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Los botones Examinar, nos permite buscar nuestras imágenes dentro de la carpeta raíz.

Al hacerse clic, ir a URL= significa que podemos vincular la imagen de sustitución a una pagina ya creada con anterioridad. (archivo html / icono de Internet Explorer)

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Aceptar (y veremos la primera imagen oscurecida dentro de nuestra capa, eso indica que esta hecho el rollover. No preocuparse si esta opacidad desaparece al mover la capa.)

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

4º Para previsualizar nuestro trabajo, como si estuviésemos navegando en Internet, apretamos la tecla F12 (teclado)

Aparecerá una nueva ventana de Internet Explorer, la abrimos y en la barra superior amarilla

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Hacemos clic y permitir contenido bloqueado

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Y decimos que si al recuadro de advertencia

Al pasar el Mouse por sobre la imagen verán el resultado, la imagen cambia dando dinamismo e interacción a nuestro proyecto Web.

Luego se cierra la ventana, y volvemos a guardar nuestro proyecto, en nuestra carpeta raíz

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

4º guardar nuestro proyecto Archivo > guardar

Aparecerá un recuadro, buscamos nuestra carpeta raíz, damos el nombre al archivo y guardar.

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

Zoom del recuadro

4º medio – Sitio WebCurso de Dreamweavear: imágenes interactivasImagen de sustitución (roll-over).

6º Para verificar que nuestro archivo “ejemplo” esta dentro de nuestra carpeta raíz, abrimos esta, y debería estar con un icono de Internet Explorer, lo abrimos y nuevamente veremos el proyecto.