Pozadinsko osvjetljenje tipki na web stranicama obično se organizira pomoću dvije slike. Kad pokazivač miša zadržite iznad odgovarajućeg elementa dokumenta (veza ili dugme), generira se događaj koji, u skladu s uputama napisanim na CSS jeziku, traži da pretraživač promijeni jednu sliku u drugu. Kada se kursor miša pomakne od gumba, dolazi do obrnute zamjene.
Potrebno
Osnovno znanje HTML i CSS jezika
Instrukcije
Korak 1
Postoji nekoliko mogućnosti za primjenu takvog mehanizma isticanja. Za bilo koji od njih možete koristiti isti HTML kôd, mijenjajući samo odgovarajući opis stila. HTML kôd dugmeta može izgledati ovako: tekst na gumbu Evo identifikatora ovog elementa stranice (id = "btnA") kojem će biti priložen opis stila.
Korak 2
Da biste primijenili jednu od opcija, morate pripremiti dvije slike, od kojih jedna prikazuje gumb u neaktivnom stanju, a druga s pozadinskim osvjetljenjem. Oni će se koristiti kao pozadinska slika veze. CSS upute za ovo dugme mogu izgledati ovako:
a # btnA, a # btnA: posjećeno {
prikaz: blok;
širina: 50px;
visina: 20px;
pozadina: url (btnA.gif) bez ponavljanja;
granica: 0;
}
a # btnA: hover {
pozadina: url (btnA_hover.gif) bez ponavljanja;
granica: 0;
}
Ovdje su u prvom bloku naznačene dimenzije slike koja prikazuje dugme (širina: 50px; visina: 20px;). Morate ih zamijeniti dimenzijama slike. Imena slikovnih datoteka treba mijenjati na isti način: btnA.
Korak 3
Jedna alternativa je stavljanje obje slike u jednu sliku. Može biti jedno iznad drugog ili može biti jedno pored drugog. Također će se koristiti kao pozadina veze. Budući da su veličine gumba navedene u opisu stila gumba, sve što se ne uklapa u njih neće biti vidljivo. U ovom slučaju, upute smještene u opisu CSS-a trebale bi, kad zadržite kursor miša, pomicati pozadinsku sliku tako da područje sa slikom označenog gumba padne u okvir. Za ovu opciju kôd iz prethodnog koraka mora se promijeniti na sljedeći način:
a # btnA, a # btnA: posjećeno {
prikaz: blok;
širina: 50px;
visina: 20px;
pozadina: url (btnA.gif) bez ponavljanja;
granica: 0;
}
a # btnA: hover {
pozadina: url (btnA.gif) bez ponavljanja 21px;
granica: 0;
}
To pretpostavlja da ste slike postavili jednu iznad druge (istaknute na dnu) i spremili u datoteku zvanu btnA.gif. Visina gumba je 20 piksela, širina je 50 piksela - ove vrijednosti morate zamijeniti vlastitim.
