Come creare un'immagine di rollover semplice in Dreamweaver - dummies

I rollover sono una caratteristica così popolare che Dreamweaver include una finestra di dialogo speciale solo per i rollover: la finestra di dialogo Inserisci immagine di rollover. Le immagini di rollover, come suggerisce il nome, sono progettate 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.

È possibile creare effetti di rollover più complessi con l'opzione Scambia immagine dal pannello Comportamenti. L'opzione Scambia immagine consente di modificare più immagini contemporaneamente.

Per creare un semplice effetto di rollover con due immagini utilizzando la finestra di dialogo Inserisci immagine di rollover di Dreamweaver, seguire questi passaggi:

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 utilizzare due immagini diverse o due simili, ma entrambe dovrebbero avere le stesse dimensioni. Altrimenti, si vedono strani effetti di ridimensionamento perché entrambe le immagini devono essere visualizzate esattamente nello stesso spazio sulla pagina.
Scegli Inserisci → Immagine → Immagine di rollover.

In alternativa, è possibile utilizzare l'elenco a discesa disponibile dall'icona Immagini nel pannello Inserimento comune e selezionare Immagine di rollover.

Viene visualizzata la finestra di dialogo Inserisci immagine di rollover.
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.
Nella casella Immagine originale, specificare la prima immagine che si desidera visualizzare. Utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

Se le immagini non sono già nella cartella del sito locale, Dreamweaver le copia nel sito quando si crea il rollover.
Nella casella Immagine rollover, inserire l'immagine che si desidera rendere visibile quando un visitatore sposta il cursore sulla prima immagine.

Anche in questo caso, è possibile utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.
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 poiché la seconda immagine non verrà scaricata fino a quando non viene spostato un cursore sull'immagine originale.
Nel campo Testo alternativo, inserire una descrizione delle immagini.

Il testo alternativo è facoltativo ma consigliato poiché l'uso di parole chiave può migliorare l'ottimizzazione dei motori di ricerca.Allo stesso modo, il testo alternativo è una parte fondamentale dell'accessibilità del Web perché questo testo viene letto ad alta voce da speciali browser chiamati screen reader, che vengono utilizzati da persone non vedenti e altri con vista o mobilità limitata. Il testo alternativo viene visualizzato solo nel browser se le immagini non sono visibili.
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 collegare.

Se non si specifica un URL, Dreamweaver inserisce automaticamente il simbolo # come segnaposto nel codice.

Il simbolo # è una tecnica comune per la creazione di collegamenti che non si collegano da nessuna parte. Poiché le immagini di rollover che non si collegano a un'altra pagina hanno molti grandi usi, questa tecnica è utile. Ricorda che se vuoi che il tuo rollover si colleghi, devi sostituire il simbolo # con un link a un'altra pagina.
Fare clic su OK.

Le immagini vengono impostate automaticamente come rollover.
Per visualizzare il rollover in azione, salvare il file e fare clic sull'icona del globo nella parte superiore dell'area di lavoro per visualizzare l'anteprima della pagina in un browser Web.

Puoi vedere come funziona il rollover nella vista Progettazione di Dreamweaver o utilizzando l'opzione Vista live. Quando fai clic sul pulsante Live nella parte in alto a sinistra dell'area di lavoro, in pratica trasforma Dreamweaver in un browser Web che visualizza pagine molto simili al browser Chrome.

Quando si visualizza in anteprima una pagina sul computer che include un'immagine di rollover, alcuni browser Web visualizzeranno un avviso che indica che è necessario consentire ai controlli ActiveX di visualizzare la pagina. Questo è un avviso di sicurezza che appare solo quando la pagina viene aperta sullo stesso computer in cui la pagina viene salvata.

Se pubblichi la pagina su un server web e la visualizzi su una connessione Internet, tu e i visitatori del tuo sito non vedrai questo errore.