May 24
Effetti immagine di rollover sono una delle caratteristiche di progettazione comuni dei siti web più avanzate. Quando si posiziona il cursore sopra l'immagine con un effetto rollover, l'immagine cambia aspetto finché non si sposta il cursore lontano. Ci sono molti metodi per la creazione di effetti di rollover, ma uno dei più snella e dall'aspetto professionale è quello di farli in CSS.
1 Creare le due immagini necessarie per il rollover immagine nel vostro software di editing grafico e salvarli come file jpg. Assicurarsi che entrambe le immagini hanno le stesse dimensioni in pixel esatte e la stessa quantità, se del caso, di spazio vuoto che circonda l'immagine in ogni file jpg.
2 Creare un nuovo documento grafico della stessa larghezza delle immagini ed esattamente il doppio dell'altezza di entrambi.
3 Incollare le due immagini nel nuovo documento. Posizionare l'immagine iniziale a l'immagine del rollover in basso in alto e; essi devono essere perfettamente allineati orizzontalmente tra loro e occupano tutto lo spazio disponibile nel documento. Salvare il nuovo file come JPG e denominarlo qualcosa descrittiva come rolloverimage.jpg. Questo è l'unico file di immagine che si intende utilizzare per il ribaltamento; non è necessario l'originale due.
4 Carica l'immagine sul tuo sito web o di un servizio di hosting di immagini gratuito e salvare la sua URL completo.
5 Aprire il documento HTML in un word processor e individuare i tag head (<head> e </ head>). Essi dovrebbero essere in cima del documento.
6 Aggiungere tag di stile CSS tra i tag head, se non sono già presenti. I tag dovrebbe essere simile a questo: <style type = "text / css"> e </ style>.
7 Aggiungere codice CSS tra i tag di stile per definire il comportamento iniziale della vostra immagine rollover. Il codice di base per questo è a. {blocco di visualizzazione; Larghezza: px; Altezza: px; fondo: URL () no-repeat 0 0; overflow: hidden; text-trattino: -10000px; font-size: 0px; line-height: 0px;}.
8 Aggiungere i valori necessari nel codice CSS per farlo applicare alla vostra immagine. Aggiungere il valore dei pixel di larghezza del file rolloverimage.jpg appena prima del primo px, il valore dei pixel di metà altezza del file appena prima della seconda px e l'URL completo del file di immagine tra parentesi.
9 Definire un nome per la classe CSS l'immagine del rollover. Questo è ciò che si intende utilizzare per indicare il codice HTML che l'immagine deve usare il CSS appena inserita, e può essere qualsiasi parola singola che si desidera. Inserisci questa parola subito dopo il periodo dopo l'una iniziale nel codice CSS, senza spazio tra loro. Per esempio, se si desidera chiamare la classe "rollinover," il codice CSS dovrebbe iniziare con a.rollinover.
10 Aggiungere una seconda riga di codice CSS tra il codice appena immesso e il tag di stile di chiusura. Questa linea definirà ciò che accade quando il visitatore passa il cursore sopra l'immagine. Il codice di base per questo è: hover. {Background-position: 0 -px;}.
11 Aggiungere le informazioni necessarie per la seconda linea per renderlo applicabile alla vostra immagine. Aggiungere il nome della classe definito subito dopo il periodo successivo al passaggio del mouse senza uno spazio, e aggiungere il valore dei pixel di metà altezza del file immagine tra il cruscotto e il px. Ad esempio, se hai chiamato la classe "rollinover" e l'immagine è alto 100 pixel, il codice sarebbe simile a questa: a: hover.rollinover {background-position: 0 -50px;}.
12 Individuare dove nel codice che si desidera inserire l'immagine.
13 Aggiungere il codice <a </a> testo class=""> in cui si desidera visualizzare l'immagine. Aggiungere il nome di classe definito nel CSS tra le virgolette, e sostituire la parola "testo", con una breve descrizione dell'immagine (o del collegamento verrà utilizzato come, se del caso).
14 Aggiungere il codice href = "" tra le prime virgolette e la staffa della apertura di un tag di chiusura, con l'URL si desidera che l'immagine di collegamento a tra il nuovo set di virgolette, se l'immagine è quella di essere un collegamento .