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

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

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

Сообщение TerminatorTM »

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

На бородатом сайте 7-ми летней давности я делал нечто вроде (имена картинок отличались добавлением "-l" к имени):

Код: Выделить всё

<script type="text/javascript">
<!--
function Enable(name)
{ 
  name.src=name.src.substring(0, name.src.length-4) + "-l" + name.src.substring(name.src.length-4, name.src.length);
}
function Disable(name)
{ 
  name.src=name.src.substring(0, name.src.length-6) + name.src.substring(name.src.length-4, name.src.length);
}
-->
</script>
А собственно в тег <img name="имя изображения" src="путь"> вставлял событияonmouseover="Enable(имя изображения)" и onmouseout="Disable(имя изображения)"

Возьмем для примера кнопку "Новая тема" (стиль - модификация prosilver):

Код: Выделить всё

<a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a></td>
Поиском находим нужный php-файл (ucp_pm_viewfolder.php):

Код: Выделить всё

'POST_IMG'		=> (!$auth->acl_get('u_sendpm')) ? $user->img('button_topic_locked', 'POST_PM_LOCKED') : $user->img('button_pm_new', 'POST_NEW_PM'),
Честно говоря, дальше я застрял и не могу понять как во все это добавить конкретные события. Вторичный вопрос - где лучше разместить сам скрипт (что в начале этого поста).

А может быть подскажете мне иной способ добиться результата?
Последний раз редактировалось Sheer 17.12.2013 13:18, всего редактировалось 1 раз.
Причина: bb-код
Аватара пользователя
Pazh
Former team member
Сообщения: 2317
Стаж: 16 лет 10 месяцев
Благодарил (а): 42 раза
Поблагодарили: 506 раз

Re: Изменение изображения кнопки при наведении

Сообщение Pazh »

не мучай мозк технологиями 7-ей давности. Посмотри как реализованы кнопки в prosilverи смотри css свойство backgroud-position
+ Сплайны в CSS
Помощь в ЛС/email только за WM или ЮMoney
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Интересный материал про сплайны в качестве оптимизации, но в данном случае он не отвечает на вопрос - как мне получить непосредственный "доступ к телу" конкретного изображения. К тому же нет желания глобально переопределять стили тегов. А главное - я отстал от всего этого дела как раз на эти самые 7 лет, потому прошу проявить терпение и объяснять подробнее)
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 13159
Стаж: 15 лет 1 месяц
Благодарил (а): 236 раз
Поблагодарили: 3750 раз

Re: Изменение изображения кнопки при наведении

Сообщение Татьяна5 »

Кнопка - span с фоном-картинкой, при :hover фон сдвигается
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Непонятный мне момент:
Во всех примерах сплайнов имя фонового изображения фигурирует как заданное непосредственное в файле стилей. В данном же случае (на примере конкретной кнопки) у меня есть то самое {POST_IMG}, которое мне генерирует картинку в процессе обработки. Как мне связать эту "переменную" со стилями или же извлечь из нее конкретное название?
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 13159
Стаж: 15 лет 1 месяц
Благодарил (а): 236 раз
Поблагодарили: 3750 раз

Re: Изменение изображения кнопки при наведении

Сообщение Татьяна5 »

Генерируйте название класса, в котором будет фоновая картинка
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Уважаемые, а можно ли конкретный пример, отталкиваясь хотя бы от той самой кнопки, которую я приводил в пример? Я, мягко говоря, к сожалению "не в теме" ваших несомненно умных советов, но вполне способен на адекватном (не оторванном совсем от темы) примере разобраться что к чему, скопировать и модифицировать в пределах разумного. Вероятно если бы я был в курсе озвученных тонкостей - я бы решил вопрос самостоятельно, но увы.
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 13159
Стаж: 15 лет 1 месяц
Благодарил (а): 236 раз
Поблагодарили: 3750 раз

Re: Изменение изображения кнопки при наведении

