Tinklalapių mygtukų apšvietimas paprastai organizuojamas naudojant du vaizdus. Užvedus pelės žymeklį virš atitinkamo dokumento elemento (nuorodos ar mygtuko), generuojamas įvykis, kuris pagal CSS kalba parašytas instrukcijas ragina naršyklę pakeisti vieną vaizdą į kitą. Kai pelės žymeklis atitraukiamas nuo mygtuko, įvyksta atvirkštinis pakeitimas.
Būtinas
Pagrindinės HTML ir CSS kalbų žinios
Nurodymai
1 žingsnis
Yra keli tokio paryškinimo mechanizmo įgyvendinimo variantai. Bet kuriam iš jų galite naudoti tą patį HTML kodą, pakeisdami tik atitinkamą stiliaus aprašymą. Mygtuko HTML kodas gali atrodyti taip: mygtuko tekstas Čia yra šio puslapio elemento identifikatorius (id = "btnA"), prie kurio bus pridėtas stiliaus aprašymas.
2 žingsnis
Norėdami įgyvendinti vieną iš variantų, turite paruošti dvi nuotraukas, iš kurių vienoje mygtukas rodomas neaktyvios būsenos, o antrame - su apšvietimu. Jie bus naudojami kaip nuorodos fono vaizdas. Šio mygtuko CSS instrukcijos gali atrodyti taip:
a # btnA, a # btnA: aplankyta {
rodyti: blokuoti;
plotis: 50px;
aukštis: 20 taškų;
fonas: URL (btnA.gif) pakartoti negalima;
kraštas: 0;
}
a # btnA: užveskite pelės žymeklį {
fonas: URL (btnA_hover.gif) ne kartoti;
kraštas: 0;
}
Čia, pirmame bloke, nurodomi mygtuką vaizduojančio vaizdo matmenys (plotis: 50 taškų; aukštis: 20 taškų;). Juos turite pakeisti savo paveikslėlio matmenimis. Vaizdo failų pavadinimai turėtų būti keičiami taip pat: btnA.
3 žingsnis
Viena alternatyva yra sudėti abu vaizdus į vieną paveikslėlį. Tai gali būti vienas virš kito arba vienas šalia kito. Jis taip pat bus naudojamas kaip nuorodos fonas. Kadangi mygtukų dydžiai nurodyti mygtuko stiliaus aprašyme, viskas, kas į juos netelpa, nebus matoma. Tokiu atveju CSS apraše pateikiamos instrukcijos, užvedant pelės žymeklį, turėtų slinkti fono paveikslėlį taip, kad sritis su pažymėto mygtuko atvaizdu patektų į rėmą. Pasirinkus šią parinktį, ankstesnio veiksmo kodas turi būti pakeistas taip:
a # btnA, a # btnA: aplankyta {
rodyti: blokuoti;
plotis: 50px;
aukštis: 20 taškų;
fonas: URL (btnA.gif) pakartoti negalima;
kraštas: 0;
}
a # btnA: užveskite pelės žymeklį {
fonas: URL (btnA.gif) ne kartoti 21 taškų;
kraštas: 0;
}
Tai daro prielaidą, kad vaizdus padėjote vienas virš kito (paryškintas apačioje) ir išsaugojote faile, vadinamame btnA.gif. Mygtukų aukštis yra 20 taškų, plotis - 50 taškų - šias vertes turite pakeisti savo.
