Come fare rollover immagini in HTML Testo

March 21

Come fare rollover immagini in HTML Testo


Con i milioni di siti web su Internet, è fondamentale che il vostro sito sia memorabile e unico. Una tecnica utilizzata per aggiungere un effetto dinamico di siti web è immagini rollover, noto anche come pulsanti rollover. In sostanza, quando il visitatore passa sopra un'immagine, cambierà a qualcos'altro. Quando l'utente sposta fuori l'immagine, si tornerà alla grafica originale. rollover comuni includono effetti sottili, come cambiare il colore dell'immagine o il tipo di carattere. È possibile creare l'immagine di rollover proprio con la formattazione HTML di base a diversi programmi web-design.

istruzione

1 Creare un nuovo documento della dimensione desiderata in pixel in software di fotoritocco come Photoshop. Creare le immagini dei pulsanti e rollover. Le due immagini devono essere identiche dimensioni.

2 Salvare entrambe le immagini separatamente navigando nel menu "File" e facendo clic su "Salva". Salvare le immagini come file PNG o JPEG, GIF o. Anche se i file JPEG e GIF sono più comunemente utilizzati, i file PNG conservano la trasparenza. Assicurarsi di salvare l'immagine nella cartella principale locale del tuo sito web.

3 Aprire il software di progettazione web desiderato, come Adobe Dreamweaver. Fare clic sul pulsante Aggiorna nella libreria per aggiornare cartella principale biblioteca e locale del sito. Individuare le immagini nella cartella principale locale.

4 Passare a "Codice View" della pagina Web selezionando il pulsante vista Codice.

5 Tipo "<a href=" "> http://yourwebsite.com <img onmouseover =" "IMAGE2 'this.src =" onmouseout = "" IMAGE1' this.src = "alt =" Fare clic su Me "> </ a > "senza l'apertura e chiusura virgolette nel codice.

6 Sostituire "http://yourwebsite.com" con il nome del tuo sito web. Sostituire "IMAGE1" e "IMAGE2" con il nome del pulsante e rollover immagini. La tua immagine rollover sostituirà "IMAGE2", mentre "IMAGE1" sta per l'immagine iniziale tasto.