Veb-sahifalardagi tugmalarni orqa yoritish odatda ikkita rasm yordamida tashkil etiladi. Sichqoncha kursorini hujjatning tegishli elementi (ssilka yoki tugma) ustiga qo'yganingizda voqea hosil bo'ladi, bu CSS tilida yozilgan ko'rsatmalarga muvofiq brauzerdan bitta rasmni boshqasiga o'zgartirishni talab qiladi. Sichqoncha kursori tugmachadan uzoqlashtirilganda teskari almashtirish amalga oshiriladi.
Kerakli
HTML va CSS tillari haqida asosiy bilimlar
Ko'rsatmalar
1-qadam
Bunday ta'kidlash mexanizmini amalga oshirish uchun bir nechta variant mavjud. Ularning har biri uchun faqat mos uslub tavsifini o'zgartirib, bir xil HTML kodidan foydalanishingiz mumkin. Tugmachaning HTML kodi shunday ko'rinishi mumkin: tugmachadagi matn Mana bu sahifa elementining identifikatori (id = "btnA"), unga uslub tavsifi biriktiriladi.
2-qadam
Variantlardan birini amalga oshirish uchun ikkita rasmni tayyorlashingiz kerak, ulardan bittasi tugmachani nofaol holatda, ikkinchisi esa orqa nuri bilan ko'rsatib beradi. Ular havolaning fon rasmi sifatida ishlatiladi. Ushbu tugma uchun CSS ko'rsatmalari quyidagicha ko'rinishi mumkin:
a # btnA, a # btnA: tashrif buyurilgan {
displey: blok;
kengligi: 50px;
balandligi: 20px;
fon: url (btnA.gif) takrorlanmaydi;
chegara: 0;
}
a # btnA: hover {
fon: url (btnA_hover.gif) takrorlanmaydi;
chegara: 0;
}
Bu erda, birinchi blokda, tugmachani tasvirlaydigan rasm o'lchamlari ko'rsatilgan (kengligi: 50px; balandligi: 20px;). Siz ularni rasmingizning o'lchamlari bilan almashtirishingiz kerak. Rasm fayllarining nomlari xuddi shu tarzda o'zgartirilishi kerak: btnA.
3-qadam
Ikkala tasvirni bitta rasmga qo'yish alternativalardan biri. Bu bir-birining ustiga yoki bir-birining yonida bo'lishi mumkin. Bundan tashqari, u havola uchun fon sifatida ishlatiladi. Tugma o'lchamlari tugma uslubi tavsifida ko'rsatilganligi sababli, ularga mos kelmaydigan har qanday narsa ko'rinmaydi. Bunday holda, CSS tavsifida joylashtirilgan ko'rsatmalar, sichqoncha kursorini olib borishda, ajratilgan tugma tasviri bo'lgan maydon ramkaga tushishi uchun fon rasmini siljitishi kerak. Ushbu parametr uchun avvalgi qadam kodi quyidagicha o'zgartirilishi kerak:
a # btnA, a # btnA: tashrif buyurilgan {
displey: blok;
kengligi: 50px;
balandligi: 20px;
fon: url (btnA.gif) takrorlanmaydi;
chegara: 0;
}
a # btnA: hover {
fon: url (btnA.gif) takrorlanmaydigan 21px;
chegara: 0;
}
Bu sizning rasmlarni bir-birining ustiga qo'yganingizni (pastki qismida ta'kidlangan) va btnA.gif"
