Come incorporare un rollover su un GIF

July 24

Come incorporare un rollover su un GIF


Quando si visita i siti, è possibile notare la modifica pulsanti di navigazione con il semplice tocco di un puntatore del mouse. Questo effetto è chiamato effetto rollover. Si può venire ottenuto manipolando la vostra immagine, o GIF, i file attraverso due metodi: inserendo un codice JavaScript o attraverso il Cascading Style Sheet, o CSS. Ogni metodo funziona allo stesso modo, ma è implementato in modo diverso. Entrambi sono ampiamente utilizzati, ma gli utenti con javascript disabilitati sul loro browser potrebbe non vedere questo effetto.

istruzione

utilizzando JavaScript

1 Creare due versioni del file GIF: una versione per quando il mouse passa su di esso, e l'altro nel suo stato normale.

2 Inserire il GIF in una pagina Web utilizzando il seguente codice HTML:

<A href = "yoursite.com" onMouseOver = "gifOver (); return true;" onMouseOut = "gifOut (); return true;" >

<Img width = nome myimage = 35 height = 35 border = 0

con il sito che si desidera che l'immagine collegamento a, e "normal.gif" con il nome del file GIF creato nel suo stato normale.

3 Aggiungere il codice JavaScript per scambiare le immagini nella sezione <HEAD> della pagina Web:

<Script language = "JavaScript">

if (document.images) {

img_on = nuova immagine (); img_on.src = "mouseover.gif";

img_off = nuova immagine (); img_off.with il nome del GIF creata per quando il mouse passa sopra l'immagine e "normal.gif" con l'immagine nel suo stato normale.

4 Salvare le modifiche alla pagina Web.

utilizzando i CSS

5 Creare un'immagine GIF nel suo stato normale e aggiungere lo stato del mouse-over dell'immagine in basso. Entrambe le immagini devono essere uguali in altezza. Ad esempio, se il GIF normale è 35 per 35 pixel, il GIF mouse sopra dovrebbe essere 35 di 35 pixel. In totale, l'intera immagine dovrebbe essere di 70 pixel di altezza in questo esempio. Salvare l'immagine.

6 Inserire il GIF nella pagina Web utilizzando il seguente codice HTML:

<a href="yourwebsite.com" id="rollover"> testo qui </a>

Sostituire "yourwebsite.com" con l'URL in cui i punti di immagine per e "testo qui" con il testo che si desidera visualizzare in cima alla vostra immagine GIF. Se non si desidera visualizzare il testo, si può mettere un distanziatore come "" o inserire un'immagine GIF trasparente vuoto.

7 Aprire il Blocco note e creare un foglio di stile con il seguente codice:

un rollover # {

fondo: URL (myimage.gif);

blocco di visualizzazione;

width: 35px;

Altezza: 35px;

}

un rollover #: hover {

background-position: 0 -35px;

}

Sostituire "myimage.gif" con il nome del file GIF, e l'altezza e il peso con le dimensioni della vostra immagine. Salvarlo come "rollover.css."

8 Inserire il foglio di stile nella sezione <HEAD> della pagina Web utilizzando questo codice:

<Link rel = "stylesheet" type = "text / css" href = "rollover.css" />

9 Salvare la pagina Web.