Вэб хуудасны товчлуурын арын гэрэлтүүлэг нь ихэвчлэн хоёр зургийг ашиглан зохион байгуулагддаг. Хулганы курсорыг баримт бичгийн харгалзах элемент (холбоос эсвэл товчлуур) дээр дарахад үйл явдал үүсч, CSS хэл дээр бичсэн зааврын дагуу хөтөчөөс нэг дүрсийг нөгөө дүрс рүү солихыг өдөөдөг. Хулганы курсорыг товчлуураас холдуулахад урвуу орлуулалт хийгдэнэ.
Шаардлагатай
HTML ба CSS хэлний анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Ийм тодруулах механизмыг хэрэгжүүлэх хэд хэдэн сонголт байдаг. Тэдгээрийн аль нэгний хувьд та ижил HTML кодыг ашиглаж зөвхөн харгалзах хэв маягийн тодорхойлолтыг өөрчлөх боломжтой. Товчлуурын HTML код иймэрхүү харагдаж магадгүй: товчлуур дээрх текст Энд хэв маягийн тайлбарыг хавсаргах энэ хуудасны элементийн таних тэмдэг (id = "btnA") байна.
Алхам 2
Сонголтуудын аль нэгийг хэрэгжүүлэхийн тулд та хоёр зураг бэлтгэх хэрэгтэй бөгөөд тэдгээрийн нэг нь товчлуурыг идэвхгүй байдалд, хоёр дахь нь арын гэрэлтүүлэгтэй байна. Тэдгээрийг холбоосын арын зураг болгон ашиглах болно. Энэ товчлуурын CSS заавар дараах байдалтай байж магадгүй юм.
a # btnA, a # btnA: зочилсон {
дэлгэц: блок;
өргөн: 50px;
өндөр: 20px;
дэвсгэр: url (btnA.gif) давтахгүй;
хил: 0;
}
a # btnA: hover {
дэвсгэр: url (btnA_hover.gif) давтахгүй;
хил: 0;
}
Энд эхний блок дээр товчлуурыг дүрсэлсэн зургийн хэмжээг заана (өргөн: 50px; өндөр: 20px;). Та тэдгээрийг зургийнхаа хэмжээсээр солих хэрэгтэй. Зургийн файлуудын нэрийг ижил аргаар өөрчлөх хэрэгтэй: btnA.
Алхам 3
Альтернатив хувилбар бол хоёр зургийг хоёуланг нь нэг зураг дээр байрлуулах явдал юм. Энэ нь нөгөөгөөсөө дээгүүр эсвэл хажуудаа байж болно. Энэ нь мөн холбоосын дэвсгэр болгон ашиглах болно. Товчлуурын хэмжээ нь товчлуурын хэв маягийн тодорхойлолтонд заасан тул тэдгээрт нийцэхгүй зүйл харагдахгүй болно. Энэ тохиолдолд CSS-ийн тодорхойлолтод байрлуулсан зааврууд хулганы курсорыг зөөхдөө арын зургийг гүйлгэж, тодруулсан товчлуурын дүрс бүхий хэсэг хүрээ рүү унах ёстой. Энэ сонголтын хувьд өмнөх алхам дээрх кодыг дараах байдлаар өөрчлөх шаардлагатай.
a # btnA, a # btnA: зочилсон {
дэлгэц: блок;
өргөн: 50px;
өндөр: 20px;
дэвсгэр: url (btnA.gif) давтахгүй;
хил: 0;
}
a # btnA: hover {
дэвсгэр: url (btnA.gif) давтахгүй 21px;
хил: 0;
}
Энэ нь та зургуудаа нөгөөгөөсөө дээгүүр байрлуулж (доор нь тодруулсан) btnA.gif"
