Come creare pulsanti di scorrimento-Over

October 16

Come creare pulsanti di scorrimento-Over


Per agghindare la progettazione di un sito web e renderlo visivamente stimolante, è possibile aggiungere effetti alle sezioni interattive come ad esempio i pulsanti per la navigazione. Un metodo comunemente usato è un effetto di scorrimento-over o mouse. Questo permette ai visitatori di riconoscere parti cliccabili del sito scorrendo su un pulsante, che cambia colore o rivela testo. È possibile creare un effetto di scorrimento-over facile da implementare con Cascading Style Sheets (CSS).

istruzione

1 Aprire il software di editing delle immagini, come MS Paint, Photoshop o Corel Draw, e creare il pulsante. L'immagine deve essere due pulsanti su uno sopra l'altro. Il pulsante in alto è il pulsante i visitatori vedono quando il caricamento della pagina Web. Il pulsante di fondo è quello che vedono quando si scorrere sopra il pulsante in alto. Salvare l'immagine come un file GIF.

2 Inserire il seguente codice HTML, utilizzando un editor HTML come Dreamweaver o FrontPage, la pagina Web in cui si desidera inserire l'effetto di scorrimento-over:

<a id="mybutton" href="#" title="ThisIsMyButton"> <span> buttonname </ span> </a>

Sostituire "#" con l'URL che si desidera visitatori per andare dopo aver fatto clic sul pulsante.

3 Aprire un nuovo file sul vostro editor HTML, e digitare la seguente codice CSS:

myButton

{

blocco di visualizzazione;

width: 107px;

Altezza: 23px;

fondo: url ( "mybutton.gif") no-repeat 0 0;

}

myButton: hover

{

background-position: 0 -23px;

}

arco myButton

{

display: none;

}

Sostituire la larghezza pulsante con la larghezza dell'immagine creata. L'altezza è l'altezza totale di un pulsante. Se l'altezza di due pulsanti impilati è di 46 pixel, quindi immettere 23 pixel come l'altezza. Sostituire "mybutton.gif" con il nome della vostra immagine. Salvare il file CSS nella stessa directory come la pagina Web.

4 Modifica la pagina Web di includere il vostro file CSS aggiungendo il seguente codice nella sezione <head> del codice HTML:

<Head>

<Link rel = "stylesheet" type = "text / css" href = "scrollover.css" />

</ Head>

Sostituire "scrollover.css" con il nome del vostro file CSS.