La retroilluminazione dei pulsanti nelle pagine Web è solitamente organizzata utilizzando due immagini. Quando si posiziona il cursore del mouse sull'elemento corrispondente del documento (link o pulsante), viene generato un evento che, secondo le istruzioni scritte nel linguaggio CSS, richiede al browser di modificare un'immagine in un'altra. Quando il cursore del mouse viene allontanato dal pulsante, si verifica la sostituzione inversa.
Necessario
Conoscenza di base dei linguaggi HTML e CSS
Istruzioni
Passo 1
Esistono diverse opzioni per implementare un tale meccanismo di evidenziazione. Per ognuno di essi, puoi utilizzare lo stesso codice HTML, modificando solo la descrizione dello stile corrispondente. Il codice HTML del pulsante può essere simile a questo: testo sul pulsante Ecco l'identificatore di questo elemento della pagina (id = "btnA") a cui verrà allegata la descrizione dello stile.
Passo 2
Per implementare una delle opzioni, è necessario preparare due immagini, una delle quali mostra il pulsante inattivo e la seconda con retroilluminazione. Verranno utilizzati come immagine di sfondo del collegamento. Le istruzioni CSS per questo pulsante potrebbero avere il seguente aspetto:
a # btnA, a # btnA: visitato {
blocco di visualizzazione;
larghezza: 50px;
altezza: 20px;
sfondo: url (btnA.gif) senza ripetizione;
bordo: 0;
}
a # btnA: hover {
sfondo: url (btnA_hover.gif) non ripetibile;
bordo: 0;
}
Qui, nel primo blocco, sono indicate le dimensioni dell'immagine raffigurante il pulsante (larghezza: 50px; altezza: 20px;). Devi sostituirli con le dimensioni della tua foto. I nomi dei file immagine dovrebbero essere modificati allo stesso modo: btnA.
Passaggio 3
Un'alternativa è mettere entrambe le immagini in un'unica immagine. Può essere uno sopra l'altro, o può essere uno accanto all'altro. Verrà utilizzato anche come sfondo per il collegamento. Poiché le dimensioni del pulsante sono specificate nella descrizione dello stile del pulsante, tutto ciò che non rientra in esse non sarà visibile. In questo caso, le istruzioni poste nella descrizione CSS dovrebbero, al passaggio del cursore del mouse, scorrere l'immagine di sfondo in modo che l'area con l'immagine del pulsante evidenziato rientri nel frame. Per questa opzione, il codice del passaggio precedente deve essere modificato come segue:
a # btnA, a # btnA: visitato {
blocco di visualizzazione;
larghezza: 50px;
altezza: 20px;
sfondo: url (btnA.gif) senza ripetizione;
bordo: 0;
}
a # btnA: hover {
sfondo: url (btnA.gif) no-repeat 21px;
bordo: 0;
}
Ciò presuppone che tu abbia posizionato le immagini una sopra l'altra (evidenziata in basso) e salvate in un file chiamato btnA.gif. L'altezza dei pulsanti è 20 px, la larghezza è 50 px: è necessario sostituire questi valori con i propri.
