Подсветката на бутоните в уеб страниците обикновено се организира с помощта на две изображения. Когато задържите курсора на мишката върху съответния елемент на документа (връзка или бутон), се генерира събитие, което в съответствие с инструкциите, написани на езика 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. Височината на бутоните е 20px, ширината е 50px - трябва да замените тези стойности със свои.
