Come creare i rollover in Adobe Dreamweaver CS6 - dummies

In Adobe Dreamweaver CS6, puoi inserire oggetti immagine, inclusi segnaposti immagine, rollover immagini (le immagini che cambiano quando un utente visualizza il mouse sull'immagine), barre di navigazione e HTML di Fireworks. Puoi accedere a questi oggetti immagine scegliendo Inserisci → Oggetti immagine.

Per creare un'immagine di rollover, seguire questi passaggi:

1Crea le immagini da utilizzare come rollover.

È possibile generare queste immagini in Fireworks, Illustrator, Photoshop o qualsiasi altra applicazione in grado di salvare immagini ottimizzate per il web. Per ottenere i migliori risultati, crea immagini che abbiano esattamente la stessa larghezza e altezza.

2Posizionare il cursore sulla pagina ovunque si desideri visualizzare il rollover e selezionare Inserisci → Oggetti immagine → Immagine rollover o fare clic sul pulsante Immagine rollover nel pannello Inserisci.

Viene visualizzata la finestra di dialogo Inserisci immagine di rollover.

3 Digitare un nome immagine senza spazi nel campo di testo Nome immagine.

Questo nome viene utilizzato nello script che crea il rollover.

4Fare clic sui pulsanti Sfoglia a destra dei campi di testo Immagine originale e Immagine rollover per individuare l'immagine che si desidera visualizzare come predefinita nella pagina.

L'immagine appare solo quando qualcuno alza il puntatore del mouse sull'immagine.

5Lascia selezionata la casella di controllo Immagine di rollover Preload.

Questa opzione scarica l'immagine di rollover quando la pagina viene scaricata per evitare ritardi nei rollover.

6 Digita un testo alternativo adeguatamente descrittivo.

Ovviamente, lo inserirai nel campo di testo Alt.

7Nel campo Fai clic su Vai al campo di testo URL, indica a Dreamweaver dove gli spettatori sono diretti quando fanno clic sull'immagine di rollover.

Puoi fare clic sul pulsante Sfoglia per individuare un'altra pagina nel tuo sito o inserire un URL.

Se si effettua il collegamento a un sito Web diverso, è necessario includere il prefisso // all'inizio dell'URL. Se si lascia vuoto, Dreamweaver aggiungerà automaticamente un collegamento morto (#).

8 Fare clic su OK.

L'immagine di rollover viene creata sulla pagina.

9Per visualizzare l'anteprima della nuova immagine di rollover, selezionare File → Anteprima nel browser o fare clic sul pulsante Vista dal vivo sulla barra degli strumenti Documento.

Se non si dispone ancora di un collegamento reale da utilizzare per un pulsante o un collegamento ipertestuale, è possibile inserire un cancelletto (#) per creare un collegamento morto. Il link o il pulsante appare cliccabile ma non va da nessuna parte quando si fa clic. Questa opzione è migliore della pressione della barra spaziatrice per creare uno spazio vuoto come collegamento, perché quel collegamento mostrerà un errore Pagina non trovata quando si fa clic.