Veebilehtede nuppude taustvalgustus on tavaliselt korraldatud kahe pildi abil. Kui hõljutate kursorit dokumendi vastava elemendi (lingi või nupu) kohal, genereeritakse sündmus, mis vastavalt CSS-i keeles kirjutatud juhistele palub brauseril üks pilt teise vastu vahetada. Kui hiirekursor nupust kaugemale viia, toimub vastupidine asendamine.
Vajalik
Põhiteadmised HTML- ja CSS-keeltest
Juhised
Samm 1
Sellise esiletõstmise mehhanismi rakendamiseks on mitu võimalust. Mis tahes neist saate kasutada sama HTML-koodi, muutes ainult vastavat stiilikirjeldust. Nupu HTML-kood võib välja näha selline: tekst nupul Siin on selle lehe elemendi identifikaator (id = "btnA"), millele stiili kirjeldus kinnitatakse.
2. samm
Ühe võimaluse rakendamiseks peate ette valmistama kaks pilti, millest üks näitab nuppu passiivses olekus ja teine taustvalgustusega. Neid kasutatakse lingi taustpildina. Selle nupu CSS-i juhised võivad välja näha järgmised:
a # btnA, a # btnA: külastatud {
kuva: plokk;
laius: 50px;
kõrgus: 20px;
taust: url (btnA.gif) ei kordu;
piir: 0;
}
a # btnA: hõljutage {
taust: url (btnA_hover.gif) ei kordu;
piir: 0;
}
Siin on esimeses plokis näidatud nuppu kujutava pildi mõõtmed (laius: 50px; kõrgus: 20px;). Peate need asendama oma pildi mõõtmetega. Pildifailide nimesid tuleks muuta samamoodi: btnA.
3. samm
Üks alternatiiv on panna mõlemad pildid ühte pilti. See võib olla üksteise kohal või üksteise kõrval. Seda kasutatakse ka lingi taustana. Kuna nupu suurused on täpsustatud nupu stiili kirjelduses, pole kõik, mis nendesse ei mahu, nähtav. Sellisel juhul peaksid CSS-i kirjeldusse paigutatud juhised hiirekursori hõljutamisel kerima taustapilti nii, et esiletõstetud nupu kujutisega ala langeks raami. Selle suvandi jaoks tuleb eelmise sammu koodi muuta järgmiselt:
a # btnA, a # btnA: külastatud {
kuva: plokk;
laius: 50px;
kõrgus: 20px;
taust: url (btnA.gif) ei kordu;
piir: 0;
}
a # btnA: hõljutage {
taust: url (btnA.gif) ei korrata 21 pikslit;
piir: 0;
}
See eeldab, et olete paigutanud pildid üksteise kohale (allosas esile tõstetud) ja salvestanud faili nimega btnA.gif. Nuppude kõrgus on 20 pikslit, laius 50 pikslit - peate need väärtused asendama omadega.
