Imágenes (II) - Imagen de sustitución
Un rollover o imagen de sustitución es una imagen que cambia por otra cuando el
puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los
botones para desplazarnos a través de distintas páginas.
Para insertar un rollover hay que dirigirse al menú Insertar, Imágenes interactivas, a
la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen
original y la de sustitución.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el
que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda
ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede
hacerse a través del campo Alt del inspector de propiedades de la imagen
seleccionada.
1) Entrar dentro del sitio web DREAM y crear allí una nueva página llamada
“menu.htm” y que tenga las siguientes características (las imágenes debes copiarlas
previamente a nuestra carpeta:
- Fondo con la imagen ‘NUBES.JPG’ situada en la carpeta RECURSOS PARA
EL ALUMNO / IMÁGENES.
- Color del texto ‘amarillo’
- Insertar una imagen de sustitución con las imágenes “8208.jpg” y “8223.jpg”
para que accedan a la página ‘index.html’. Centrar la imagen y poner debajo
“Acceso a la página principal”
- Insertar dos imágenes de sustitución para que accedan a las páginas
‘prueba1.htm’ y ‘prueba2.htm’. Elige las 4 imágenes que quieras de la carpeta
RECURSOS PARA EL ALUMNO / IMÁGENES y ponerle debajo los textos
“Acceso a la página prueba1” y “Acceso a la página prueba2.htm”
respectivamente.
Guardad la página y comprobar que cambian las imágenes en la vista previa de la
página.
2) Añadir en la página anterior hipervínculos a los textos que has escrito, de forma
que se pueda acceder a las páginas ‘index.html’, ‘prueba1.htm’ y ‘prueba2.htm’
tanto desde las imágenes como desde los textos. Guardar y comprobar que funcionan los
cambios.
Botones Flash
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse
para crear menús, como pueden ser los botones Flash. Para insertar un botón Flash hay
que dirigirse al menú Insertar, Imágenes interactivas, a la opción Botón Flash.
A través de Estilo puede seleccionarse uno de los distintos formatos de botón que se
ofrecen. En esta misma ventana hay que especificar también el texto que mostrará el
botón, así como el nombre con el que será guardado y el vínculo asociado.
Es preferible guardar los botones Flash en el mismo directorio que los documentos
HTML, en lugar de en la carpeta destinada a almacenar imágenes, ya que de no ser así
es posible que al intentar asignar un vínculo dentro del propio sitio, Dreamweaver no
permita guardar el botón con ese vínculo en una ubicación diferente de la de dicho
documento.
Recuerda que los botones deben guardarse con la extensión SWF.
3) Crear una nueva página web llamada ‘menu2.htm’ que tenga color de fondo rojo y
donde pongamos 4 botones flash con las siguientes propiedades:
ESTILO TEXTO VÍNCULO
BlipArrow Acceso al menu 1 ‘menu.htm’
Generic Gold Acceso a prueba1 ‘prueba1.htm’
Glass Purple Acceso a prueba2 ‘prueba2.htm’
Soft - Orange Acceso a index ‘index.html’
A través del inspector de propiedades del botón Flash es posible editar de nuevo sus
atributos. Puede volver a abrirse la ventana anterior pulsando sobre el botón Editar, y a
través del botón Reproducir es posible probar el funcionamiento del botón Flash
Dreamweaver, sin la necesidad de tener que abrir la página con algún navegador.
Después de haber probado el funcionamiento del botón Flash, debe pulsarse de nuevo
sobre el botón Reproducir (que habrá cambiado por el botón Detener).
4) Cambiar las propiedades de los botones que antes haz insertado para hacerlos un
poco más grandes. También puedes cambiar alguno de los estilos anteriores (desde
Editar...) si no les gustan. Guardar y probar cómo han quedado.
5) Añadirles un parámetro para que cada uno de los botones tengan el fondo
transparente. En este caso lo haremos pulsando sobre Parámetros y poniendo
Parámetro=wmode y Valor=transparent. Guardar los cambios y comprobar el efecto
producido.
Mucho Éxito!!!
No hay comentarios:
Publicar un comentario