Изменение кнопки при наведении

[Calypso 4]

Название говорит само за себя.. Как сделать, чтобы когда наводишь на кнопки "Создать тему" "Ответить" и т.д. они менялись цветом?

Вот **как здесь ? :mellow:

Edited April 11, 2011 by Fisana
** ссылка умерла

[Fisana 699]

Элементарно.

Есть 2 варианта, сделать при наведении прозрачность или сменить картинку.

Какой надо?

[Calypso 4]

Второй :mellow:

[Fisana 699]

Просто во второй больше кода добавлять придется.

Вы можете сами посмотреть по исходному коду страницы и их css.

Первый способ гораздо проще, а эффект почти такой же.

 

У них в коде

<td class='nopad' style='padding:0px 0px 5px 0px' align="right" nowrap="nowrap"><a href="http://www.placeart.ru/forum/index.php?act=post&do=new_post&f=125"><span class="b-b1" onmouseout="this.className='b-b1'" onmouseover="this.className='b-b2'"><span class="bn">Создать тему</span></span></a></td>

А в css масса классов для этого.

 

 

 

Видимо, замены делаются и при наведении на другие элементы.

.b1{position:relative; float:left; height:27px; margin:2px; background:url(orangeblog/form-buttonR.gif) top right no-repeat; text-decoration:none; cursor:pointer}

