Адатта, веб-сайттардагы графикалык жебелер навигацияны уюштуруу үчүн колдонулат. Мындай көрсөткүчтү чыкылдатканда, башка баракчага же учурдагы барактын башка бөлүмүнө өтөсүз. Кээде кээ бир иш-аракеттер аларга байланып калат - тег талаасынын мазмунун баса белгилөө, JavaScript сценарийин ишке киргизүү ж.б. Бул жебе активдүү элемент экендигин баса белгилөө үчүн, "бөлүп көрсөтүү" эффектин колдонуңуз, б.а. тышкаркы көрүнүштө өзгөрүүлөр.
Зарыл
HTML жана CSS тилдерин билүү
Нускамалар
1 кадам
Жебени бөлүп көрсөтүүнүн кайсы механизми сизге ылайыктуу экендигин аныктаңыз. Алардын бир нечеси бар, эки нускасы ушул нускаманын кийинки кадамдарында келтирилген. Алар экөө тең CSS hover псевдо-классын колдонушат. Чычкан курсору графикалык элементтин (жебенин) үстүндө болгондо, ага бул псевдо-класста сүрөттөлгөн стиль колдонулат, ал эми калган убакытта бул стиль активдүү эмес. Төмөндө сүрөттөлгөн эки вариант үчүн бирдей HTML колдонсоңуз болот код, бирок ар кандай стилдеги сүрөттөөлөр. Баракчанын булагындагы жебе кодун төмөнкүчө жазууга болот: id атрибуту шилтеме идентификаторун (arrowA) аныктайт, ал аркылуу браузер стилдин сүрөттөмөсүнүн кайсынысын колдонуш керек экендигин аныктайт.
2-кадам
Биринчи вариант сизден эки жебе сүрөтүн даярдоону талап кылат - жарык менен жана жарыксыз. Аларды arrON.
a # arrowA, a # arrowA: барган {
дисплей: блок;
бийиктиги: 30px;
туурасы: 100px;
background: url (arrOFF.gif) кайталабоо;
чек: 0;
}
a # arrowA: hover {
background: url (arrON.gif) no-қайталоо;
чек: 0;
}
Биринчи блок жебенин өлчөмдөрүн камтыйт (бийиктиги: 30px; туурасы: 100px;) - аларды даярдалган жебе сүрөттөрүнүн өлчөмдөрү менен алмаштырыңыз.
3-кадам
Экинчи вариант сизге бир гана сүрөт файлынын жардамы менен мүмкүнчүлүк берет. Сиз ага жебенин эки сүрөтүн тең жайгаштырышыңыз керек - белгиленген жана жигерсиз. Аларды катарлаш жайгаштырсаңыз болот, экинчисинин үстүнөн орун алсаңыз болот. Үлгү кодунда, биз белгиленген жебе жигерсиздин астына коюлуп, файл сиз arr.
a # arrowA, a # arrowA: барган {
дисплей: блок;
туурасы: 100px;
бийиктиги: 30px;
background: url (arr.gif) no-қайталоо;
чек: 0;
}
a # arrowA: hover {
background: url (arr.gif) no-repeat 31px;
чек: 0;
}
Бул жерде дагы көлөмүн өзгөртүүнү унутпаңыз.
