Come creare più rollover JavaScript in Dreamweaver

July 11

Roll-over in una pagina web provocano un'immagine cambia quando il mouse su da un visitatore. Utilizzato nei tuoi link del menu, questa tecnica può aiutare i visitatori a navigare attraverso il vostro sito con facilità. Se il tuo sito web design richiede che più di una zona di una pagina cambia quando un visitatore passa sopra un link, Dreamweaver offre un modo semplice per soddisfare il vostro obiettivo con Javascript - senza codifica richiesta!

istruzione

1 Creare immagini nel software immagine-building. Avrete bisogno di immagini di base separati e immagini roll-over per ogni area del sito che si desidera modificare durante un mouse-over. Per rollover senza soluzione di continuità, la sia la base e passa il mouse le immagini per un singolo roll-over dovrebbe essere la stessa dimensione esatta e dovrebbe avere lo stesso sfondo. Salvare le immagini come file JPEG o GIF pronti per il web.

2 Aggiungi il tuo primo rollover. Nel file di Dreamweaver, fare clic sul cursore dove si desidera visualizzare l'immagine roll-over di base. Ora, fare clic sulla freccia accanto all'icona immagine nella barra degli strumenti (è l'icona che appare come l'immagine di un albero). Dal menu a discesa, scegliere "rollover immagine". È inoltre possibile fare clic su Inserisci> Oggetti immagine> Immagine rollover dal principale barra dei menu di Dreamweaver MX.

3 Aggiungere la vostra base e librarsi immagini utilizzando la finestra di dialogo "Inserisci rollover immagine". Lascia la tua immagine un nome specifico. Si utilizzerà questo nome quando si aggiunge il secondo roll-over. Inserire il vostro immagine rollover utilizzando i primi due pulsanti "Sfoglia" immagine di base e. Selezionare la casella "immagine di rollover del precarico" per indicare ai browser di caricare l'immagine rollover, allo stesso tempo tutte le altre immagini sono caricate quando una pagina viene aperta.

4 Configurare il collegamento per il primo roll-over. Accanto alla casella denominata "Quando si fa clic, passare alla URL:", cercare il file a cui verrà collegato il vostro roll-over. Al termine, fare clic sul pulsante OK in alto a destra della finestra di dialogo. Salvare il file e aprirlo in un browser per assicurarsi che il collegamento roll-over sta lavorando il modo in cui si immaginava.

5 Aggiungere un ulteriore roll-over che si attiva quando l'immagine originale viene moused sopra. Ritorno a Dreamweaver e inserire l'immagine di base per il secondo roll-over. Aprire la finestra Comportamenti. Evidenziare l'immagine di base, e fare clic sul menu "+" discesa dalla finestra Comportamenti per aggiungere un nuovo comportamento Javascript. Scegliere "Scambia immagine" dall'elenco comportamento. Dall'elenco di file nella finestra di dialogo, scegliere il nome del file designato per l'immagine originale la vostra prima di roll-over. Quindi, cercare un'immagine hover del secondo roll-over con il pulsante "Sfoglia". Fare clic su "OK" e il secondo roll-over dovrebbe essere configurato. Salvare il file e rivedere in un browser nuovo. Quando il mouse l'immagine originale roll-over sopra, sia l'immagine originale e l'immagine secondo roll-over dovrebbe passare, come si è configurato.


Articoli Correlati