Создание кнопок с использованием спрайтов

Цель данного урока – создать кнопки, у которых есть несколько состояний: спокойное, в момент подведения курсора мыши и состояние, которое принимает кнопка в момент нажатия.

В случае, если кнопка простая, представляющая собой текст на однородном фоне, то ее можно создать на базе тега ссылки A, описав следующие стили:

a{
/*внешний вид ссылки в обычном состоянии*/
}
a:hover{
/*внешний вид ссылки в момент подведения курсора мыши*/
}
a:active{
/*внешний вид ссылки в момент нажатия клавиши мыши*/
}
	

Например, для создания вот такой кнопки Домой можно создать следующий стиль:

a{
	display:block;
	width:100px;
	height: 20px;
	background-color: #d0d0d0;
	border:1px solid #505050;
	text-decoration: none;
	text-align:center;
	font-weight: bold;
	color:#505050;
}
a:hover{
	background-color:#f0f0f0;
	color: #a0a0a0;
	text-decoration: underline;
}
a:active{
	color: black;
	background-color:rgb(224,190,205);
}
	

В тех случаях, когда кнопка имеет фоновое изображение, то можно для каждого состояния менять URL фоновой картинки. Например,

a{
	...
	background-image:url(normal_state.png);
}
a:hover{
	background-image:url(hover_state.png);
}
a:active{
	background-image:url(active_state.png);
}
	

Но такой подход неудобен, по нескольким причинам, таким как:

• необходимо хранить множество файлов для каждого изображения (количество кнопок × 3);
• в случае изменения стиля придется изменять URL к картинке во всех классах кнопок;
• увеличение трафика при загрузке каждого изображения.

Поэтому, обычно все состояния всех кнопок хранят в одном файле, например вот таком:

В этом случае фоновое изображение устанавливается для всех кнопок одинаковым и может быть описано в единственном классе. А для каждой кнопки потребуется сдвигать фоновое изображение к нужному месту, используя селектор background-position.

Например, для кнопки снизу

был создан следующий стиль

a.menu{
	display:block;
	width:100px;
	height:70px;
	background-image:url(sprite.png);
	float:left;
}
.home{
	background-position: 0px -70px;
}
.home:hover{
	background-position:0px -210px;
}
.home:active{
	background-position:0px -280px;
}