Веб-беттердегі батырмалардың артқы жарығы әдетте екі суреттің көмегімен ұйымдастырылады. Тышқан жүгіргіні құжаттың тиісті элементіне (сілтеме немесе батырма) апарғанда оқиға пайда болады, ол 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"