Сообщение Татьяна5 »

TerminatorTM писал(а):Возьмем для примера кнопку "Новая тема" (стиль - модификация prosilver):

Код: Выделить всё

<a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a></td>
В просильвере нет переменной {POST_IMG} в шаблонах

Кнопка "ответить" выглядит так (класс reply-icon)

Код: Выделить всё

	<div class="buttons">
	<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
		<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
	<!-- ENDIF -->
	</div>
Смена при наведении задана полностью через css
buttons.css

Код: Выделить всё

.reply-icon span	{ background: transparent none 0 0 no-repeat; }

Код: Выделить всё

.buttons div a:hover span	{ background-position: 0 100%; }
Задание фоновой картинки разбросано по нескольким файлам
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Я дико извиняюсь, но в запарке неправильно указал шаблон. У меня - измененный subsilver, а не pro. Отсюда многие взаимные недопонимания. Вот к нему нужен пример...
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 13159
Стаж: 15 лет 1 месяц
Благодарил (а): 236 раз
Поблагодарили: 3750 раз

Re: Изменение изображения кнопки при наведении

Сообщение Татьяна5 »

TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Вот спасибо, сам не нашел)

Что сделал я:
1) Открываем includes/session.php

Код: Выделить всё

function img($img, $alt = '', $width = false, $suffix = '', $type = 'full_tag')
Заменяем:

Код: Выделить всё

function img($img, $alt = '', $width = false, $suffix = '', $type = 'full_tag', $lightbtn = '')
2) Ниже ищем:

Код: Выделить всё

			default:
				$use_width = ($width === false) ? $img_data['width'] : $width;

				return '<img src="' . $img_data['src'] . '"' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';
	
			break;
		}
Заменяем:

Код: Выделить всё

			default:
				$use_width = ($width === false) ? $img_data['width'] : $width;

				if (empty($lightbtn)) 
				{
					return '<img src="' . $img_data['src'] . '"' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';
				}
				else
				{
					return '<img src="' . $img_data['src'] . '"' . ' name="' . $lightbtn . '"' . ' onMouseOver=LightOn(' . $lightbtn . ')' . ' onmouseout=LightOut(' . $lightbtn . ')' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';
				}
			break;
		}
3) Открываем overall_header.html в styles/ваш стиль /template
Ищем:

Код: Выделить всё

/**
* Find a member
*/
function find_username(url)
{
	popup(url, 760, 570, '_usersearch');
	return false;
}
Перед ней добавляем:

Код: Выделить всё

function LightOn(name)
{ 
  name.src=name.src.substring(0, name.src.length-4) + "_l" + name.src.substring(name.src.length-4, name.src.length);
}

function LightOut(name)
{ 
  name.src=name.src.substring(0, name.src.length-6) + name.src.substring(name.src.length-4, name.src.length);
}

Теперь чтобы поменять изображение при наведении мыши для нужной кнопки нужно следующее:
1) Создать ее альтернативный вид и назвать файл аналогично оригиналу, добавив в конец имени "_l", положить в ту же папку, что и оригинал.
2) Найти представление этой кнопки в html файле вашего стиля
3) По имени переменной изображения отыскать ее определение в соответствующем PHP файле
4) В определении добавить к вызову функции img() шестым по счету параметром некое уникальное название (проще придумать его из первых двух переменных).

Пример (кнопка "Новая тема"):
1) button_topic_new_l.png (оригинал button_topic_new.png) в imageset/ru
2) На странице просмотра форумов (viewforum_body.html) выглядит так:

Код: Выделить всё

<a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>
3) Соответствующий PHP файл - viewforum.php в корневом каталоге

Код: Выделить всё

	'POST_IMG'					=> ($forum_data['forum_status'] == ITEM_LOCKED) ? $user->img('button_topic_locked', $post_alt) : $user->img('button_topic_new', $post_alt),
4) Добавляем в конец нужное, получается:

