Mouse-over pulsanti sono pulsanti in una pagina web che cambiano quando il puntatore del mouse viene posizionato su di esso. Non c'è alcun limite al numero di unici mouse-over pulsanti che è possibile creare con anche solo un editor di immagini semplice e poche righe di codice. Mentre i pulsanti di rollover sono possibili fare utilizzando solo codifica, le immagini sono il percorso più semplice perché sono molto più semplici cambiare e modificare.

Istruzioni

1

Aprire il tuo programma. In questo esempio si utilizzerà Microsoft Paint, anche se è possibile utilizzare qualsiasi programma di editing delle immagini che preferisci, ad esempio Photoshop. In Windows 7, fare clic sul pulsante Start, digitare "Dipingere" e premi INVIO.

2

Progettare il pulsante. Nella sezione immagine nella scheda Home, fare clic su re-size e selezionare il pulsante di opzione pixel. Assicurandosi che è spuntata la casella "Mantieni proporzioni", immettere le dimensioni del pulsante desiderato nelle caselle orizzontale e verticale e fare clic su OK. Utilizzare gli strumenti all'interno del programma insieme con la tua creatività per creare il tuo pulsante.

3

Finitura e salvare il file. Utilizzare il pulsante blu in alto a sinistra della finestra per portare giù il menu e scegliere Proprietà. Selezionare il pulsante di opzione pixel e modificare l'altezza di esattamente due volte la dimensione corrente e fare clic su OK. Ora, si sta creando l'immagine di rollover direttamente sotto il pulsante originale. Una volta terminato, fare clic sul disco floppy sulla parte superiore della finestra del programma e salvare il file, utilizzando il formato PNG in vernice per evitare distorsioni di colore. Caricare questo file di immagine per il vostro server web o un sito di hosting di immagini.

4

Aggiungere il seguente codice alla tua pagina Web all'interno del tag < HEAD >:

< style type = "text/css" >

#button {

display: block;

width: ###px;

height: @@px;

background: URL("button.gif") no-repeat 0 0;

}

#button:hover {

background-position: 0 -@@px;

}

#button span {

position: absolute;

top: -999em;

}

< / stile >

Sostituire tutti i segni di hash (#) con la larghezza del pulsante e tutti a simboli (@) con l'altezza del pulsante (prima è raddoppiato). Sostituire Button. gif con l'URL completo alla vostra immagine.

5

Aggiungere il seguente codice nel tag < BODY > dove si desidera visualizzare il pulsante:

< un id = "button" href = "URL" title = "Button" >< span > pulsante testo < / span >< /a >

Sostituire "URL" con l'URL della pagina che il pulsante è il collegamento.

6

Verificare il nuovo pulsante sul tuo sito Web. Se si utilizza il pulsante per scopi di navigazione, si consiglia di fare molti di più!