Esercitazione per la creazione di un'immagine di rollover in Dreamweaver

Un'immagine di rollover è un'immagine che cambia in qualche altra immagine quando tu o il tuo cliente passate il mouse sopra di essa. Questi sono comunemente usati per creare un tocco interattivo come pulsanti o schede. Ma puoi creare immagini di rollover su qualsiasi cosa.

Questo tutorial è progettato per aiutarti a creare un'immagine di rollover in Dreamweaver. È destinato all'uso da parte di persone che utilizzano le seguenti versioni di Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Requisiti per questo tutorial

• DreamweaverUna delle versioni elencate sopra.
• Un'immagine originaleAssicurati di ottimizzare questa immagine. Ciò consentirà alle tue pagine di caricarsi più rapidamente.
• L'immagine di rolloverQuesta immagine dovrebbe avere le stesse dimensioni dell'immagine originale. E, come l'immagine originale, dovrebbe essere ottimizzato per aiutare i tempi di caricamento della pagina.
• Una pagina webQuesta è la pagina HTML in cui inserirai la tua immagine di rollover.

Iniziare

1. Avvia Dreamweaver
2. Apri la pagina Web in cui desideri il tuo rollover

Inserisci un oggetto immagine di rollover

Dreamweaver semplifica la creazione di un'immagine di rollover.

1. Vai al menu Inserisci e verso il basso Oggetti immagine sottomenu.
2. Selezionare Rollover dell'immagine o Immagine di rollover.

Alcune versioni precedenti di Dreamweaver chiamano invece le immagini interattive "Oggetti immagine".

Dì a Dreamweaver quali immagini utilizzare

Dreamweaver apre una finestra di dialogo con i campi che è necessario compilare per creare l'immagine di rollover.

Nome dell'immagine

Scegli un nome immagine che è unico per la pagina. Dovrebbe essere tutta una parola, ma puoi usare numeri, caratteri di sottolineatura (_) e trattini (-). Questo sarà usato per identificare l'immagine da cambiare.

Immagine originale

Questo è l'URL o la posizione dell'immagine che inizierà nella pagina. È possibile utilizzare URL di percorso relativi o assoluti in questo campo. Questa dovrebbe essere un'immagine che esiste sul tuo server web o che dovrai caricare con la pagina.

Immagine di rollover

Questa è l'immagine che apparirà quando passi il mouse sull'immagine. Proprio come l'immagine originale, questo può essere un percorso assoluto o relativo all'immagine, e dovrebbe esistere o essere caricato quando carichi la pagina.

Immagine di rollover pre-caricamento

Questa opzione è selezionata per impostazione predefinita perché consente di visualizzare il rollover più rapidamente. Scegliendo di precaricare l'immagine di rollover, il browser Web lo memorizzerà in una cache finché il mouse non lo scorrerà.

Testo alternato

Un buon testo alternativo rende le tue immagini più accessibili. Si dovrebbe sempre usare un tipo di testo alternativo quando si aggiungono immagini.

Quando si fa clic, vai all'URL

La maggior parte delle persone farà clic su un'immagine quando ne vedrà una su una pagina. Quindi dovresti avere l'abitudine di renderli cliccabili. Questa opzione ti consente di specificare la pagina o l'URL per portare il visualizzatore a quando fanno clic sull'immagine. Ma questa opzione non è necessaria per creare un rollover.

Quando hai completato tutti i campi, fai clic su ok per fare in modo che Dreamweaver crei la tua immagine di rollover.

Dreamweaver scrive il codice JavaScript per te

Se apri la pagina nella vista codice vedrai che Dreamweaver inserisce un blocco di JavaScript nel del tuo documento HTML. Questo blocco include le 3 funzioni necessarie per scambiare le immagini quando il mouse si sposta su di esse e la funzione di precarico se hai optato per quello.

funzione MM_swapImgRestore ()funzione MM_findObj (n, d)funzione MM_swapImage ()funzione MM_preloadImages ()

Dreamweaver aggiunge l'HTML per il rollover

Se hai scelto di caricare le immagini rollover di Dreamweaver, visualizzerai il codice HTML nel corpo del documento per richiamare lo script di precarico in modo che le immagini vengano caricate più rapidamente.

onload = "MM_preloadImages ( 'shasta2.jpg')"

Dreamweaver aggiunge anche tutto il codice per la tua immagine e lo collega (se hai incluso un URL). La porzione di rollover viene aggiunta al tag anchor come attributi onmouseover e onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"

Prova il rollover

Guarda l'immagine di rollover completamente funzionale e scopri cosa c'è nella mente di Shasta.