HTML Rollover Tutorial

July 18

immagini rollover può aggiungere un effetto dinamico a quasi qualsiasi sito web. Lo scopo di un ribaltamento è quello di visualizzare immagini o testo separati per l'utente una volta il tasto o l'immagine è stata estesa con il mouse. Il rollover può avere un effetto sottile - come la realizzazione di testo in grassetto o fare una foto di una versione più piccola o più grande dell'originale - oppure il rollover può avere un effetto drammatico, con completamente nuovo testo e immagini.

Preparazione Rollover Immagine

Prima di poter effettuare un ribaltamento HTML, è necessario prima raccogliere le due immagini da utilizzare. Una immagine verrà utilizzata come il pulsante, e l'altra immagine sarà il vostro rollover. È possibile creare queste immagini soli con l'ausilio di software di grafica come Adobe Photoshop o Illustrator, oppure si può scaricare grafica gratis pulsante da www.freebuttons.com. Nel preparare le immagini, assicurarsi che essi hanno le stesse dimensioni (pixel). Inoltre, assicurarsi che i file vengono salvati in formato JPEG o GIF; questi formati di file sono universalmente accettate attraverso il web. Dopo aver raccolto le immagini, salvarle nella cartella "Immagini" del tuo sito web.

Creazione del rollover

Ora che avete le immagini raccolte e salvate nella cartella "Immagini" del tuo sito web, si è pronti per creare il rollover. Ci sono diversi programmi software di web design che è possibile utilizzare, tra cui Adobe Dreamweaver o Microsoft FrontPage. È inoltre possibile aggiungere codice HTML grezzo di inserire il pulsante rollover. Copiare e incollare il seguente codice nella tua pagina web in cui si desidera visualizzare il rollover, sostituendo "yourwebsite.com" e "IMAGE1" e "IMAGE2" con i nomi del sito e la grafica:
"<a Href="&lt;img"> http://yourwebsite.com"> & lt; img onmouseover = "this.src = 'IMAGE2'" onmouseout = "this.src = 'IMAGE1'" alt = "Fare clic su Me "> </a>"


Articoli Correlati