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

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

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

• Базовые знания языков 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 - эти значения вам надо заменить своими.