Nwlapcug.com


Come creare pulsanti di Rollover animati

Come creare pulsanti di Rollover animati


Pulsanti di rollover animati cambiano colore, dimensione e trasparenza anche quando si tira il mouse sopra di loro. Rollover creano un effetto di animazione familiare che molti utenti del web si possono aspettare quando in bilico su un pulsante. Immagini di rollover possono anche fornire un feedback informativo a un utente. Ad esempio, il colore di un pulsante potrebbe cambiare al rosso quando si sta per fare clic per eseguire un'attività critica. Ci sono diversi modi per creare effetti di rollover pulsante animato. Se non volete scrivere codice JavaScript, generare gli effetti utilizzando HTML.

Istruzioni

Creare i pulsanti

1

Aprire un editor di immagini e creare un nuovo file. Nome del file "prima di"ribaltamento.

2

Utilizzare gli strumenti ellisse o un rettangolo per disegnare una forma di pulsante.

3

Applicare effetti di smussatura per rendere la forma simile a un pulsante. Aggiungere testo al pulsante se si desidera che il tasto per avere un'etichetta di testo.

4

Salvare l'immagine come file GIF. Web designer di solito uso il formato GIF durante la creazione di immagini di piccole dimensioni.

5

Copiare l'immagine e incollarlo in un nuovo file. Nome del file "rollover_button2." Il browser visualizzerà questa immagine quando si sposta il mouse sopra il pulsante.

6

Selezionare il pulsante e cambiare il suo colore regolando la tonalità e la saturazione dell'immagine. Vedere la documentazione fornita con il tuo editor di immagini per i dettagli.

7

Applicare un effetto di ombreggiatura al pulsante se desidera aumentare l'effetto 3D.

8

Se si desidera che il tasto per visualizzare il testo diverso quando il mouse passa sopra l'immagine, modificare il testo del pulsante.

9

Salva l'immagine come 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 programma per determinare il formato di immagine nativa. Con la creazione di copie utilizzando questo formato, lo troverete più facile apportare modifiche alle immagini, se si decide di aggiornare in seguito.

Creare il codice HTML

11

Creare un nuovo file HTML.

12

Aggiungere questo codice alla sezione 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 di before_rollover quando si posiziona il mouse si libra sopra l'immagine. L'evento onmouseout visualizzerà l'immagine di after_rollover quando il mouse lascia l'immagine. I valori di parametro src corrispondono ai nomi delle immagini del pulsante creato.

13

Caricare tutti i file al tuo sito Web e verificare l'effetto di rollover animati.

Consigli & Avvertenze

  • Chiamare funzioni JavaScript se si desidera creare animazioni complesse rollover (Vedi risorse). Funzioni JavaScript darvi la possibilità di intercettare gli eventi del mouse e applicare stili ai pulsanti CSS personalizzato.