Taa ya vifungo kwenye kurasa za wavuti kawaida hupangwa kwa kutumia picha mbili. Unapopandisha mshale wa panya juu ya kitu kinacholingana cha hati (kiunga au kitufe), tukio hutengenezwa, ambalo, kwa mujibu wa maagizo yaliyoandikwa katika lugha ya CSS, husababisha kivinjari kubadilisha picha moja kwenda nyingine. Wakati mshale wa panya unahamishwa mbali na kitufe, ubadilishaji wa nyuma hutokea.
Muhimu
Ujuzi wa kimsingi wa lugha za HTML na CSS
Maagizo
Hatua ya 1
Kuna chaguzi kadhaa za kutekeleza utaratibu kama huo wa kuonyesha. Kwa yeyote kati yao, unaweza kutumia nambari sawa ya HTML, ukibadilisha tu maelezo ya mtindo unaofanana. Nambari ya kitufe cha HTML inaweza kuonekana kama hii: maandishi kwenye kitufe Hapa kuna kitambulisho cha kipengee cha ukurasa huu (id = "btnA") ambacho maelezo ya mtindo yataambatanishwa.
Hatua ya 2
Ili kutekeleza moja ya chaguzi, unahitaji kuandaa picha mbili, moja ambayo inaonyesha kitufe katika hali isiyofanya kazi, na ya pili ikiwa na mwangaza wa nyuma. Zitatumika kama picha ya nyuma ya kiunga. Maagizo ya CSS ya kitufe hiki yanaweza kuonekana kama hii:
# btnA, # btnA: alitembelea {
onyesha: kuzuia;
upana: 50px;
urefu: 20px;
historia: url (btnA.gif) hakuna kurudia;
mpaka: 0;
}
# btnA: hover {
historia: url (btnA_hover.gif) hakuna kurudia;
mpaka: 0;
}
Hapa, katika kizuizi cha kwanza, vipimo vya picha inayoonyesha kitufe vimeonyeshwa (upana: 50px; urefu: 20px;). Unahitaji kuzibadilisha na vipimo vya picha yako. Majina ya faili za picha yanapaswa kubadilishwa kwa njia ile ile: btnA.
Hatua ya 3
Njia mbadala ni kuweka picha zote mbili kwenye picha moja. Inaweza kuwa moja juu ya nyingine, au inaweza kuwa karibu na kila mmoja. Itatumika pia kama msingi wa kiunga. Kwa kuwa saizi za vifungo zimeainishwa katika maelezo ya mtindo wa kitufe, chochote kisichotoshea ndani hakitaonekana. Katika kesi hii, maagizo yaliyowekwa kwenye maelezo ya CSS yanapaswa, wakati wa kuelekeza mshale wa panya, tembeza picha ya nyuma ili eneo lenye picha ya kitufe kilichoangaziwa liingie kwenye fremu. Kwa chaguo hili, nambari kutoka kwa hatua ya awali lazima ibadilishwe kama ifuatavyo:
# btnA, # btnA: alitembelea {
onyesha: kuzuia;
upana: 50px;
urefu: 20px;
historia: url (btnA.gif) hakuna kurudia;
mpaka: 0;
}
# btnA: hover {
historia: url (btnA.gif) hakuna kurudia 21px;
mpaka: 0;
}
Hii inadhani kwamba umeweka picha moja juu ya nyingine (imeangaziwa chini) na umehifadhiwa kwenye faili inayoitwa btnA.gif. Urefu wa vifungo ni 20px, upana ni 50px - unahitaji kubadilisha maadili haya na yako mwenyewe.
