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

[e-twilight]

Хотелось бы реализовать следущую идею: при наведении курсором на кнопку, например, "создать новую тему", кнопка менялась. Т.е. более тёмное изображение на более яркое, типа подсвечивается. Скачал в .пдф инструкции где прописаны все значени я классов цсс для ИПБ, но про кнопки там не сказано ни слова. Походу такое прописыват в цсс. Подскажите, а где находится цсс для кнопок создать тему, правка, удалить и пр. или его вообще нет, там просто изображение на ссылке? если его нет, не подскажете, как реализовать данную задумку? заранее спасибо

[Arhar]

это не ксс, это скорее яваскрипт, onMouseOver замена src на другую заранее подготовленную похожую картинку поярче, onMouseOut обратная замена

типа

document.getElementById('qwerty_img').src = ipb_var_image_url+'/qwerty2.gif';

и

<img src='qwerty1.gif' id='qwetry_img'/>

[e-twilight]

А не подскажете, где находится код кнопок форума? Я бы дописал, да никак не могу найти где...

[Sannis]

В макросах, это у стиля в меню, где пункт "Редактировать шаблоны".

[e-twilight]

Нашёл, спасибо.

[e-twilight]

Идею реализовал, если кому-то понадобиться, могу подсказать что и как)

[SergOZ]

чтоб потом не возникали вопрсы, выложи сюда сразу

[iKest]

это не ксс, это скорее яваскрипт, onMouseOver замена src на другую заранее подготовленную похожую картинку поярче, onMouseOut обратная замена

типа

document.getElementById('qwerty_img').src = ipb_var_image_url+'/qwerty2.gif';

и

<img src='qwerty1.gif' id='qwetry_img'/>

А я бы всё-таки это лучше через CSS реализовал (свойство hover).

[e-twilight]

Я и написал на css...

 

<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}

A.rollover:hover {
background-position:
 0px /* Смещение по горизонтали */
 -40px; /* Смещение вверх по вертикали */
}
</style>

<a href="link.html" class="rollover"></a>

 

вместо двух картинок используется одна, потому что если подменять одну другой, то вторая начинат грузиться только при наведении и у кого медленный коннект могут возникнуть типа лаги...

[DacentGS]

Ну и чё с этим кодом делать?

[e-twilight]

skins_forum->TableEnd

 

ищешь там вот это, например, одна из кнопок (создать тему вроде если память не измняет)

 

	<td class='nopad' style='padding:5px 0px 5px 0px' align="right" width="50%"><a href="{$this->ipsclass->base_url}act=post&do=new_post&f={$data['id']}" class='rollover'><{A_POST}></a></td>

прописываешь там класс rollover в теге <a> (у меня уже прописано)

ссылка на макрос {A_POST} уже не нужна, можешь стирать.

 

а сверху вставляешь вышеприведённый скрипт или выносишь его в отдельный файл, как удобнее. идёшь и проверяпешь

[DacentGS]

А как сделать что то типа заливки цветом не знаешь?

Вот пример: вот обычный рисунок http://img157.imageshack.us/img157/7933/19953666ms4.gif, надо что бы при наведение курсора она становилась такой http://img84.imageshack.us/img84/702/50820420dm5.gif.

На сколько я знаю это уже Джаваскрипт.

[Sannis]

Нет, это точно также делается

[DacentGS]

Sannis, дело в том что это не просто кнопка, она прописана в джава скрипте который я позоимствовал на sysman. Она находиться в ББ кодах, так что сомневаюсь что таким способом получиться.

[Sannis]

А какая разница где и как она прописана? CSS должна всегда работать, а если не получается, значит браузер не валидный. А это уже совсем другая песня

[DacentGS]

Ну ладно, тебе лучше знать, тогда пожалуйста объясни получше, что бы всем доступно было.

Вот сам код:

<script type='text/javascript'>

mytagid = Math.floor( Math.random() * 100 );

document.write("<a href='#' onclick='toggleview("+'"'+mytagid+'_closed'+'"'+");return false;'><img src='http:///forum/style_images/1/+.gif' alt='Открыть скрытый текст'></a> <span style='font-size:10pt;'>{option}</span><div id='"+mytagid+"_closed' style='display:none'>{content}</div>");

document.close();

</script>

[DacentGS]

Перефразирую пожалуй, так как мне кажеться что ты меня не так понял... Знаешь например html редакторы, вот напремер как МКпортал, при наведении на кнопку она синим фоном заливаеться, а не заменяеться другой картинкой!

Нужно именно что бы как ссылка например становилась другова цвета, только что бы... Короче думаю ты понял.

[Sannis]

Держи пример

 

