Pozadinsko osvjetljenje gumba na web stranicama obično se organizira pomoću dvije slike. Kad pokazivač miša zadržite iznad odgovarajućeg elementa dokumenta (veza ili gumb), generira se događaj koji, u skladu s uputama napisanim na jeziku CSS, traži da preglednik promijeni jednu sliku u drugu. Kad se kursor miša odmakne od gumba, dolazi do obrnute zamjene.
Potrebno
Osnovno znanje HTML i CSS jezika
Upute
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 gumba 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 ovaj gumb mogu izgledati ovako:
a # btnA, a # btnA: posjećeno {
prikaz: blok;
širina: 50px;
visina: 20px;
pozadina: url (btnA.gif) bez ponavljanja;
obrub: 0;
}
a # btnA: hover {
pozadina: url (btnA_hover.gif) bez ponavljanja;
obrub: 0;
}
Ovdje su u prvom bloku naznačene dimenzije slike koja prikazuje gumb (širina: 50px; visina: 20px;). Morate ih zamijeniti dimenzijama svoje slike. Imena slikovnih datoteka treba mijenjati na isti način: btnA.
3. korak
Jedna alternativa je stavljanje obje slike u jednu sliku. Može biti jedno iznad drugog ili može biti jedno do drugoga. 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 tom bi slučaju upute smještene u opisu CSS-a trebale, kad zadrže pokazivač miša, pomicati pozadinsku sliku tako da područje sa slikom označenog gumba padne u okvir. Za ovu se opciju kôd iz prethodnog koraka mora promijeniti na sljedeći način:
a # btnA, a # btnA: posjećeno {
prikaz: blok;
širina: 50px;
visina: 20px;
pozadina: url (btnA.gif) bez ponavljanja;
obrub: 0;
}
a # btnA: hover {
pozadina: url (btnA.gif) bez ponavljanja 21px;
obrub: 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.
