Dreamweaver CS5 semplifica il compito di trasformare un oggetto della pagina Web in un'altra. Potete trovare questa capacità utile quando si cerca un modo creativo per visualizzare i menu di goccia. Un menu a discesa, noto anche come una casella di riepilogo, contiene elementi selezionabili che i visitatori del sito possono scegliere. Menu di goccia di solito appaiono sullo schermo quando si apre una pagina. Tuttavia, utilizzando un semplice trucco di Dreamweaver CS5 JavaScript è possibile creare un menu a discesa da un'immagine.
Istruzioni
Aggiungi immagine e rilasciare Menu
1
Incollare il codice riportato di seguito il documento "< body >" tag:
< div id = "div1" >
< selezionare id = "menu1" name = "menu1" >
item1 < opzione > < / option >
item2 < opzione > < / option >
< / selezionare >
< img id = "image1" src = "MY_IMAGE" / >
< / div >
Questo codice crea un elemento div contenitore cui id è "div1." Questo div contiene un tag select e un tag img. Questi tag creano un'immagine e un menu a discesa. Valore dell'id dell'immagine è "image1." Valore di id di menu a discesa è "menu1." Sostituire "MY_IMAGE" con l'URL di un'immagine sul Web o il nome di un'immagine sul tuo computer. Spostare gli attributi di opzione nel tag select e sostituire "item1" e "item2" con gli elementi che si desidera visualizzare nel menu di goccia.
2
Fare clic su "Progettazione" per passare alla visualizzazione progettazione. Visualizzato il menu immagine e goccia sul documento. Fare clic sul menu a discesa per selezionarlo e premere "SHIFT" e "F4" per aprire la finestra di comportamenti.
3
Fare clic sul segno "Più" nella parte superiore della finestra, quindi fare clic su "Chiamata JavaScript." Digitare il testo seguente nella casella di testo "JavaScript" che appare:
showImage('image1')
Questa istruzione indica Dreamweaver per chiamare un JavaScript denominato "showImage" e passare il valore di id della vostra immagine a tale funzione. Fare clic su "OK" e Dreamweaver aggiunge un comportamento di onchange al menu a discesa.
4
Tornare al documento e fare clic sull'immagine. Fare clic sul segno "Più" nuovamente nella parte superiore della finestra di comportamenti, quindi fare clic su "Mostra-Nascondi elementi" per visualizzare un elenco di elementi del documento. Fare clic sull'elemento "image1" che appare nell'elenco e fare clic su "Nascondi". Fare clic su "OK" e Dreamweaver aggiunge un comportamento onclick all'immagine che nasconde l'immagine quando si fa clic su esso.
Aggiungere CSS e JavaScript
5
Fare clic sul pulsante "Codice" per visualizzare il codice HTML del documento. Incollare il codice seguente prima della finale tag "< / script >" che appare nel codice:
funzione showImage(imageID)
{
immagine di var = document.getElementById(imageID);
Image.Style.Visibility = "visibile";
}
Questo codice rende l'immagine più visualizzata dopo aver selezionato un elemento nel menu a discesa. Fare clic su "Progettazione" per tornare alla visualizzazione progettazione.
6
Pulsante destro del mouse sull'immagine e scegliere "Stili CSS". Fare clic su "Nuovo" e digitare "overlayStyles" nella casella di testo "Nome del selettore". Fare clic su "OK", quindi fare clic su "Posizionamento".
7
Fare clic sul menu a discesa "Posizionamento" e selezionare l'opzione "assoluto" che appare nel menu. Digitare 1 nella casella di testo "Top" che appare nella sezione "Posizionamento" della finestra. Digitare 1 nella casella di "Sinistra" che appare nella stessa sezione. In questo modo il menu immagine e goccia si sovrappongono sulla pagina Web.
8
Menu a discesa presente nella pagina e fare clic su "Stili CSS". Scegliere l'opzione "overlayStyles" che compare nel menu che appare. Questo vale lo stile creato per il menu.
9
Premere F12 per visualizzare in anteprima la pagina Web nel browser. La pagina Visualizza l'immagine. Clicca sull'immagine. L'immagine scomparirà e viene visualizzato il menu di goccia. Fare clic su una delle voci nel menu. Il menu scompare e l'immagine ritorna.
Consigli & Avvertenze
- Si noti che il tag select viene prima il tag img nella sezione body del documento. Questi tag devono comparire nell'ordine o menu a discesa non si nasconderà dietro l'immagine correttamente.