Код: Выделить всё

	'POST_IMG'					=> ($forum_data['forum_status'] == ITEM_LOCKED) ? $user->img('button_topic_locked', $post_alt) : $user->img('button_topic_new', $post_alt, false, '', '', 'ButtonTopicNew'),
Аватара пользователя
Pazh
Former team member
Сообщения: 2317
Стаж: 16 лет 10 месяцев
Благодарил (а): 42 раза
Поблагодарили: 506 раз

Re: Изменение изображения кнопки при наведении

Сообщение Pazh »

TerminatorTM труд ты конечно сделал значительный, НО, ИМХО, это куча не нужного кода (вопрос решается созданием спайна и добавлением css свойства hover - телодвижений и кода в разы меньше и понятней).
Помощь в ЛС/email только за WM или ЮMoney
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Таки как я писал вчера - мне не понятно как увязать все это дело через непрямое имя файла (не прописывая в css конкретные имена файлов, либо как туда подставлять генерируемое имя, как оно происходит тут).
То есть в принципе можно вместо событий мыши там переопределять стили, но в текущем моем понимании будет оно еще длиннее.

Кстати нашел неприятную вещь - в текущем варианте оно не будет работать, если на странице более 1 кнопки одинаковой. Чуть позже допишу сюда как поправил, но пока уперся в то, что все одинаковые элементы заранее предопределены с одинаковыми name. Ну не разводить же в самом деле по 10 переменных массива $template (с приставками от 1 до 10), чтобы был разный name... Как вариант - в специальной версии функции обрезать выводимый ей код html, но тогда придется во всех формах html искать где кнопка выводится и ручками дописывать код, что тоже не комильфо...
Аватара пользователя
Pazh
Former team member
Сообщения: 2317
Стаж: 16 лет 10 месяцев
Благодарил (а): 42 раза
Поблагодарили: 506 раз

Re: Изменение изображения кнопки при наведении

Сообщение Pazh »

вот так выглядит сплайн кнопки Изображение, т.е. верхняя часть картинки показывается по-умолчанию, нижняя - при hover (т.е. наведение мыши). смещение делаешь через background-position
Помощь в ЛС/email только за WM или ЮMoney
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

Re: Изменение изображения кнопки при наведении

Сообщение TerminatorTM »

Взглянув по новому на пример (по ссылке) я задумался - если кнопку объявить не как img, а скажем как блок <div> или <span> с фоном кнопки и стилями обычным и hover - может получится. Другое дело что все равно надо дописывать функцию img, чтобы она принимала новый параметр, который ей укажет генерировать конкретную кнопку по иному, а для каждой кнопки прописывать в php файле этот 6-й параметр к запуску. Но мы избежим проблемы идентификации конкретной одинаковой кнопки, что стоит выше. Завтра подумаю и отпишу что вышло.

К слову - меняем функции из моего поста выше на вот эти и у нас загораются все кнопки, включая одинаковые. Вот только незадача - все одинаковые кнопки загораются при наведении одновременно =^_^=. Хотя как это исправить есть мысль...

Код: Выделить всё

function LightOn(name)
{ 
if (name.length > 0)
	{
	for (var i = 0; i < name.length; i++) name.item(i).src=name.item(i).src.substring(0, name.item(i).src.length-4) + "_l" + name.item(i).src.substring(name.item(i).src.length-4, name.item(i).src.length);
	}
else
	name.src=name.src.substring(0, name.src.length-4) + "_l" + name.src.substring(name.src.length-4, name.src.length);
}

function LightOut(name)
{ 
if (name.length > 0)
	{
	for (var i = 0; i < name.length; i++) name.item(i).src=name.item(i).src.substring(0, name.item(i).src.length-6) + name.item(i).src.substring(name.item(i).src.length-4, name.item(i).src.length);
	}
else
	name.src=name.src.substring(0, name.src.length-6) + name.src.substring(name.src.length-4, name.src.length);
}
Добавлено спустя 1 час 33 минуты 58 секунд:
Я таки наконец вспомнил, что CSS шаблон мы спокойно можем включить прямо в текст генерируемого html и все встало на свои места.

