В JavaScripte есть такие функции, как onMouseClick или onMouseDown и их часто применяют для того, что бы при клике на какой-нибудь элемент с ним происходили различные метаморфозы. Например, при нажатии на ссылку изменялось фоновое изображение. Но что делать, если у пользователя отключен JavaScript?



Я предлагаю решать этот вопрос с помощью CSS. Ведь в у нас есть все необходимое для решения этой задачи.

Итак, создадим обыкновенный неупорядоченный список:

<ul>

	<li><a>Item</a></li>

	<li><a>Item</a></li>

	<li><a>Item</a></li>

	<li><a>Item</a></li>

</ul>

Ну и обстилим его:

ul {

list-style: none;

}

ul li {

display: inline;

margin: 0;

padding: 0;

}

ul li a {

float: left;

display: block;

width: 81px;

height: 26px;

color: #333;

text-align: center;

background-image: url(NavigationBackground.png);

background-repeat: none;

background-position: 0 0;

}

ul li a:hover {

background-position: 0 -26px;

color: #cccccc;

}

ul li a:active {

background-position: 0 -52px;

color: #cccccc;

}

Тут, вполне будет законным вопросом: а где изображение для состояния :hover и :active?

Я решил схитрить и сдвигать изображение вниз по мере необходимости. Вот само изображение:



Пример использования.

Скачать пример