ubiquitour.com

Cómo crear un menú desplegable desde una imagen en Dreamweaver CS5

Dreamweaver CS5 simplifica la tarea de transformar un objeto de página Web en otro. Usted puede encontrar esta capacidad útil al buscar una forma creativa de mostrar los menús de la gota. Un menú desplegable, también conocido como un cuadro de lista desplegable, contiene elementos seleccionables que los visitantes del sitio pueden elegir. Gota generalmente aparecerán los menús en pantalla cuando se abre una página. Sin embargo, utilizando un simple truco de JavaScript de Dreamweaver CS5 puede crear un menú desplegable de la imagen.

Instrucciones

Agregar imagen y menú

1 Pegue el código que se muestra a continuación el documento "< body >" etiqueta:

< div id = "div1" >

< select id = "menu1" nombre = "menu1" >item1 < opción > < / opción >item2 < opción > < / opción >< / select >

< img id = "image1" src = "Mi_imagen" / >

< / div >

Este código crea un elemento de contenedor div cuyo id es "div1". Este div es una etiqueta select y una etiqueta img. Estas etiquetas crean una imagen y un menú desplegable. Valor de id de la imagen es "image1". Valor de id del menú desplegable es "menu1". Reemplazar "Mi_imagen" con la URL de una imagen en la Web o el nombre de una imagen en tu computadora. Mover a los atributos de la opción en la etiqueta select y reemplazar "item1" y "item2" con los elementos que desea que aparezca en el menú desplegable.

2 Haga clic en "Diseño" para cambiar a la vista de diseño. El menú imagen y gota aparece en el documento. Haga clic en el menú desplegable para seleccionarlo y pulsa el "SHIFT" y "F4" para abrir la ventana de comportamientos.

3 El signo "Más" en la parte superior de la ventana, haga clic en "Llamada de JavaScript." Escriba el texto siguiente en el cuadro de texto de "JavaScript" que aparece:

showImage('image1')

Esta declaración dice Dreamweaver JavaScript llamado "showImage" y pase el valor de id de la imagen a esa función. Haga clic en "OK" y Dreamweaver añade un comportamiento de onchange del menú desplegable.

4 Volver al documento y haga clic en la imagen. El signo "Más" en la parte superior de la ventana de comportamientos, haga clic en "Mostrar-Ocultar elementos" para mostrar una lista de elementos en el documento. Haga clic en el elemento "image1" que aparece en la lista y haga clic en "Ocultar". Haga clic en "OK" y Dreamweaver añade un comportamiento onclick a la imagen que esconde la imagen al hacer clic en él.

Agregar CSS y JavaScript

5 Haga clic en el botón de "Código" para mostrar el código HTML del documento. Pegue el código siguiente antes del final de la etiqueta "< /script >" que aparece en el código:

función showImage(imageID){var imagen = document.getElementById(imageID);Image.Style.Visibility = "visible";}

Este código hace que la imagen reaparece después de seleccionar un elemento en el menú desplegable. Haga clic en "Diseño" para volver a la vista de diseño.

6 Haga clic en la imagen y haga clic en "Estilos CSS". Haga clic en "Nuevo" y escriba "overlayStyles" en el cuadro de texto "Nombre del Selector". "OK", haga clic en "Posicionamiento".

7 Haga clic en el menú desplegable de "Posicionamiento" y seleccione la opción "absoluta" que aparece en el menú. Escriba en el cuadro de texto "Top" que aparece en la sección de "Colocación" de la ventana. Escriba en el cuadro de «Izquierda» que aparece en la misma sección. Esto hace el menú imagen y gota se superponen en la Página Web.

8 Haga clic en el menú desplegable situado en la página y haga clic en "Estilos CSS". Haga clic en la opción "overlayStyles" que aparece en el menú que aparece. Esto aplica el estilo creado para el menú.

9 Presione F12 para previsualizar la Página Web en su navegador. La página muestra la imagen. Haga clic en la imagen. La imagen desaparece y aparece el menú de la gota. Haga clic en uno de los elementos en el menú. El menú desaparece y la imagen vuelve.

Consejos y advertencias

  • Observe que la etiqueta select interviene antes de la etiqueta img en la sección del cuerpo del documento. Estas etiquetas deben aparecer en este orden o el menú desplegable no se ocultará detrás de la imagen correctamente.