Веб-баракчалардагы баскычтардын жарыктандырылышы, адатта, эки сүрөттүн жардамы менен уюштурулат. Чычкан курсорун документтин тийиштүү элементинин (шилтеме же кнопка) үстүнө жылдырганда, окуя пайда болот, ал CSS тилинде жазылган көрсөтмөлөргө ылайык, браузерден бир сүрөттү экинчисине алмаштырууга түрткү берет. Чычкан курсорун баскычтан алыс жылдырганда, тескери алмаштыруу болот.
Зарыл
HTML жана CSS тилдерин билүү
Нускамалар
1 кадам
Мындай бөлүп көрсөтүү механизмин ишке ашыруунун бир нече варианттары бар. Алардын кайсынысы болбосун, ошол эле HTML кодун колдонуп, ага ылайыктуу стил сүрөттөмөсүн гана өзгөртө аласыз. Баскычтын HTML коду мындай болуп калышы мүмкүн: баскычтагы текст Бул жерде стилдин сүрөттөлүшү тиркелүүчү ушул баракча элементинин идентификатору (id = "btnA") келтирилген.
2-кадам
Варианттардын бирин ишке ашыруу үчүн эки сүрөт даярдашыңыз керек, алардын бири баскычты жигерсиз абалда көрсөтсө, экинчисинин артында жарыгы бар. Алар шилтеменин фон сүрөтү катары колдонулат. Бул баскыч үчүн CSS көрсөтмөлөрү төмөнкүдөй болушу мүмкүн:
a # btnA, a # btnA: барган {
дисплей: блок;
туурасы: 50px;
бийиктиги: 20px;
background: url (btnA.gif) кайталабоо;
чек: 0;
}
a # btnA: hover {
background: url (btnA_hover.gif) no-қайталоо;
чек: 0;
}
Бул жерде, биринчи блокто, баскычты чагылдырган сүрөттүн өлчөмдөрү көрсөтүлгөн (туурасы: 50px; бийиктиги: 20px;). Аларды сүрөтүңүздүн өлчөмдөрү менен алмаштырышыңыз керек. Сүрөт файлдарынын аталыштарын дагы ушундай эле жол менен өзгөртүү керек: btnA.
3-кадам
Бир альтернатива - эки сүрөттү тең бир сүрөткө жайгаштыруу. Бул бири-биринин үстүнөн же бири-биринин жанында болушу мүмкүн. Ал ошондой эле шилтеме үчүн фондук катары колдонулат. Баскычтын өлчөмдөрү баскычтын стилинин сүрөттөлүшүндө көрсөтүлгөндүктөн, ага туура келбеген нерселердин бардыгы көрүнбөйт. Бул учурда, CSS сыпаттамасында жайгаштырылган көрсөтмөлөр, чычкан курсорун жылдырганда, фон баскычын жылдырып, белгиленген баскычтын сүрөтү бар аймак алкакка түшүп калышы керек. Бул параметр үчүн, мурунку кадамдын кодун төмөнкүдөй өзгөртүү керек:
a # btnA, a # btnA: барган {
дисплей: блок;
туурасы: 50px;
бийиктиги: 20px;
background: url (btnA.gif) кайталабоо;
чек: 0;
}
a # btnA: hover {
background: url (btnA.gif) no-қайталоо 21px;
чек: 0;
}
Бул сиз сүрөттөрдү экинчисинин үстүнө коюп (төмөн жагында белгиленип) жана btnA.gif"
