Un rotolo sopra effetto provoca un elemento di design della pagina Web modificare quando l'utente mouses sopra esso. Questo è utilizzato per evidenziare i pulsanti e scambiare le immagini per rendere i siti Web più dinamica e reattiva all'input dell'utente. Dreamweaver CS5, editor HTML High-end di Adobe, ha un certo numero di modi per configurare questo tipo di effetto. Che uno è utilizzare dipende da quale browser di destinazione.

Componenti necessari

Un rotolo sopra effetto richiede almeno due immagini. La prima immagine è l'immagine iniziale visualizzata nella pagina Web quando si carica, e la seconda immagine ottiene scambiata quando il cursore è messo sopra la prima immagine. Una terza immagine opzionale può essere utilizzata come una sostituzione per quando l'utente fa clic sull'immagine stessa. Queste immagini possono essere fatto in Photoshop o un altro editor di immagini, come un insieme in modo che tutti gli elementi di testo o elementi grafici sono spaziati in modo identico su ogni immagine.

Utilizzando JavaScript

Modo predefinito di Dreamweaver per farlo rotolare immagini è con JavaScript. Si definisce un comportamento collegato a un elemento specifico nella pagina, e tale comportamento ha azioni specifiche risponde a. Questi comportamenti e le azioni sono versioni semplificate di codice JavaScript comunemente usati; Guarda su vista di Dreamweaver"codice" per vedere il JavaScript messe in atto sulla tua pagina Web come si esegue questa operazione. Il comportamento specifico che viene aggiunto per un rotolo di immagine JavaScript sopra effetto è il comportamento dell'immagine di Swap.

Utilizzando i CSS

Fogli di stile CSS, o CSS, sono un modo per separare l'aspetto del testo e gli aspetti posizionali dei vari elementi in una pagina Web dal testo effettivo stesso. CSS utilizzabile anche per generare immagine roll overs e drop-down menu in Dreamweaver, se richiede una modifica manuale di codice per farlo. Il vantaggio di fare questo con i CSS è che funziona anche quando un utente esegue il suo browser con JavaScript disattivato. Lo svantaggio è che non è così flessibile e un po' più difficile impostare la prima volta. Permette anche di definire roll over per un intero sito Web che vengono caricati in una volta, piuttosto che ogni volta che viene caricata una pagina.

Avviso

Ogni volta che si utilizza un'immagine rotolare con JavaScript, si stanno causando la pagina Web per caricare due o tre immagini. Questo può rallentare il tempo di caricamento della pagina Web per i nuovi visitatori, potenzialmente causando loro di colpire il pulsante "Indietro". Come con molti elementi di Web design, è una questione di se una più lenta velocità di caricamento pagina vale l'attrattiva aggiunto sul sito Web.