Ang pag-backlight ng mga pindutan sa mga web page ay karaniwang isinaayos gamit ang dalawang imahe. Kapag pinapagalaw mo ang cursor ng mouse sa kaukulang elemento ng dokumento (link o pindutan), nabuo ang isang kaganapan, na, alinsunod sa mga tagubiling nakasulat sa wika ng CSS, sinenyasan ang browser na baguhin ang isang imahe sa isa pa. Kapag ang mouse cursor ay inilipat ang layo mula sa pindutan, nangyayari ang reverse replacement.
Kailangan
Pangunahing kaalaman sa mga wikang HTML at CSS
Panuto
Hakbang 1
Mayroong maraming mga pagpipilian para sa pagpapatupad ng tulad ng isang mekanismo ng pag-highlight. Para sa alinman sa mga ito, maaari mong gamitin ang parehong HTML code, binabago lamang ang kaukulang paglalarawan ng estilo. Ang HTML code ng pindutan ay maaaring magmukhang ganito: teksto sa pindutan Narito ang nakikilalang elemento ng pahina na ito (id = "btnA") kung saan ikakabit ang paglalarawan ng istilo.
Hakbang 2
Upang maipatupad ang isa sa mga pagpipilian, kailangan mong maghanda ng dalawang larawan, isa dito ay ipinapakita ang pindutan sa isang hindi aktibong estado, at ang pangalawa ay may backlight. Gagamitin ang mga ito bilang background image ng link. Ang mga tagubilin sa CSS para sa pindutang ito ay maaaring ganito:
isang # btnA, isang # btnA: binisita {
ipakita: harangan;
lapad: 50px;
taas: 20px;
background: url (btnA.gif) walang ulit;
hangganan: 0;
}
isang # btnA: mag-hover {
background: url (btnA_hover.gif) walang ulit;
hangganan: 0;
}
Dito, sa unang bloke, ang mga sukat ng imahe na naglalarawan ng pindutan ay ipinahiwatig (lapad: 50px; taas: 20px;). Kailangan mong palitan ang mga ito ng mga sukat ng iyong larawan. Ang mga pangalan ng mga file ng imahe ay dapat mabago sa parehong paraan: btnA.
Hakbang 3
Ang isang kahalili ay ilagay ang parehong mga imahe sa isang larawan. Maaari itong maging isa sa itaas ng isa pa, o maaari itong maging magkatabi. Gagamitin din ito bilang isang background para sa link. Dahil ang mga laki ng pindutan ay tinukoy sa paglalarawan ng estilo ng pindutan, ang anumang bagay na hindi umaangkop sa mga ito ay hindi makikita. Sa kasong ito, ang mga tagubilin na inilagay sa paglalarawan ng CSS ay dapat, kapag na-hover ang mouse cursor, i-scroll ang imahe sa background upang ang lugar na may imahe ng naka-highlight na pindutan ay nahuhulog sa frame. Para sa pagpipiliang ito, ang code mula sa nakaraang hakbang ay dapat baguhin tulad ng sumusunod:
isang # btnA, isang # btnA: binisita {
ipakita: harangan;
lapad: 50px;
taas: 20px;
background: url (btnA.gif) walang ulit;
hangganan: 0;
}
isang # btnA: mag-hover {
background: url (btnA.gif) walang ulit na 21px;
hangganan: 0;
}
Ipinapalagay nito na inilagay mo ang mga imahe nang isa sa isa pa (naka-highlight sa ibaba) at nai-save sa isang file na tinatawag na btnA.gif. Ang taas ng mga pindutan ay 20px, ang lapad ay 50px - kailangan mong palitan ang mga halagang ito ng iyong sarili.
