Un file GIF animato e una sola riga di codice HTML sono tutto ciò che serve per creare un effetto mouseover frizzante. Altri supporti, ad esempio giochi, offrono una sede per questo effetto, ma le pagine Web forniscono un facile mezzo per progettisti digitali per creare la scintilla animata d'inizio. Essere consapevoli del fatto che i fotogrammi più si inserisce nella GIF animata, più tempo ci vorrà la pagina Web contenente quel GIF per caricare. Per questo motivo, è necessario mantenere animazioni a meno di 20 frame come una regola.

Creare GIF animate

Se si utilizza un'immagine GIF animata per creare l'effetto della scintilla, il primo passo è di rendere l'immagine GIF. Diversi programmi e servizi esistono per rendere questi, tra cui GIMP e i siti Web Picasion, fare una GIF e GIF Ninja. Per utilizzare un programma di elaborazione delle immagini, prima di creare un nuovo documento eseguendo il comando "Nuovo" del programma. Specificare un formato di documento con una dimensione molto piccola altezza, ad esempio 20 pixel, affinché venga visualizzata l'immagine GIF come sfondo al testo di una pagina Web o a pulsanti, che sono gli elementi dello schermo relativamente piccolo. Utilizzare lo strumento "Pennello" del programma per disegnare stelle colorate su uno sfondo trasparente. Dipingere diversi strati di questi, che producono i fotogrammi di animazione del GIF. Eseguire gli strumenti del programma per la conversione di strati in fotogrammi di animazione, quindi salvare l'animazione risultante con un nome come "sparkle.gif" e con un tipo di file di immagine GIF. Questo tipo di file è possibile memorizzare le animazioni, a differenza dei file JPEG e altri tipi.

Rendere la pagina HTML generico

Dopo aver creato l'animazione scintilla sotto forma di un file GIF animato, creare una pagina Web che viene eseguito tale animazione quando si passa il cursore del mouse sopra uno dei suoi elementi, ad esempio un pulsante o un collegamento. Il primo passo nella creazione di questa pagina è di scrivere le istruzioni HTML che definiscono una pagina generica. Seguono queste istruzioni.

< html >
< head >
< / stile >
< / head >
< corpo >
< / body >
< / html >

Fogli di stile CSS

La pagina Web generica fornisce un framework per la scrittura le istruzioni HTML che caricare e applicano l'animazione di scintilla. L'istruzione che in realtà si riferisce che l'animazione è un esempio di codice CSS o fogli di stile CSS. CSS fornisce istruzioni di formattazione per tutti gli elementi sulla tua pagina. In particolare, si può posizionare, animare, colore ed eseguire altre operazioni su tutti gli elementi nella pagina, da piccole a grandi. L'elemento CSS "background" consente di specificare quale immagine viene visualizzata con un link, paragrafo o altro elemento di pagina. La parola chiave "hover" è un modo di utilizzo di CSS per attivare la visualizzazione di un'immagine di sfondo è specificare ogni volta che dei visitatori di una pagina Web passa il suo mouse sopra un collegamento.

Provare l'attributo "background" per imparare a caricare una frizzante animazione GIF. Incollare la seguente istruzione di stile dopo il tag "< STYLE >" nella tua pagina Web.
< style type = "text/css" > a:hover{background:url('SparkleAnim.gif');}

Dopo il tag "< BODY >" della tua pagina Web, inserire l'istruzione "< a href =" http://www.whitehouse.gov & quot; > Questa dichiarazione si applica la dichiarazione CSS dalla sezione "< STYLE >" al link WhiteHouse.gov. Salvare la pagina Web nella stessa cartella come quello con il file "sparkle.gif".

Visualizzare la pagina

Dopo aver salvato la pagina Web con il codice CSS per la creazione di un'animazione di sparkle, caricare la pagina nel browser per visualizzare l'effetto della scintilla. Il comando "Apri" del menu "File" del tuo browser Web, quindi spostarsi e fare doppio clic la pagina Web appena citata. Passa il mouse sopra il link "il WhiteHouse.gov". Come si esegue questa operazione, l'istruzione di CSS con l'attributo "background" caricherà l'animazione di scintilla, e che l'animazione giocherà. Quando si rimuove il mouse dal link, si ferma l'animazione.