Промежуточный вариант (или "брюки превращаются в...").
На чистый шаблон делаем:
1) Открываем includes/session.php

Код: Выделить всё

function img($img, $alt = '', $width = false, $suffix = '', $type = 'full_tag')
Заменяем:

Код: Выделить всё

function img($img, $alt = '', $width = false, $suffix = '', $type = 'full_tag', $lightbtn = '')
2) Ниже ищем:

Код: Выделить всё

			default:
				$use_width = ($width === false) ? $img_data['width'] : $width;

				return '<img src="' . $img_data['src'] . '"' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';
	
			break;
		}
Заменяем:

Код: Выделить всё

			default:
				$use_width = ($width === false) ? $img_data['width'] : $width;

				if (empty($lightbtn)) 
				{
					return '<img src="' . $img_data['src'] . '"' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';
				}
				else
				{
	return '<style type="text/css"><!-- .tbl_btn {background-image: url(' . $img_data['src'] . '); background-position: right bottom; } .tbl_btn:hover {background-image: url(' . $img_data['src'] . '); background-position: left top; }--></style> <table class="tbl_btn" cellpadding="0" cellspacing="0" border="0"' . (($use_width) ? ' width="' . $img_data['height'] . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . '><tr><td> </td></tr></table>';
				}
			break;
		}
Сие требует четкого задания размеров всех картинок во всех файлах imageset.cfg стиля, причем размер указывать одного изображения в сплайне. В самом графическом файле изображение снизу - старое, сверху - заменяемое.

Встает несколько "НО" (требуется помощь):
1) в старом варианте у нас был параметр alt, который задавал выводимый всплывающий текст когда наведена мышка на кнопку, а здесь надписи нет. В голову приходит только нечто упоротое вроде создания прозрачной пустой картинки аналогичного размера и ее размещения в теле таблицы в теге img c размерами и этим самым alt. Само по себе - опять лишняя работа. Какие мнения?
2) почему то вместо того, чтобы располагаться рядом, кнопки (то есть таблицы) оказываются друг над другом в случае, когда несколько кнопок заданы последовательно в ряд. В старом варианте такой проблемы не возникало...

Сия модификация для работы по прежнему требует следующих шагов:
1) Создать альтернативный вид кнопки и добавить его в тот же файл над оригинальным + проверить размеры в imageset.cfg
2) Найти представление этой кнопки в html файле вашего стиля
3) По имени переменной изображения отыскать ее определение в соответствующем PHP файле
4) В определении добавить к вызову функции img() шестым по счету параметром некое уникальное название (проще придумать его из первых двух переменных), чтобы для разных элементов не совпадали классы ни с чем другим.

Пример (кнопка "Новая тема"):
1) редактируем button_topic_new.png в imageset/ru
В imageset.cfg (*высота*ширина):

Код: Выделить всё

img_button_topic_new = button_topic_new.png*30*100
Название и размеры конкретно из моего стиля.

2) На странице просмотра форумов (viewforum_body.html) выглядит так:

Код: Выделить всё

<a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>
3) Соответствующий PHP файл - viewforum.php в корневом каталоге

Код: Выделить всё

	'POST_IMG'					=> ($forum_data['forum_status'] == ITEM_LOCKED) ? $user->img('button_topic_locked', $post_alt) : $user->img('button_topic_new', $post_alt),
4) Добавляем в конец нужное, получается:

Код: Выделить всё

	'POST_IMG'					=> ($forum_data['forum_status'] == ITEM_LOCKED) ? $user->img('button_topic_locked', $post_alt) : $user->img('button_topic_new', $post_alt, false, '', '', 'ButtonTopicNew'),

Вернуться в «Стили для phpBB 3.0.x»