В этой маленькой заметке расскажу как делать ссылки-кнопки (картинки, меняющиеся при наведении) методами цсс. Сразу оговорюсь, что я далеко не профессионал.

Недавно столкнулся с проблемой создания ссылок картинками, которые меняются при наведении, было много мыслей как это осуществить, но т.к. яваскрипт отпадал, пришлось выкручиваться css.

"Ничего сложного", - подумал я, - "Берем, ставим :hover на элемент и все дела", но оказалось не так всё просто, :hover в IE поддерживается только для ссылок. Тогда я обратился за помощью на форум и мне подсказали гениальную идею! =)



Итак:
стиль css

code:


.menu_style a{  //задаем стиль всех тегов <a> внутри класса menu_style

 display:block; //нужно, чтоб ссылка отобразилась в виде блока

 float:left;

 margin:0 30px 0 30px;

 width:88px;

 height:60px;

}



.menu_style a#menu_0{ //стиль для всех тегов <a> внутри класса menu_style и с id="menu_0"

 background:url(images/menu1.gif) center no-repeat; //исходный фон

}

.menu_style a:hover#menu_0{

 background:url(images/menu1_on.gif) center no-repeat; //фон при наведении

}

.menu_style a#menu_1{ //вторая кнопка-ссылка уже с id="menu_1"

 background:url(images/menu2.gif) center no-repeat;

}

.menu_style a:hover#menu_1{

 background:url(images/menu2_on.gif) center no-repeat;

}

а html такой:

code:


<div class="menu_style">

<a href="http://bookspro.net.ru" title="" id="menu_0">

<a href="http://bookspro.net.ru" title="" id="menu_1">

<a href="http://bookspro.net.ru" title="" id="menu_2">

<a href="http://bookspro.net.ru" title="" id="menu_3">

<a href="http://bookspro.net.ru" title="" id="menu_4">

</div>

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

Пример здесь: PR Laboratory