November 26
pulsanti del mouse-over sono dei pulsanti su una pagina web che cambia quando il puntatore del mouse passa sopra di esso. Non vi è alcun limite al numero di pulsanti del mouse-over unici che si possono creare con anche solo un semplice editor di immagini e poche righe di codice. Mentre pulsanti rollover sono possibili per fare utilizzando solo la codifica, le immagini sono la via più facile, perché sono molto più semplici da cambiare e modificare.
1 Aprire il programma. In questo esempio useremo Microsoft Paint, anche se è possibile utilizzare qualsiasi programma di editing di immagini si preferisce, come Photoshop. In Windows 7, fare clic sul pulsante Start, digitare "Paint" e premere Invio.
2 Progetta il tuo pulsante. Nella sezione Immagine nella scheda Home, fare clic su Re-size e selezionare il pulsante di opzione Pixel. Fare che la casella "Mantieni proporzioni" non è selezionata, immettere la dimensione del pulsante desiderato nelle caselle orizzontali e verticali e fare clic su OK. Utilizzare gli strumenti all'interno del programma insieme con la propria creatività per creare il pulsante.
3 Fine e salvare il file. Utilizzare il pulsante blu in alto a sinistra della finestra per far cadere il menu e scegliere Proprietà. Selezionare il pulsante di opzione Pixel e modificare l'altezza esattamente il doppio della dimensione attuale e fare clic su OK. Adesso stai creando l'immagine di rollover direttamente sotto il pulsante originale. Una volta terminato, fare clic sul dischetto in cima alla finestra del programma e salvare il file, utilizzando il formato PNG in Paint per evitare la distorsione dei colori. Carica il file immagine sul server web o un'immagine sito di hosting.
4 Aggiungere il seguente codice alla tua pagina web all'interno del tag <HEAD>:
<Style type = "text / css">
#button {
blocco di visualizzazione;
Larghezza: ### px;
altezza: @@ px;
fondo: URL ( "button.gif") no-repeat 0 0;
}
#button: hover {
background-position: 0 - @@ px;
}
#button arco {
position: absolute;
top: -999em;
}
</ Style>
Sostituire tutti i segni di hash (#) con la larghezza del pulsante, e tutto a simboli (@) con l'altezza del pulsante (prima raddoppiato). Sostituire button.gif con l'URL completo per la vostra immagine.
5 Aggiungere il seguente codice nel tag <BODY> in cui si desidera il pulsante appaia:
<a id="button" href="URL" title="Button"> <span> Testo pulsante </ span> </a>
Sostituire "URL" con l'URL della pagina il pulsante è il collegamento a.
6 Prova il tuo nuovo pulsante sul tuo sito web. Se si utilizza il pulsante per la navigazione, si consiglia di fare molti di più!