Как сделать подсветку стрелок?
3 ноября 2014 г.
Просмотров: 782
Обычно графически оформленные стрелки на веб-сайтах используют для организации навигации. При нажатии такого указателя осуществляется переход на другую страницу или в другую секцию текущей страницы. Иногда к ним привязаны какие-либо действия - выделение содержимого такстового поля, запуск JavaScript-сценария и т.д. Чтобы подчеркнуть, что эта стрелка - активный элемент, используют эффект «подсветки», т.е. изменения внешнего вида при наведении курсора мыши. Определите, какой механизм реализации подсветки стрелок вам больше подходит. Их существует несколько, два простых приведены в последующих шагах этой инструкции. Оба они используют псевдокласс hover языка описания стилей CSS. Когда курсор мыши находится над графическим элементом (стрелкой), к ней применяется стиль, описанный в этом псевдоклассе, а все остальное время этот стиль не активен.Для обоих описанных ниже вариантов можно использовать одинаковый код HTML, но разное описание стилей. Код стрелки в исходник страницы можно записать так:В атрибуте id указан идентификатор ссылки (arrowA), по которому браузер определит, какое из стилевых описаний следует к ней применять. Первый вариант потребует от вас подготовить два изображения стрелки - с подсветкой и без. Сохраните их в файлы с именами, например, arrON.gif и arrOFF.gif соответственно. Описание стиля ссылки, которая будет отображаться в странице как стрелка, можно сформулировать такими инструкциями CSS-кода:
Второй вариант позволяет обойтись только одним файлом с картинкой. Вам надо поместить в него оба изображения стрелки - и подсвеченной, и неактивной. Можно разместить их рядом, можно одну над другой. В образце кода будем считать, что подсвеченная стрелка помещена под неактивной, а файл вами назван arr.gif. Эта картинка, как и в предыдущем варианте, используется в качестве фона для ссылки. Поскольку размеры объекта указаны в описании стиля, то весь остаток фона (стрелка подсвеченная) не вмещающийся в них будет не виден веб-серферу. В описании псевдостиля hover задан сдвиг в позиционировании фоновой картинки, поэтому при наведении курсора на ссылку станет виден другой участок и теперь стрелка пассивная окажется «за кадром».
Вам понадобится
- Базовые знания языков HTML и CSS
Инструкция
a#arrowA, a#arrowA:visited {
display: block;
height: 30px;
width: 100px;
background: url(arrOFF.gif) no-repeat;
border: 0;
}
a#arrowA:hover {
background: url(arrON.gif) no-repeat;
border: 0;
}
В первом блоке заданы размеры стрелки (height: 30px; width: 100px;) - замените их на размеры подготовленных изображений стрелки.
a#arrowA, a#arrowA:visited {
display: block;
width: 100px;
height: 30px;
background: url(arr.gif) no-repeat;
border: 0;
}
a#arrowA:hover {
background: url(arr.gif) no-repeat 31px;
border: 0;
}
Здесь тоже не забудьте поменять размеры.
Оцените статью!