Вам понадобится
  • Базовые знания языков HTML и CSS
Инструкция
1
Определите, какой механизм реализации подсветки стрелок вам больше подходит. Их существует несколько, два простых приведены в последующих шагах этой инструкции. Оба они используют псевдокласс hover языка описания стилей CSS. Когда курсор мыши находится над графическим элементом (стрелкой), к ней применяется стиль, описанный в этом псевдоклассе, а все остальное время этот стиль не активен.Для обоих описанных ниже вариантов можно использовать одинаковый код HTML, но разное описание стилей. Код стрелки в исходник страницы можно записать так:<a href="#" id="arrowA"></a>В атрибуте id указан идентификатор ссылки (arrowA), по которому браузер определит, какое из стилевых описаний следует к ней применять.
2
Первый вариант потребует от вас подготовить два изображения стрелки - с подсветкой и без. Сохраните их в файлы с именами, например, arrON.gif и arrOFF.gif соответственно. Описание стиля ссылки, которая будет отображаться в странице как стрелка, можно сформулировать такими инструкциями CSS-кода:<style type="text/css" media="all">
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;
}
</style>В первом блоке заданы размеры стрелки (height: 30px; width: 100px;) - замените их на размеры подготовленных изображений стрелки.
3
Второй вариант позволяет обойтись только одним файлом с картинкой. Вам надо поместить в него оба изображения стрелки - и подсвеченной, и неактивной. Можно разместить их рядом, можно одну над другой. В образце кода будем считать, что подсвеченная стрелка помещена под неактивной, а файл вами назван arr.gif. Эта картинка, как и в предыдущем варианте, используется в качестве фона для ссылки. Поскольку размеры объекта указаны в описании стиля, то весь остаток фона (стрелка подсвеченная) не вмещающийся в них будет не виден веб-серферу. В описании псевдостиля hover задан сдвиг в позиционировании фоновой картинки, поэтому при наведении курсора на ссылку станет виден другой участок и теперь стрелка пассивная окажется «за кадром».<style type="text/css" media="all">
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;
}
</style>Здесь тоже не забудьте поменять размеры.