Как сделать подсветку кнопок?

Подсветка кнопок в веб-страницах организуется, как правило, с использованием двух изображений. При наведении курсора мыши на соответствующий элемент документа (ссылку или кнопку) генерируется событие, которое в соответствии с записанными на языке CSS инструкциями, побуждает браузер поменять одну картинку на другую. Когда курсор мышки отводят от кнопки, происходит обратная замена.

Вам понадобится

• Базовые знания языков HTML и CSS

Инструкция

Существует несколько вариантов реализовать такой механизм подсветки. При любом из них можно использовать один и тот же HTML-код, меняя лишь соответствующее ему стилевое описание. Код кнопки на языке HTML может выглядеть, например, так:текст на кнопкеЗдесь указан идентификатор этого элемента страницы (id="btnA") к которому будет привязано описание стиля.

Для реализации одного из вариантов вам нужно заготовить две картинки, на одной из которых изображена кнопка в неактивном состоянии, а на второй - с подсветкой. Они будут использоваться как фоновое изображение ссылки. Инструкции CSS, относящиеся к этой кнопке, могут выглядеть так:

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;

}

Здесь в первом блоке указаны размеры картинки, изображающей кнопку (width: 50px; height: 20px;). Вам надо заменить их размерами своей картинки. Аналогично следует поменять имена файлов картинок: btnA.gif - это кнопка без подсветки, btnA_hover.gif - с подсветкой.

Один из альтернативных вариантов - поместить оба изображения в одну картинку. Можно одну над другой, а можно рядом. Она также будет использоваться как фон для ссылки. Поскольку размеры кнопки заданы в описании стиля кнопки, то все, что не вмещается в них, не будет видно. В этом случае инструкции, помещенные в CSS-описание должны при наведении курсора мыши прокручивать фоновую картинку таким образом, чтобы «в кадр» попадал участок с изображением подсвеченной кнопки. Для этого варианта код из предыдущего шага надо изменить таким образом:

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;

}

Здесь предполагается, что вы разместили изображения одно над другим (подсвеченное - снизу) и сохранили в файл с именем btnA.gif. Высота кнопок 20px, ширина 50px - эти значения вам надо заменить своими.

Оцените статью!