Osvetlitev gumbov na spletnih straneh je običajno organizirana z dvema slikama. Ko miškin kazalec premaknete nad ustrezen element dokumenta (povezava ali gumb), se ustvari dogodek, ki v skladu z navodili, napisanimi v jeziku CSS, brskalnik pozove, da eno sliko spremeni na drugo. Ko miškin kazalec premaknete stran od gumba, pride do povratne zamenjave.
Potrebno
Osnovno znanje jezikov HTML in CSS
Navodila
Korak 1
Obstaja več možnosti za izvajanje takšnega mehanizma za poudarjanje. Za katero koli lahko uporabite isto kodo HTML, pri čemer spremenite samo ustrezen opis sloga. Koda HTML gumba je lahko videti takole: besedilo na gumbu Tu je identifikator tega elementa strani (id = "btnA"), ki mu bo priložen opis sloga.
2. korak
Za izvedbo ene od možnosti morate pripraviti dve sliki, od katerih ena prikazuje gumb v neaktivnem stanju, druga pa z osvetlitvijo ozadja. Uporabili se bodo kot ozadje povezave. Navodila CSS za ta gumb so lahko videti tako:
a # btnA, a # btnA: obiskan {
zaslon: blok;
širina: 50px;
višina: 20px;
ozadje: url (btnA.gif) brez ponovitve;
meja: 0;
}
a # btnA: hover {
ozadje: url (btnA_hover.gif) brez ponovitve;
meja: 0;
}
Tu so v prvem bloku prikazane dimenzije slike, ki prikazuje gumb (širina: 50 px; višina: 20 px;). Zamenjati jih morate z dimenzijami vaše slike. Imena slikovnih datotek je treba spremeniti na enak način: btnA.
3. korak
Ena izmed možnosti je, da obe sliki postavite v eno sliko. Lahko je eden nad drugim ali pa drug poleg drugega. Uporabil se bo tudi kot ozadje za povezavo. Ker so velikosti gumbov določene v opisu sloga gumba, vse, kar ne ustreza, ne bo vidno. V tem primeru naj navodila v opisu CSS med premikanjem kurzorja miške pomaknejo sliko ozadja, tako da območje s sliko označenega gumba pade v okvir. Za to možnost je treba kodo iz prejšnjega koraka spremeniti na naslednji način:
a # btnA, a # btnA: obiskan {
zaslon: blok;
širina: 50px;
višina: 20px;
ozadje: url (btnA.gif) brez ponovitve;
meja: 0;
}
a # btnA: hover {
ozadje: url (btnA.gif) brez ponovitve 21px;
meja: 0;
}
To predvideva, da ste slike postavili eno nad drugo (označeno na dnu) in shranili v datoteko z imenom btnA.gif. Višina gumbov je 20 slikovnih pik, širina pa 50 slikovnih pik - te vrednosti morate zamenjati s svojimi.
