Veb səhifələrindəki düymələrin arxa işıqlandırılması ümumiyyətlə iki şəkil istifadə edərək təşkil edilir. Siçan imlecini sənədin müvafiq elementinin üstünə (link və ya düymə) vurduğunuzda, CSS dilində yazılmış təlimatlara uyğun olaraq brauzerdən bir şəkili digərinə dəyişməsini istənən bir hadisə yaranır. Siçan imleci düymədən uzaqlaşdırıldıqda, əks əvəzləmə baş verir.
Zəruri
HTML və CSS dilləri haqqında əsas biliklər
Təlimat
Addım 1
Belə bir işıqlandırma mexanizmini tətbiq etmək üçün bir neçə seçim var. Bunlardan hər hansı biri üçün yalnız uyğun stil təsvirini dəyişdirərək eyni HTML kodundan istifadə edə bilərsiniz. Düymənin HTML kodu belə görünə bilər: düymədəki mətn Budur, stil təsvirinin əlavə ediləcəyi bu səhifə elementinin identifikatoru (id = "btnA").
Addım 2
Seçimlərdən birini həyata keçirmək üçün biri şəkil düyməsini hərəkətsiz vəziyyətdə, ikincisi isə arxa işıqda olan iki şəkil hazırlamalısınız. Bunlar keçidin arxa görüntüsü kimi istifadə ediləcəkdir. Bu düymə üçün CSS təlimatları belə görünə bilər:
a # btnA, a # btnA: ziyarət edildi {
ekran: blok;
genişlik: 50px;
hündürlük: 20 piksel;
arxa plan: url (btnA.gif) təkrarlanmaz;
sərhəd: 0;
}
a # btnA: hover {
arxa plan: url (btnA_hover.gif) təkrarlanmaz;
sərhəd: 0;
}
Burada, ilk blokda düyməni təsvir edən təsvirin ölçüləri göstərilir (genişlik: 50px; hündürlük: 20px;). Onları şəkilinizin ölçüləri ilə əvəz etməlisiniz. Şəkil sənədlərinin adları eyni şəkildə dəyişdirilməlidir: btnA.
Addım 3
Alternativlərdən biri də hər iki şəkli bir şəkil halına gətirməkdir. Bir-birinin üstündə ola bilər və ya bir-birinin yanında ola bilər. Bağlantı üçün arxa plan olaraq da istifadə ediləcəkdir. Düymə ölçüləri düymə üslubunun təsvirində göstərildiyi üçün onlara uyğun olmayan hər hansı bir şey görünməyəcəkdir. Bu halda, CSS təsvirində yerləşdirilən təlimatlar, siçan imlecini gəzdirərkən, vurğulanmış düymənin şəkli olan sahənin çərçivəyə düşməsi üçün arxa plan şəklini gəzdirməlidir. Bu seçim üçün əvvəlki addımdakı kod aşağıdakı şəkildə dəyişdirilməlidir:
a # btnA, a # btnA: ziyarət edildi {
ekran: blok;
genişlik: 50px;
hündürlük: 20 piksel;
arxa plan: url (btnA.gif) təkrarlanmaz;
sərhəd: 0;
}
a # btnA: hover {
arxa plan: url (btnA.gif) təkrarlanmayan 21px;
sərhəd: 0;
}
Bu, şəkilləri bir-birinin üstünə yerləşdirdiyinizi (altda vurğulanmış) və btnA.gif"
