Вам понадобится
  • Базовые знания языков HTML и CSS
Инструкция
1
Существует несколько вариантов реализовать такой механизм подсветки. При любом из них можно использовать один и тот же HTML-код, меняя лишь соответствующее ему стилевое описание. Код кнопки на языке HTML может выглядеть, например, так:<a href="#" id="btnA">текст на кнопке</a>Здесь указан идентификатор этого элемента страницы (id="btnA") к которому будет привязано описание стиля.
2
Для реализации одного из вариантов вам нужно заготовить две картинки, на одной из которых изображена кнопка в неактивном состоянии, а на второй - с подсветкой. Они будут использоваться как фоновое изображение ссылки. Инструкции CSS, относящиеся к этой кнопке, могут выглядеть так:<style type="text/css" media="all">
a#btnA, a#btnA:visited {
display: block;
width: 50px;
height: 20px;
background: url(btnA.gif) no-repeat;
border: 0;
}
a#btnA:hover {
background: url(btnA_hover.gif) no-repeat;
border: 0;
}
</style>Здесь в первом блоке указаны размеры картинки, изображающей кнопку (width: 50px; height: 20px;). Вам надо заменить их размерами своей картинки. Аналогично следует поменять имена файлов картинок: btnA.gif - это кнопка без подсветки, btnA_hover.gif - с подсветкой.
3
Один из альтернативных вариантов - поместить оба изображения в одну картинку. Можно одну над другой, а можно рядом. Она также будет использоваться как фон для ссылки. Поскольку размеры кнопки заданы в описании стиля кнопки, то все, что не вмещается в них, не будет видно. В этом случае инструкции, помещенные в CSS-описание должны при наведении курсора мыши прокручивать фоновую картинку таким образом, чтобы «в кадр» попадал участок с изображением подсвеченной кнопки. Для этого варианта код из предыдущего шага надо изменить таким образом:<style type="text/css" media="all">
a#btnA, a#btnA:visited {
display: block;
width: 50px;
height: 20px;
background: url(btnA.gif) no-repeat;
border: 0;
}
a#btnA:hover {
background: url(btnA.gif) no-repeat 21px;
border: 0;
}
</style>Здесь предполагается, что вы разместили изображения одно над другим (подсвеченное - снизу) и сохранили в файл с именем btnA.gif. Высота кнопок 20px, ширина 50px - эти значения вам надо заменить своими.