Կոճակների հետին լուսավորությունը վեբ էջերում սովորաբար կազմակերպվում է երկու պատկերների միջոցով: Երբ մկնիկի կուրսորը սավառնում եք փաստաթղթի համապատասխան տարրի վրա (հղում կամ կոճակ), ստեղծվում է մի իրադարձություն, որը, CSS լեզվով գրված հրահանգներին համապատասխան, զննարկչին հուշում է մեկ պատկեր փոխել մյուսի: Երբ մկնիկի կուրսորը հեռանում է կոճակից, տեղի է ունենում հակադարձ փոխարինումը:
Անհրաժեշտ է
HTML և CSS լեզուների հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Գոյություն ունեն լուսաբանման նման մեխանիզմ իրականացնելու մի քանի տարբերակներ: Նրանցից որևէ մեկի համար կարող եք օգտագործել նույն HTML կոդը ՝ փոխելով միայն համապատասխան ոճի նկարագրությունը: Կոճակի HTML կոդը կարող է նման լինել. Կոճակի վրա տեքստ Ահա այս էջի տարրի նույնացուցիչը (id = "btnA"), որին կցված կլինի ոճի նկարագրությունը:
Քայլ 2
Ընտրանքներից մեկը կյանքի կոչելու համար հարկավոր է պատրաստել երկու նկար, որոնցից մեկում կոճակը գտնվում է ոչ ակտիվ վիճակում, իսկ երկրորդում ՝ լուսավորությամբ: Դրանք կօգտագործվեն որպես հղման ֆոնային պատկեր: Այս կոճակի CSS հրահանգները կարող են նման լինել հետևյալով.
a # btnA, a # btnA. այցելել են {
ցուցադրում ՝ բլոկ;
լայնությունը `50px;
բարձրությունը `20px;
ֆոն ՝ url (btnA.gif) առանց կրկնելու;
եզրագիծ ՝ 0;
}
a # btnA. սավառնել {
ֆոն `url (btnA_hover.gif) անկրկնել;
եզրագիծ ՝ 0;
}
Այստեղ, առաջին բլոկում, նշվում են կոճակը պատկերող պատկերի չափերը (լայնությունը ՝ 50px; բարձրությունը ՝ 20px;): Դուք պետք է դրանք փոխարինեք ձեր նկարի չափսերով: Պատկերային ֆայլերի անունները պետք է փոխվեն նույն կերպ. BtnA.
Քայլ 3
Մեկ այլընտրանք է `երկու պատկերները մեկ նկարի մեջ դնելը: Դա կարող է լինել մեկը մյուսից վեր, կամ կարող է լինել միմյանց կողքին: Այն նաև կօգտագործվի որպես հղման ֆոն: Քանի որ կոճակի չափերը նշված են կոճակի ոճի նկարագրության մեջ, այն ամենը, ինչը չի տեղավորվում դրանց մեջ, չի երեւա: Այս դեպքում CSS- ի նկարագրության մեջ տեղադրված հրահանգները պետք է մկնիկի կուրսորը սավառնելիս ոլորել ֆոնի պատկերը, որպեսզի ընդգծված կոճակի պատկերով տարածքը ընկնի շրջանակի մեջ: Այս տարբերակի համար նախորդ քայլի կոդը պետք է փոխվի հետևյալ կերպ.
a # btnA, a # btnA. այցելել են {
ցուցադրում ՝ բլոկ;
լայնությունը `50px;
բարձրությունը `20px;
ֆոն ՝ url (btnA.gif) առանց կրկնելու;
եզրագիծ ՝ 0;
}
a # btnA. սավառնել {
ֆոն `url (btnA.gif) առանց կրկնության 21px;
եզրագիծ ՝ 0;
}
Սա ենթադրում է, որ դուք պատկերները դրել եք մեկը մյուսի վրա (ընդգծված ներքևում) և պահպանված btnA.gif"
