Hover с картинка

[Cuck_Norris]

Здравейте!

Да премина направо на въпроса.

Имам меню, на което има бутони, които не са картинки, а са текст.

Начало, Форум и т.н...

Та питането ми искам да сложа hover ефект, но не с цвят, а с картинка. Когато я сложа се получава какво ли не.... Ето кодовете, които ползвам и +1

п.п В момента с тези кодове се получава г/д, но когато примерно сложа стрелката в/у първия бутон всичките се местат и 2рия се крие зад 1вия. Когато сложа мишката на 2рия, следващите се местят и 3тия бутон се крие за 2рия.. и т.н.. Благодаря много за отделената информация.

<table style="background: url('images/menu_bg.png') no-repeat; width: 960px; height: 60px;">
    <tr>
	   <td  align="left" style="padding-bottom: px; padding-left: 8px;">
	   <a href="#" class="menu"><span  style="padding: 0px 0px 0px 30px;"><b>Начало</b></span></a>
	   <a href="#" class="menu"><span  style="padding: 0px 0px 0px 30px;"><b>Форм</b></span></a>
	   <a href="#" class="menu"><span  style="padding: 0px 0px 0px 30px;"><b>Клипове</b></span></a>
	   <a href="#" class="menu"><span  style="padding: 0px 0px 0px 30px;"><b>Контакти</b></span></a>
	   </td>
	</tr>
</table>

a.menu {
color: #808080;
text-decoration: none;
font-family: Myriad Pro, bold;
}

a.menu:hover {
position: absolute;
background: url('../images/active.png') no-repeat;
padding: 9px 0px 0px 0px;
top: 126px;
width: 120px;
height: 30px;
color: #cccccc;
}

 

[inferno16]

Не съм сигурен дали те разбрах но виж дали това търсиш http://jsfiddle.net/4cQ2b/. Не ме съдете за дизайна взех първите картинки които видях. :roll:

 

[Cuck_Norris]

Евалата! Мерси много +1

 

[shterev]

Обяснявам ти с думи ти ще си нашишеш кода
Правищ бутоните да са блокови елементи, след което си ги наместваш с картинките, т.е слагаш им фона. След като всичко е ок, просто добавяш на бекграунда посиция която да е отрицателна: пример: background-position: 0 -500px; После при ховер казваш бекраунд посицията да е 0 и си готов И тоя абсолю не ти трябва той ти размества всичко