Подсветка кнопок при нажатии

[Shaman14-21]

Есть свёрстанный сайт с рабочей менюшкой из нескольких кнопок. Нужно сделать так, что бы:

1. При наведении на кнопку она подсвечивалась (картинки с 3 видами каждой кнопки уже готовы).

2. При нажатии допустим на кнопку 1, она подсвечивалась как нажатая, а после если нажать на кнопку 2, кнопка 1 возвращалась в обычное состояние, вместо неё загоралась кнопка 2.

Больше никакого функционала не нужно. Всё остальное уже есть.

 

Как это можно реализовать? Какие есть варианты попроще?

[Veseloff]

http://htmlbook.ru/css/active

http://htmlbook.ru/css/hover

[Shaman14-21]

http://htmlbook.ru/css/active

http://htmlbook.ru/css/hover

Кнопка картиночная (3 изображения кнопки сверху вниз, обычная, подсвеченная и нажатая). Эти способы в таком случае не катят.

[Temiks]

Кнопка картиночная (3 изображения кнопки сверху вниз, обычная, подсвеченная и нажатая). Эти способы в таком случае не катят.

Так с помощью background'a можно же задать:

a {background: url(img1.jpg) 0 0;}a:hover {background: url(img2.jpg) 0 0;}a:active {background: url(img3.jpg) 0 0;}

--

только лучше это сделать спрайтом, а нужное изображение выбрать позицией background'a

Edited August 29, 2014 by Temiks

[Shaman14-21]

 

Кнопка картиночная (3 изображения кнопки сверху вниз, обычная, подсвеченная и нажатая). Эти способы в таком случае не катят.

Так с помощью background'a можно же задать:

a {background: url(img1.jpg) 0 0;}a:hover {background: url(img2.jpg) 0 0;}a:active {background: url(img3.jpg) 0 0;}

--

только лучше это сделать спрайтом, а нужное изображение выбрать позицией background'a

 

 

 

Для каждой кнопки должна быть 1 картинка с 3 кнопками, а в примере 3 картинки под 1 кнопку. 

И ещё хотелось бы уточнить, как можно сделать то же самое не задействуя active, hover и пр. так как страница при клике на очередную кнопку не перезагружается, следовательно работать так оно не будет. (при нажатии подгружается контент из дива с классом контент)

Edited August 29, 2014 by Shaman14-21

[Veseloff]

Для каждой кнопки должна быть 1 картинка с 3 кнопками, а в примере 3 картинки под 1 кнопку.

http://yandex.ru/yandsearch?text=css спрайты

[Shaman14-21]

Спасибо всем, понял где затупил. Можно тему закрывать.

[Sergik+]

Смотрите в сторону  compass, там в папку со спрайтами кидаешь все три состояния кнопки и он сам

подставляет их в ховеры и актив.