È possibile utilizzare le immagini rollover sulle tue pagine web per aumentare l'interattività, e richiamare l'attenzione dell'utente di aree di rilevanza, come un'immagine usata come un pulsante. Un effetto rollover visivo conferma all'utente che l'immagine è interattivo, e si eseguire un'azione quando si fa clic. Spesso, Web designer aggiungere effetti 3D per dare il pulsante l'illusione di profondità quando viene premuto, o un punto culminante intorno al bordo pulsanti. Anche se le immagini rollover in grado di migliorare l'esperienza degli utenti, è importante non esagerare e usarli solo quando necessario, o perdono rapidamente il loro impatto.

istruzione

1 Avviare Adobe Dreamweaver CS3, quindi fare clic sul menu "File" e selezionare "Nuovo". Fare doppio clic su "HTML" dal menu "Tipo di pagina" per aprire una nuova pagina HTML.

2 Fare clic nel punto in cui si desidera che l'immagine di rollover aggiunto utilizzando il codice o il design vista di Dreamweaver. Fare clic sul menu "Inserisci", e quindi fare clic su "oggetti immagine" e "Immagine di rollover."

3 Digitare un nome univoco per l'immagine nella casella "Nome immagine". Fare clic sul pulsante "Sfoglia" accanto alla casella "immagine originale" per selezionare la posizione dell'immagine di partenza per mostrare. Fare clic sul pulsante "Sfoglia" accanto alla casella di "rollover dell'immagine" per selezionare la posizione dell'immagine di rollover. Inserire una descrizione dell'immagine nella casella "Testo alternativo" per gli utenti che non possono vedere le immagini nel loro browser. Infine, fare clic sul pulsante "Sfoglia" accanto alla casella "Vai a URL" per selezionare la pagina a cui si reindirizzare l'utente a dopo che lei fa clic sull'immagine.

4 Fare clic sul pulsante "OK" per inserire l'immagine rollover. Dreamweaver aggiunge automaticamente il codice HTML e JavaScript per il rollover dell'immagine.

5 Salvare la pagina e caricare sul server Web. Si dovrebbe anche caricare i file di immagine rilevanti per il rollover. Aprire la pagina nel browser Web e vedrete l'immagine iniziale visualizzata. Spostare il mouse sull'immagine per vedere l'immagine di rollover, e quindi fare clic sull'immagine per accedere alla pagina collegata.

Consigli e avvertenze

• Dreamweaver CS3 inserisce il JavaScript necessaria per il rollover dell'immagine nella testa della pagina. Dato che questo codice è spesso richiesto su più pagine, è possibile tagliare e incollare il codice JavaScript in un file esterno per velocizzare i tempi di caricamento della pagina.
• Mantenere le dimensioni dei file di immagini di rollover piccolo, come si sta caricando due immagini invece di uno, che andrà ad aggiungersi al tempo di caricamento della pagina.