Jump to content
Дизайн и модификация Invision Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Calypso

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

Recommended Posts

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

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

Edited by Fisana
** ссылка умерла

Share this post


Link to post

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

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

Какой надо?

Share this post


Link to post

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

Вы можете сами посмотреть по исходному коду страницы и их 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:

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

Share this post


Link to post
У них в коде

<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

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

 

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

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

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

Share this post


Link to post

В page_top, в table_end

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

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

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

 

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

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

 

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

Share this post


Link to post

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

 

В 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 мне хочется записать без дива

А просто

Share this post


Link to post

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...