.b1 .bn{display:block; * display:inline-block; height:23px; padding:4px 5px 0 12px; margin-right:7px; background:#a4806a url(orangeblog/form-buttonL.gif) top left no-repeat; color:#fdf5ee; font-family:arial; font-weight:bold; font-size:12px; line-height:12px}

.b2{position:relative; float:left; height:27px; margin:2px; background:url(orangeblog/form-buttonR.gif) bottom right no-repeat; text-decoration:none; cursor:pointer}

.b2 .bn{display:block; * display:inline-block; height:23px; padding:4px 5px 0 12px; margin-right:7px; background:#9080a4 url(orangeblog/form-buttonL.gif) bottom left no-repeat; color:#fdf5ee; font-family:arial; font-weight:bold; font-size:12px; line-height:12px}

.b1 .b3{color:#fdf5ee}

.b2 .b3{color:#fffefc}

.pp-b1{position:relative; float:left; height:24px; margin:1px 0 0 0; background:url(orangeblog/pp-form-buttonR.gif) top right no-repeat; text-decoration:none; cursor:pointer}

.pp-b1 .bn{display:block; * display:inline-block; height:17px; padding:7px 5px 0 10px; margin-right:4px; background:#e2d39c url(orangeblog/pp-form-buttonL.gif) top left no-repeat; color:#3d2516; font-family:arial; font-weight:bold; font-size:11px; line-height:12px}

.pp-b2{position:relative; float:left; height:24px; margin:1px 0 0 0; background:url(orangeblog/pp-form-buttonR.gif) bottom right no-repeat; text-decoration:none; cursor:pointer}

.pp-b2 .bn{display:block; * display:inline-block; height:17px; padding:7px 5px 0 10px; margin-right:4px; background:#fce9d6 url(orangeblog/pp-form-buttonL.gif) bottom left no-repeat; color:#51607f; font-family:arial; font-weight:bold; font-size:11px; line-height:12px}

.av-l{width:5px; padding:0; background:url(orangeblog/av-l.gif) repeat-y top right}
.av-r{width:5px; padding:0; background:url(orangeblog/av-r.gif) repeat-y top left}
.av-b{background:url(orangeblog/av-b.gif) repeat-x top left}

fieldset{border:3px double #73553a}

.b-b1{position:relative; float:right; height:30px; margin:0px; background:url(orangeblog/b-form-buttonR.gif) top right no-repeat; text-decoration:none; cursor:pointer}

.b-b1 .bn{display:block; * display:inline-block; height:21px; padding:9px 17px 0 27px; margin-right:7px; background:url(orangeblog/b-form-buttonL.gif) top left no-repeat; color:#f6d9be; font-family:arial; font-weight:bold; font-size:12px; line-height:12px}

.b-b2{position:relative; float:right; height:30px; margin:0px; background:url(orangeblog/b-form-buttonR.gif) bottom right no-repeat; text-decoration:none; cursor:pointer}

.b-b2 .bn{display:block; * display:inline-block; height:21px; padding:9px 17px 0 27px; margin-right:7px; background:url(orangeblog/b-form-buttonL.gif) bottom left no-repeat; color:#feddc7; font-family:arial; font-weight:bold; font-size:12px; line-height:12px}

#submenu .b-b1{position:relative; float:right; height:65px; margin:0px; background:url(orangeblog/bh-form-buttonR.gif) top right no-repeat; text-decoration:none; cursor:pointer}

Они просто скрестили два платныъх скина:

Один – от Шерри, а другой – от Сои, которая такие эффекты любит.

В итоге получилось не слишком гармонично по впечатлению.

Зато якобы это их скин, о чем гордо сообщают в копирайтах :mellow:

То что их, смотрится довольно нелепо, – цветовая гамма и странненькое меню в шапке, соединенное в одну красную "сардельку" с мембербаром.

[Calypso 4]

У них в коде

<td class='nopad' style='padding:0px 0px 5px 0px' align="right" nowrap="nowrap"><a href="http://www.placeart.ru/forum/index.php?act=post&do=new_post&f=125"><span class="b-b1" onmouseout="this.classname='b-b1'" onmouseover="this.className='b-b2'"><span class="bn">Создать тему</span></span></a></td>

 

А куда это вставлять? По идее в skin_forum - TableEnd

Но после этого форумы перестают открываться..

 

Один – от Шерри, а другой – от Сои, которая такие эффекты любит.

Точно, переделаный стиль Сои.. Я сразу внимания и не обратил)

У него форум вообще не раскручен.. В который раз убеждаюсь, что дизайн в раскрутке особой роли не играет)

[Fisana 699]

В page_top, в table_end

Туда, где кнопки есть, придется вписывать.

И не забудьте, что там кнопки текстовые.

Возможно, что часть кода прописана в макросах.

 

Я не использую замену картинок. Иногда делаю прозрачность. И проще, и кода меньше.

В ipb3 замена картинок есть, но сделана значительно простым более способом. Но там кнопки в списке, а не в табличке.

 

Я бы не назвала этот дизайн хорошим. Может быть, правда, только я вижу, что это сделано на основе чужих ворованных скинов.

[Calypso 4]

Не получилось.. Теперь при просмотре раздела внизу такая фигна получается:

http://img520.imageshack.us/img520/5625/563454365367.jpg

 

Fisana, как сделать прозрачность?)

[Fisana 699]

Потому что кнопка текстовая на том форуме. А у Вас графическая. Скорее всего надо в макросы часть кода прописывать, а не в шаблоны.

 

В css дописываем:

 

.pb img {
margin:0px;
}

.pb a img{
opacity:1.0; 
-moz-opacity:1.0; 
filter:alpha(opacity=100);
}

.pb a:hover img {
opacity:0.75;
-moz-opacity:0.75; 
filter:alpha(opacity=75);
}

 

А в шаблоны в теги с td с кнопками просто

...

Пример:

topic_page_top

<td class='nopad' style='padding:0px 0px 5px 0px' align="right" width="60%" valign="middle"><div class="pb"><!--IBF.TOPIC_REPLY--><a href="{$this->ipsclass->base_url}act=post&do=new_post&f={$data['FORUM']['id']}" title="{$this->ipsclass->lang['start_new_topic']}"><{A_POST}></a></div></td>

Хотя после 3.0 мне хочется записать без дива

А просто

[Calypso 4]

Спасибо. Все отлично работает :(