Tecnología

Inicio

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

Dreamweaver CS5 simplifica la tarea de transformar la página web de un objeto a otro. Usted puede encontrar esta capacidad útil en la búsqueda de una forma creativa de mostrar menús desplegables. Un menú desplegable, también conocido como un cuadro desplegable, contiene elementos seleccionables que los visitantes del sitio pueden elegir. menús desplegables suelen aparecer en la pantalla cuando se abre una página. Sin embargo, mediante el uso de un simple truco de Dreamweaver CS5 JavaScript puede crear un menú desplegable de una imagen.

Instrucciones

Añadir imagen y menú

1 Pegar el código se muestra a continuación la etiqueta del documento "<body>":

<Div id = "div1">

<Select id = nombre de "menu1" = "menu1">
<Opción> elemento1 </ option>
<Opción> elemento2 </ option>
</ Select>

<Img id = "imagen1" src = "Mi_imagen" />

</ Div>

Este código crea un elemento div contenedor cuyo ID es "div1." Esta div tiene una etiqueta y seleccione una etiqueta img. Estas etiquetas crear una imagen y un menú desplegable. Identificación del valor de la imagen es "imagen1". Identificación del valor del menú desplegable es "menu1." Reemplazar "Mi_imagen" con la dirección URL de una imagen en la Web o el nombre de una imagen en el ordenador. Mover a los atributos de la opción en la etiqueta de selección y reemplazar "item1" y "elemento2" 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. La imagen y el menú desplegable aparecen en el documento. Haga clic en el menú desplegable para seleccionarla y pulsar la tecla "SHIFT" y "F4" para abrir la ventana de Comportamientos.

3 Haga clic en el signo "+" en la parte superior de la ventana, haga clic en "Llamar JavaScript." Escriba el texto siguiente en el cuadro de texto "JavaScript" que aparece:

ShowImage ( "imagen1")

Esta declaración indica a Dreamweaver para llamar a un JavaScript denominada "ShowImage" y pasar el valor id de la imagen a esa función. Haga clic en "OK" y Dreamweaver añade un comportamiento onchange para el menú desplegable.

4 Volver al documento y haga clic en la imagen. Haga clic en el signo "+" de nuevo en la parte superior de la ventana de comportamientos, a continuación, haga clic en "Mostrar-Ocultar elementos" para mostrar una lista de elementos en el documento. Haga clic en el elemento "imagen1" 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 oculta la imagen cuando se hace clic en él.

Añadir CSS y JavaScript

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

función ShowImage (ImageID)
{
Imagen var = document.getElementById (ImageID);
image.style.visibility = "visible";
}

Este código hace que reaparezca la imagen 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 escribe "overlayStyles" en el cuadro de texto "Nombre Selector". Haga clic en "Aceptar", luego haga clic en "Posicionamiento".

7 Haga clic en el menú desplegable "Posicionamiento" y seleccionar la opción "absoluta" que aparece en el menú. Escriba una en el cuadro de texto "Top" que aparece en la sección "colocación" de la ventana. Escriba uno en el cuadro de "izquierda" que aparece en la misma sección. Hacer esto hace que la imagen y la caída de la superposición de menú 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 se aplica el estilo que ha creado para el menú.

9 Pulse F12 para obtener una vista previa de su página Web en el navegador. La página muestra la imagen. Haga clic en la imagen. La imagen desaparece y aparece el menú desplegable. Haga clic en uno de los elementos en el menú. El menú desaparece y la imagen vuelve a aparecer.

Consejos y advertencias

  • Tenga en cuenta que la etiqueta de selección viene 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 esconden detrás de la imagen correctamente.