Creazione di unimmagine rollover in Dreamweaver CS3

In Dreamweaver, le immagini rollover, come suggerisce il nome, sono progettate per reagire quando qualcuno fa scorrere il cursore su un'immagine. L'effetto può essere drammatico come l'immagine di un cane sostituito dall'immagine di un leone, o sottile come il colore di una parola che cambia quando un'immagine ne 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 rollover utilizzando la finestra di dialogo Inserisci immagine rollover di Dreamweaver, attenersi alla seguente procedura:

1. Fare clic per posizionare il cursore sulla pagina in cui si desidera visualizzare il rollover.

Gli effetti di rollover richiedono almeno due immagini: una per lo stato iniziale e una per lo stato di rollover. Puoi usare due immagini diverse o due simili, ma entrambe dovrebbero avere le stesse dimensioni. Altrimenti, ottieni strani effetti di ridimensionamento perché entrambe le immagini devono essere visualizzate esattamente nello stesso spazio sulla pagina.

2. Scegliere Inserisci -> Oggetti immagine -> Immagine rollover.

Viene visualizzata la finestra di dialogo Inserisci immagine rollover.

3. Nella casella Nome immagine, dai un nome alla tua 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 del comportamento possa farvi riferimento. Puoi nominare gli elementi come preferisci, purché non utilizzi spazi o caratteri speciali.

4. Nella casella Immagine originale, specificare la prima immagine che si desidera sia visibile. Utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

Se le immagini non sono già nella cartella principale del tuo sito, Dreamweaver le copierà nel tuo sito quando crei il rollover.

5. Nella casella Immagine rollover, inserire l'immagine che si desidera rendere visibile quando i visitatori spostano il cursore sulla prima immagine.

Anche in questo caso, puoi utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

6. Selezionare la casella di controllo Precarica immagine rollover per caricare tutte le immagini rollover nella cache del browser al primo caricamento della pagina.

Se non scegli di eseguire questo passaggio, i tuoi visitatori potrebbero riscontrare un ritardo perché la seconda immagine non verrà scaricata finché il mouse non verrà spostato sull'immagine originale.

7. Nella casella Quando si fa clic, vai a URL, immettere un indirizzo Web o navigare per individuare un'altra pagina del sito a cui si desidera collegarsi.

Se non si specifica un URL, Dreamweaver inserisce automaticamente il segno # come segnaposto.

8. Fare clic su OK.

Le immagini vengono impostate automaticamente come rollover.

9. Fare clic sull'icona del globo nella parte superiore dell'area di lavoro per visualizzare in anteprima il lavoro in un browser e verificare come funziona il rollover.