Gli effetti di ribaltamento di immagine sono una delle caratteristiche del progetto comune di siti Web più avanzati. Quando si posiziona il cursore su un'immagine con un effetto di rollover, l'immagine cambia aspetto fino a quando si sposta il cursore distanza. Ci sono molti metodi per la creazione di effetti di rollover, ma uno dei più snella e dall'aspetto professionale è di farli in CSS.

Istruzioni

1

Creare le due immagini necessarie per il rollover immagine nel vostro software di editing grafico e salvarle come file jpg. Assicurarsi che entrambe le immagini hanno l'esatto stesse dimensioni in pixel e la stessa quantità, se del caso, di spazio vuoto che circonda l'immagine in ogni file jpg.

2

Creare un nuovo documento di grafica la stessa larghezza come le immagini ed esattamente due volte l'altezza di entrambi.

3

Incollare le due immagini nel nuovo documento. Posizionare l'immagine iniziale nella parte superiore e l'immagine di rollover nella parte inferiore; Essi devono essere allineati perfettamente orizzontalmente uno con l'altro e occupano tutto lo spazio disponibile nel documento. Salvare il nuovo file come jpg e il nome descrittivo come rolloverimage.jpg. Questo è l'unico file di immagine che si utilizzerà per il rollover; non è necessario il due originali.

4

Caricare l'immagine al tuo sito Web o a un servizio di hosting gratis di immagini e salvare l'URL completo.

5

Aprire il documento HTML in un word processor e individuare i tag testa (< head > e < / head >). Dovrebbero essere nella parte superiore del documento.

6

Aggiungere tag di stile CSS tra i tag di testa, se non sono già presenti. Il tag dovrebbe essere simile al seguente: < stile tipo = "text/css" > e < / stile >.

7

Aggiungere il codice CSS tra i tag di stile per definire il comportamento iniziale della tua immagine di rollover. Il codice di base per questo è a. {display: block; width: px; altezza: px; background: URL () no-repeat 0 0; overflow: nascosto; rientro del testo:-10000px; font-size: 0px; linea-altezza: 0px;}.

8

Aggiungere i valori necessari nel codice CSS per applicare all'immagine. Aggiungere il valore in pixel della larghezza del file rolloverimage.jpg appena prima la prima px, il valore del pixel di altezza del file appena prima la seconda px e l'URL completo del file di immagine tra la parentesi.

9

Definire un nome per CSS classe dell'immagine di rollover. Questo è quello che verrà utilizzato per indicare nel codice HTML che l'immagine deve utilizzare il CSS che hai appena inserito, e può essere ogni singola parola che si desidera. Inserisci la parola immediatamente dopo il periodo dopo l'iniziale nel codice CSS, senza spazio tra loro. Ad 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 che appena inserito e la chiusura stile tag. Questa linea sarà definire che cosa accade quando il visitatore passa il cursore sopra l'immagine. Il codice di base per questo è una: al passaggio del mouse. {background-position: 0 -px;}.

11

Aggiungere le informazioni necessarie per la seconda linea per renderlo applicabile alla vostra immagine. Aggiungere il nome della classe che è definita immediatamente dopo il periodo successivo al passaggio del mouse senza uno spazio e aggiungere il valore del pixel di altezza di metà del file immagine tra il cruscotto e il px. Ad esempio, se si chiamata la classe "rollinover" e l'immagine è di 100 pixel di altezza, il codice sarebbe simile questo: a:hover.rollinover {background-position: 0 - 50px;}.

12

Individuare dove nel codice che si desidera inserire l'immagine.

13

Aggiungere il codice < una classe = "" > testo < /a > dove si desidera l'immagine da visualizzare. Aggiungere il nome di classe definito nel CSS tra virgolette e sostituire la parola "testo" con una breve descrizione dell'immagine (o del collegamento verrà utilizzato come, se applicabile).

14

Aggiungere il codice href = "" tra le virgolette prime e la parentesi di chiusura dell'apertura segna un tag, con l'URL che si desidera l'immagine a cui collegarsi tra il nuovo set di citazione, se l'immagine deve essere un link.