Обикновено графичните стрелки на уебсайтовете се използват за организиране на навигацията. Когато щракнете върху такъв указател, преминавате към друга страница или към друг раздел на текущата страница. Понякога някои действия са обвързани с тях - подчертаване на съдържанието на полето на маркера, стартиране на JavaScript скрипт и т.н. За да подчертаете, че тази стрелка е активен елемент, използвайте ефекта "подчертаване", т.е. промени във външния вид при преместване с мишката.
Необходимо
Основни познания по езици HTML и CSS
Инструкции
Етап 1
Определете кой механизъм за прилагане на подчертаването със стрелка е най-подходящ за вас. Има няколко от тях, две прости са дадени в следващите стъпки на тази инструкция. И двамата използват псевдокласа CSS hover. Когато курсорът на мишката е над графичен елемент (стрелка), към него се прилага стилът, описан в този псевдоклас, а през останалото време този стил не е активен. И за двете опции, описани по-долу, можете да използвате един и същ HTML код, но различни описания на стилове. Кодът на стрелката в източника на страницата може да бъде написан по следния начин: Атрибутът id определя идентификатора на връзката (arrowA), чрез който браузърът ще определи кое от описанията на стилове трябва да се приложи към него.
Стъпка 2
Първият вариант ще изисква да подготвите две изображения със стрелки - със и без подсветка. Запазете ги във файлове с имена като arrON.
a # arrowA, a # arrowA: посетен {
дисплей: блок;
височина: 30px;
ширина: 100px;
фон: url (arrOFF.gif) без повторение;
граница: 0;
}
a # arrowA: hover {
фон: url (arrON.gif) без повторение;
граница: 0;
}
Първият блок съдържа размерите на стрелката (височина: 30px; ширина: 100px;) - заменете ги с размерите на подготвените изображения със стрелки.
Стъпка 3
Втората опция ви позволява да се справите само с един файл с изображение. В него трябва да поставите и двете изображения на стрелката - и подчертани, и неактивни. Можете да ги поставите една до друга, можете една над друга. В примерния код ще приемем, че маркираната стрелка е поставена под неактивната и файлът е наречен arr.
a # arrowA, a # arrowA: посетен {
дисплей: блок;
ширина: 100px;
височина: 30px;
фон: url (arr.gif) без повторение;
граница: 0;
}
a # arrowA: hover {
фон: url (arr.gif) без повторение 31px;
граница: 0;
}
Не забравяйте да преоразмерите и тук.
