June 25
pulsanti rollover animati cambiano colore, la dimensione e la trasparenza anche quando si tira il mouse su di loro. Rollover creano un effetto di animazione familiare che molti utenti del web si aspettano quando si passa sopra un pulsante. immagini rollover possono anche fornire un feedback informativo per un utente. Ad esempio, il colore di un pulsante potrebbe cambiare in rosso quando si sta per fare clic per eseguire un compito fondamentale. Ci sono diversi modi per creare effetti rollover pulsante animati. Se non si desidera scrivere codice JavaScript, generare gli effetti utilizzando HTML.
1 Aprire un editor di immagini e creare un nuovo file. Nome del file "prima di rollover".
2 Utilizzare gli strumenti di ellisse o rettangolo per disegnare una forma pulsante.
3 Applicare effetti di smusso per rendere l'aspetto forma come un pulsante. Aggiungere testo al pulsante se si desidera che il pulsante per avere un'etichetta di testo.
4 Salvare l'immagine come file GIF. Web designer di solito usano il formato GIF per la creazione di immagini di piccole dimensioni.
5 Copiare l'immagine e incollarlo in un nuovo file. Nome di questo file "rollover_button2." Il browser visualizzerà l'immagine quando si sposta il mouse sul pulsante.
6 Selezionare il pulsante e cambiare il suo colore regolando tonalità e saturazione dell'immagine. Vedere la documentazione fornita con il vostro editor di immagini per i dettagli.
7 Applicare un effetto ombra per il pulsante se vuole aumentare l'effetto 3D.
8 Modificare il testo del pulsante se si desidera che il pulsante per visualizzare testo diverso quando il mouse sopra l'immagine.
9 Salvare l'immagine come un file GIF.
10 Salvare copie di entrambe le immagini in un formato nativo per il programma di fotoritocco. Photoshop, per esempio, ha un formato nativo di .psd. Paint.Net ha un formato nativo di PDN. Controllare il file di aiuto che viene fornito con il vostro programma per determinare il suo formato di immagine nativa. Con la creazione di copie utilizzando questo formato, troverete più facile fare modifiche alle immagini, se si decide di aggiornare in un secondo momento.
11 Creare un nuovo file HTML.
12 Aggiungere questo codice alla sezione di corpo del file:
<Img src id = "rolloverTest" src = "before_roller.gif"
onmouseover = "document.images [0] = .src 'before_rollover.gif';"
onMouseOut = "document.images [0] = .src 'after_rollover.gif'>
L'evento onmouseover visualizzerà l'immagine before_rollover quando si posiziona le si libra mouse sull'immagine. L'evento onmouseout visualizzerà l'immagine after_rollover quando il mouse lascia l'immagine. I valori dei parametri src corrispondono ai nomi delle immagini dei pulsanti che si è creato.
13 Carica tutti i file al tuo sito web e verificare l'effetto rollover animato.