Video: Creare immagine Rollover su DreamWeaver 2024
In Dreamweaver, immagini rollover - come suggerisce il nome, sono progettati per reagire quando qualcuno fa scorrere un cursore su un'immagine. L'effetto può essere drammatico come l'immagine di un cane che viene sostituito da un'immagine di un leone, o sottile come il colore di una parola che cambia come un'immagine sostituisce un'altra. In entrambi i casi, Dreamweaver include una finestra di dialogo speciale per i rollover che rende la creazione di un semplice effetto rollover uno dei comportamenti più facili da applicare.
Per creare un'immagine di rollover usando la finestra di dialogo Inserisci immagine di rollover Inserisci di Dreamweaver, seguire questi passaggi:
1. Fai clic per posizionare il cursore sulla pagina in cui desideri visualizzare il rollover.
Gli effetti di rollover richiedono almeno due immagini: una per lo stato iniziale e una per lo stato di rollover. Puoi utilizzare due immagini diverse o due simili, ma entrambe dovrebbero avere le stesse dimensioni. In caso contrario, si ottengono strani effetti di ridimensionamento perché entrambe le immagini devono essere visualizzate esattamente nello stesso spazio sulla pagina.
2. Scegli Inserisci -> Oggetti immagine -> Immagine rollover.
Viene visualizzata la finestra di dialogo Inserisci immagine di rollover.
3. Nella casella Nome immagine, assegna un nome all'immagine.
Prima di poter applicare un comportamento a un elemento, ad esempio un'immagine, l'elemento deve avere un nome in modo che lo script di comportamento possa fare riferimento a esso. Puoi dare un nome agli elementi che ti piacciono purché non utilizzi spazi o caratteri speciali.
4. Nella casella Immagine originale, specifica la prima immagine che vuoi vedere. Utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.
Se le immagini non sono già nella cartella principale del sito, Dreamweaver le copierà nel sito quando creerai il rollover.
5. Nella casella Immagine rollover, inserisci l'immagine che desideri rendere visibile quando i visitatori spostano i loro cursori sulla prima immagine.
Anche in questo caso, è possibile utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.
6. Seleziona la casella di controllo Immagine di rollover pre-caricamento per caricare tutte le immagini di rollover nella cache del browser quando la pagina viene caricata per la prima volta.
Se non si sceglie di eseguire questo passaggio, i visitatori potrebbero subire un ritardo perché la seconda immagine non verrà scaricata fino a quando non viene eseguito il passaggio del mouse sull'immagine originale.
7. Nella casella Quando fatto clic, vai all'URL, inserisci qualsiasi indirizzo Web o naviga per individuare un'altra pagina nel tuo sito a cui desideri collegarti.
Se non si specifica un URL, Dreamweaver inserisce automaticamente il simbolo # come segnaposto.
8. Clicca OK.
Le immagini vengono automaticamente impostate come rollover.
9. Fai clic sull'icona a forma di globo nella parte superiore dell'area di lavoro per visualizzare in anteprima il tuo lavoro in un browser e verificare come funziona il rollover.
