Создайте кнопку, которая выделяется при проходе курсора мыши над ней и при клике.
Кликните на демке ниже, чтобы увидеть, о чем речь:
Исходные изображения находятся на tutorial/browser/events/rollover-src/index.html.
В коде документа также есть функции для добавления/удаления класса. Используйте семантическую разметку.
Сделайте два варианта решения: одно пусть использует CSS-селекторы :hover и :active, другое — JavaScript-события вместо них.
Используйте CSS-спрайты.
Для HTML можно использовать элементы INPUT, BUTTON, либо просто DIV. На последнем и остановимся:
<div class="button"></div>
Для отслеживания действий посетителя в случае с JavaScript — нужны события mouseover, mouseout, которые будут отслеживать состояние «курсор над кнопкой» (hover), а также mousedown и mouseup для состояния «кнопка нажата».
Для CSS нужны псевдо-селекторы :hover и :active. К сожалению, в IE<8 :active поддерживается слабо.
Первым будем делать вариант с JavaScript.
Кнопку можно оформить как DIV, со стилизацией состояния через CSS:
.button {
width: 186px;
height: 52px;
background: url(button_static.png);
}
.button-hover {
background: url(button_hover.png);
}
.button-click {
background: url(button_click.png);
}
Изначально кнопка имеет класс .button, затем при проведении мышью над ней добавляется класс .button-hover, а при клике вместо него добавляется .button-click. То есть, кнопка будет иметь одно из трех сочетаний классов: .button, .button .button-hover, .button .button-click.
При этом так как классы состояний находятся под .button, то их background будет перекрывать свойство background у .button.
Код обработки событий:
button.onmouseover = function() {
addClass(this, 'button-hover');
}
button.onmouseout = function() {
removeClass(this, 'button-hover');
}
button.onmousedown = function() {
addClass(this, 'button-click');
}
button.onmouseup = function() {
removeClass(this, 'button-click');
}
Полное решение: tutorial/browser/events/rollover/index.html.
CSS-спрайты
В решении, описанном выше, есть важный недостаток. Когда курсор мыши первый раз заходит на элемент, его фон меняется.. Но подгрузка изображения с сервера требует времени, поэтому состояние визуально изменится с задержкой.
Такое будет только в первый раз, потом картинка уже в кеше.
Чтобы обойти эту проблему, все состояния кнопки объединяют в один CSS-спрайт:
Это изображение ставится в background. Оно ровно в три раза выше, чем обычная высота кнопки, поэтому будет видна только часть — текущее состояние. Изменение состояние реализуется через сдвиг фона при помощи background-position:
.button {
width: 186px;
height: 52px;
background: url(button.png) no-repeat;
}
.button-hover { background-position: 0 -52px; }
.button-click { background-position: 0 -104px; }
Полный пример: tutorial/browser/events/rollover-sprite/index.html.
CSS-решение
Решение при помощи CSS находится здесь: tutorial/browser/events/rollover-css/index.html.
В IE6 состояние :hover поддерживается только для элементов A, поэтому кнопку нужно сделать этим элементом.
Такое решение некорректно работает в IE<8, так как старые IE плохо поддерживают псевдоселектор :active.