img-hover.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ru" lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Изменение кнопки при наведении</title>
<script type="text/javascript" src='jscript.js'></script>
<style type="text/css" media="all">
body{ 
background: #FFF;
color: #222222;
font-family: Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
font-size: 11px;
line-height: 135%;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper{ 
margin: 20px auto 20px auto;
text-align: left;
width: 60%;

}
.spoiler-wrap {
border: 1px solid #000000;
font-size: 11px;
}
.spoiler-content {
font-size: 10px;
}
a.img-expand{
background: url('img-expand.gif');
display: block;
width:  15px;
height: 15px;
}
a.img-expand:hover{
background: url('img-expand-hover.gif');
display: block;
width:  15px;
height: 15px;
}
a.img-minus{
background: url('img-minus.gif');
display: block;
width:  15px;
height: 15px;
}
a.img-minus:hover{
background: url('img-minus-hover.gif');
display: block;
width:  15px;
height: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<script type='text/javascript'>
<!--
mytagid = Math.floor( Math.random() * 100 );
document.write("<div id='"+mytagid+"_closed' class='spoiler-wrap'><a href='#' class='img-expand' onclick='ShowHide("+'"'+mytagid+'_opened'+'"'+',"'+mytagid+'_closed'+'"'+"); return false;' alt='Открыть скрытый текст'></a>{option}</div>");
document.write("<div id='"+mytagid+"_opened' class='spoiler-wrap' style='display:none'><a href='#' class='img-minus' onclick='ShowHide("+'"'+mytagid+'_closed'+'"'+',"'+mytagid+'_opened'+'"'+"); return false;' alt='Открыть скрытый текст'></a>{option}<div class='spoiler-content'>{content}</div></div>");
//document.close();
// -->
</script>
</div>
</body>
</html>

[DacentGS]

Оо))) Это как раз то что мне нужно!

Sannis можешь готовый код выложить, ну отдельно ББ код, и всё такое. )) Уже благодарен!

 

Всё, вроде сделал, вот только как выставить что бы {option} был на уровне с рисунком, т.е. справо от него?

 

Заметил что вкладки нельзя вкладывать друг в друга, так же нельзя вкладывать ББ коды, например такие как . Есть ли возможность исправить это?

Старый вопрос ещё актуален! В))

[DacentGS]

Как сделать код с таким вот содержанием:

BB code

<a class='show_hide_button' id='show_hide_button2b3446abc766720367abce62833d180f'>+</a> <span class='hidden_block_title'>{option}</span><div class='hidden_block' id='hidden_block2b3446abc766720367abce62833d180f'>{content}</div>

 

css

.show_hide_button { font-family: Courier New, Courier, Sans-Serif; border: 1px solid #888; background-color: #FFF; padding: 0 4px 0 4px; }

.show_hide_button:hover { background-color: #BCD0ED; }

.hidden_block_title { border-bottom: 1px dashed #888; padding: 0 0 1px 0; }

.hidden_block { margin-left: 8px; margin-top: 5px; }

 

ХЗ

function assign_show_hide_button(element_id, button_id, show_text, hide_text, show_display_style, current_display, onshow)

{

if (!show_text)

show_text = '+';

if (!hide_text)

hide_text = '-';

if (!show_display_style)

show_display_style = 'block';

 

var button = document.getElementById(button_id);

var element = document.getElementById(element_id);

 

button.style.textDecoration = 'none';

 

if (current_display)

{

element.style.display = show_display_style;

button.innerHTML = hide_text;

}

else

{

element.style.display = 'none';

button.innerHTML = show_text;

}

 

button.href = "java script:void(null)";

button.onclick = function()

{

if (element.style.display == 'none')

{

element.style.display = show_display_style;

button.innerHTML = hide_text;

onshow && onshow();

}

else

{

element.style.display = 'none';

button.innerHTML = show_text;

}

 

return false;

}

}

 

 

Доведите до ума пожалуйста!

[e-twilight]

Блин, код такой:

 

A.rollover {
background: url('t_new.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 119px; /* Ширина рисунка в пикселах */
height: 28px; /* Высота рисунка */
}

A.rollover:hover {
background-position:
 0px /* Смещение по горизонтали */
 -28px; /* Смещение вверх по вертикали */
}

 

и в отдельный файл выкладывал, и импортировал файл стилей и просто в <styles> писал перед ссылкой - итог один - шестой осёл жрать не хочет. при наведении на кнопку форума "открыть тему" она исчезает. нажать на неё можно, всё работает, но исчезает. причём если элементарно взять на рабочем столе этот файл с css и ссылкой и рядом кинуть картинку, то всё отлично работает и в шестом. но стоит реализовать эту фичу на форуме - как при наведении кнопка почему-то исчезает((( в чём дело? очень нужно, помогите...

[DacentGS]

Вот же тебе пример на прошлой странице. Читай пост Sannis'а

[e-twilight]

Эм, там о другом немного..

 

обидно то, что перестаёт работать, как только вс это в ИПБ вставляю... так в голом виде 6ой это берёт.

и ещ что сложно самому тестировать - ИЕ7ой стоит, 6ой поставить не могу(( знакомые сказали...

 

запора лишь в том, что работать перестаёт как только выкладываешь это на форум. может кто-нибудь сталкивался с подобным - что именно когда код в коде форума, он работает косячно... если бы 6ым не пользовалось 57% населения, я бы давно на это забил бы...

[DacentGS]

Не думаю что дело в форуме, скорее всего ты где то накосячил.

Вообще по идеи этот код надо добавлять в цсс.

 

A.rollover {
background: url('t_new.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 119px; /* Ширина рисунка в пикселах */
height: 28px; /* Высота рисунка */
}

A.rollover:hover {
background-position:
 0px /* Смещение по горизонтали */
 -28px; /* Смещение вверх по вертикали */
}

[e-twilight]

Если ты о тегах стиля, то все они прописаны верно. Я же писал выше - я даже пытался импортировать и выносить в отдельный файл. Не выходит.

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