È possibile utilizzare immagini di rollover sulle tue pagine web per aumentare l'interattività e attirare l'attenzione dell'utente aree di significato, come un'immagine utilizzata come un pulsante. Un effetto di rollover visual conferma all'utente che l'immagine è interattivo ed eseguirà un'azione quando cliccato. Spesso, Web Designer aggiungere effetti 3D per dare il pulsante l'illusione della profondità quando premuto, o luce intorno al bordo di pulsanti. Anche se immagini di rollover possono migliorare l'esperienza utente, è importante non esagerare e utilizzarli solo quando necessario, o perdono rapidamente il loro impatto.

Istruzioni

1

Avviare Adobe Dreamweaver CS3 e 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 nella posizione dove si desidera l'immagine di rollover aggiunto utilizzando codice di Dreamweaver o visualizzazione struttura. Fare clic sul menu "Inserisci" e poi clicca su "Oggetti Image" e "Immagine Rollover".

3

Digitare un nome univoco per l'immagine nella casella "Nome immagine". Fare clic sul pulsante "Sfoglia" accanto al "immagine originale" casella per selezionare il percorso dell'immagine iniziale per mostrare. Fare clic sul pulsante "Sfoglia" accanto alla casella "Immagine Rollover" per selezionare la posizione dell'immagine di rollover. Immettere una descrizione dell'immagine nella casella "Testo alternativo" per gli utenti non possono vedere le immagini nel loro browser. Infine, fare clic sul pulsante "Sfoglia" accanto alla casella "Go to URL" per selezionare la pagina a cui potrai reindirizzare l'utente a dopo lei fa clic sull'immagine.

4

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

5

Salvare la pagina e caricare sul vostro server Web. Devi anche caricare i file di immagine pertinente per il rollover. Aprire la pagina nel browser Web e vedrete l'immagine iniziale visualizzata. Spostare il mouse sopra l'immagine per vedere l'immagine di rollover e quindi fare clic sull'immagine per andare alla pagina collegata.

Consigli & Avvertenze

• Dreamweaver CS3 consente di inserire il codice JavaScript necessario per il rollover immagine nella testa della pagina. Come questo codice è spesso necessario su diverse 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 rollover piccolo, come si sono caricando due immagini invece di uno, che si aggiungerà al tempo di caricamento della pagina.