In genere, le frecce grafiche sui siti Web vengono utilizzate per organizzare la navigazione. Quando si fa clic su tale puntatore, si passa a un'altra pagina oa un'altra sezione della pagina corrente. A volte alcune azioni sono legate a loro: evidenziare il contenuto del campo tag, avviare uno script JavaScript, ecc. Per sottolineare che questa freccia è un elemento attivo, usa l'effetto "evidenzia", ad es. cambiamenti di aspetto al passaggio del mouse.
Necessario
Conoscenza di base dei linguaggi HTML e CSS
Istruzioni
Passo 1
Determina quale meccanismo per implementare l'evidenziazione della freccia è il migliore per te. Ce ne sono diversi, due semplici sono dati nei passaggi successivi di questa istruzione. Entrambi usano la pseudo-classe CSS hover. Quando il cursore del mouse si trova su un elemento grafico (freccia), ad esso viene applicato lo stile descritto in questa pseudo-classe e per il resto del tempo questo stile non è attivo. Per entrambe le opzioni descritte di seguito, è possibile utilizzare lo stesso HTML codice, ma descrizioni di stile diverse. Il codice freccia nell'origine della pagina può essere scritto come segue: L'attributo id specifica l'identificatore del collegamento (frecciaA), in base al quale il browser determinerà quale delle descrizioni di stile deve essere applicata ad esso.
Passo 2
La prima opzione richiede la preparazione di due immagini di frecce, con e senza retroilluminazione. Salvali in file con nomi come arrON.
a # frecciaA, a # frecciaA: visitato {
blocco di visualizzazione;
altezza: 30px;
larghezza: 100px;
sfondo: url (arrOFF.gif) no-repeat;
bordo: 0;
}
a # frecciaA: hover {
sfondo: url (arrON.gif) senza ripetizione;
bordo: 0;
}
Il primo blocco contiene le dimensioni della freccia (altezza: 30 px; larghezza: 100 px;) - sostituiscile con le dimensioni delle immagini delle frecce preparate.
Passaggio 3
La seconda opzione ti consente di cavartela con un solo file immagine. Devi inserire entrambe le immagini della freccia al suo interno, sia evidenziate che inattive. Puoi metterli uno accanto all'altro, uno sopra l'altro. Nel codice di esempio, assumeremo che la freccia evidenziata sia posizionata sotto quella inattiva e che il file sia chiamato arr.
a # frecciaA, a # frecciaA: visitato {
blocco di visualizzazione;
larghezza: 100px;
altezza: 30px;
sfondo: url (arr.gif) non ripetibile;
bordo: 0;
}
a # frecciaA: hover {
sfondo: url (arr.gif) no-repeat 31px;
bordo: 0;
}
Non dimenticare di ridimensionare anche qui.
