Սովորաբար, կայքերում գրաֆիկական սլաքներն օգտագործվում են նավիգացիա կազմակերպելու համար: Երբ սեղմում եք այդպիսի ցուցիչը, դուք գնում եք մեկ այլ էջ կամ ընթացիկ էջի մեկ այլ բաժին: Երբեմն որոշ գործողություններ կապված են դրանց հետ ՝ թեգի դաշտի բովանդակության լուսաբանում, JavaScript գրության գործարկում և այլն: Ընդգծելու համար, որ այս սլաքը ակտիվ տարր է, օգտագործեք «լուսաբանելու» էֆեկտը, այսինքն. արտաքին տեսքի փոփոխություններ մկնիկի տեղափոխումից հետո:
Անհրաժեշտ է
HTML և CSS լեզուների հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Որոշեք, թե սլաքը լուսավորելու իրականացման որ մեխանիզմն է ձեզ համար լավագույնը: Դրանք մի քանիսը կան, երկու պարզ պարզ տրված է այս հրահանգի հետագա քայլերում: Նրանք երկուսն էլ օգտագործում են CSS hover կեղծ դասը: Երբ մկնիկի կուրսորը գրաֆիկական տարրի (սլաքի) վրա է, դրա վրա կիրառվում է այս կեղծ դասարանում նկարագրված ոճը, իսկ մնացած ժամանակ այս ոճը ակտիվ չէ: Ստորև նկարագրված երկու տարբերակների համար էլ կարող եք օգտագործել նույն HTML- ը: ծածկագիր, բայց տարբեր ոճի նկարագրություններ: Էջի աղբյուրի սլաքի կոդը կարող է գրվել հետևյալ կերպ. ID հատկանիշը նշում է հղման նույնացուցիչը (arrowA), որով զննարկիչը որոշում է, թե որ ոճի նկարագրություններից որ մեկը պետք է կիրառվի դրա վրա:
Քայլ 2
Առաջին տարբերակը ձեզանից կպահանջի պատրաստել երկու նետ պատկեր `լուսավորված և առանց լուսավորության: Պահպանեք դրանք համապատասխանաբար arrON.
a # arrowA, a # arrowA. այցելել են {
ցուցադրում ՝ բլոկ;
բարձրությունը `30px;
լայնությունը `100px;
ֆոն ՝ url (arrOFF.gif) առանց կրկնելու;
եզրագիծ ՝ 0;
}
a # arrowA: սավառնել {
ֆոն ՝ url (arrON.gif) առանց կրկնելու;
եզրագիծ ՝ 0;
}
Առաջին բլոկը պարունակում է նետի չափերը (բարձրությունը ՝ 30 հատ; լայնությունը ՝ 100 հատ;) - դրանք փոխարինեք պատրաստված սլաքի պատկերների չափերով:
Քայլ 3
Երկրորդ տարբերակը թույլ է տալիս յոլա գնալ միայն մեկ պատկերային ֆայլով: Դուք պետք է դրա մեջ տեղադրեք սլաքի երկու պատկերները `և՛ ընդգծված, և՛ անգործուն: Կարող եք դրանք տեղադրել կողք կողքի, կարող եք մեկը մյուսից բարձր լինել: Նմուշի ծածկագրում մենք ենթադրենք, որ ընդգծված սլաքը դրված է ոչ ակտիվի տակ, և ձեր կողմից ֆայլը անվանվում է arr.gif: Այս նկարը, ինչպես նախորդ տարբերակում, օգտագործվում է որպես հղման ֆոն: Քանի որ օբյեկտի չափերը նշված են ոճի նկարագրության մեջ, ֆոնի ամբողջ մնացած մասը (ընդգծված սլաքը), որը չի տեղավորվում դրանց մեջ, տեսանելի չի լինի վեբ սերվերի համար: Կեղծ ոճի սավառնի նկարագրության մեջ նշվում է ֆոնի պատկերի դիրքի տեղաշարժը, այնպես որ, երբ ցուցիչը սավառնում եք հղման վրա, մեկ այլ բաժին կդառնա տեսանելի, և այժմ պասիվ սլաքը կհայտնվի «էկրանից դուրս»:
a # arrowA, a # arrowA. այցելել են {
ցուցադրում ՝ բլոկ;
լայնությունը `100px;
բարձրությունը `30px;
ֆոն ՝ url (arr.gif) առանց կրկնելու;
եզրագիծ ՝ 0;
}
a # arrowA: սավառնել {
ֆոն ՝ url (arr.gif) 31-էջ ոչ մի կրկնում;
եզրագիծ ՝ 0;
}
Մի մոռացեք այստեղ նույնպես չափափոխել:
