PDA

Просмотр полной версии : вопросик по кнопкам(меню)


Aiswer
13.09.2010, 16:19
драсте

есть 3 каринки а, б, в.


вопрос, можно ли без флеша и явы сделать, чтобы они менялись?

а (картинка а)
a:hover (картинка б)
а:active (картинка в)
<!-- есть просто картинка а, наводим мышку картинка б -->

используя только css или html? или обязательно ява тут нужна?

:bye:

Zebestov
13.09.2010, 16:55
уже давно делаю разные роловеры и дропдауны на чистом CSS. самый идеальный подход делать картинку для кнопки "2 в 1":


!-----------------------------!
! обычный вид кнопки !
!-----------------------------!
!-----------------------------!
! навели мышку !
!-----------------------------!


CSS отдельно взятой кнопки будет выглядеть так


.navbar, .navbar:visited {
display: block;
width: <ширина кнопки>px;
height <высота кнопки>px;

background-image: url('images/моя_спаренная_картинка.png');

... ну а название кнопки лучше текстом
... который настраиваешь тут: фурнитура, отступы
}
.navbar:hover {
background-position: 0 -<высота кнопки>px;
}


главный плюс такого подхода (помимо оптимизации загрузки) заключается в 100% визуализации роловера по факту загрузки основного вида кнопки — ведь они же суть одна картинка, не нужны "предзагрузчики".

оффтп: о! сообщение #1`111 =)

Aiswer
13.09.2010, 17:07
ааааа :yahoo: Заработало! Круто! Спасибо большое!


.. Сейчас проверю на 5 кнопках и отпишусь...

Ваще супер... всё работает, и никакая ява не нужна.

Огромное спасибо тебе.

Ещё возник маленький вопросик...

вот есть уменя эта кнопка button1 есть div я делаю:


css файл:
#But1 {height: 50%;}

.Butt1, Butt1:visited {display: block; width: 244px; height: 45px; background-image: url('LastTest.gif'); background-repeat: no-repeat;}
.Butt1:hover {background-position: 0 -45px;}


html файл:


<div id="But1" align="center"> <!-- Это дает центр по ширине, но не по высоте. -->

<table width="244px" border="0" cellspacing="0" cellpadding="0">
<tr height=""></tr>
<tr height="45px"><td align="center"><div class="Butt1"><a href="#"/></a></div></td></tr>
</table></div>

Я не могу понять, как мне эту кнопку запереть ровненько по-центру страницы? И высоте, и ширине.