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

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

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Pazh
Former team member
Сообщения: 2317
Стаж: 16 лет 10 месяцев
Благодарил (а): 42 раза
Поблагодарили: 506 раз

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

Сообщение Pazh »

TerminatorTM в миллион первый раз Вам говорят - посмотрите как сделаны кнопки в prosilver и все поймете что то что Вы предлагает - кроме как "кастыль" или "танцы в бубном по изобретению велосипеда" назвать нельзя. Включите на своем форуме prosilver и посмотрите там, а FireBug или аналоги помогут посмотреть в коде страницы на это
TerminatorTM писал(а):я задумался - если кнопку объявить не как img, а скажем как блок <div> или <span> с фоном кнопки и стилями обычным и hover - может получится.
вот это единственно правильная мысль за несколько дней - об этом вам написали еще несколько дней назад, но Вы упорно пытаетесь от этого уйти.
TerminatorTM писал(а):параметр alt, который задавал выводимый всплывающий текст когда наведена мышка
alt выводит текстовое сообщение ВМЕСТО картинки когда саму карттинку по каким-то причинам нельзя отразить (картинки отключены в браузере, картинку нельзя получить по указанному пути)
а вот title - как раз выводит всплывающее окошко с описанием к картинке
Помощь в ЛС/email только за WM или ЮMoney
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

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

Сообщение TerminatorTM »

Таки я признателен за Ваше терпение. Формулируя и выкладывая некоторые конечные стадии сюда - я помогаю сам себе осмыслить до конца то, что я сотворил и попутно получить еще совет и\или мотивацию. Когда допустим человек сломал ногу, он сначала ходит именно на костылях, а потом уже встает на ноги в полном смысле, а младенец сначала ползает, потом учится ходить =^_^=

Продолжим:
Кнопки в просильвере сделаны интересно, но несколько неподходяще к ситуации, ибо перековыривать все html и там переписывать все кнопки - это долго и печально.
За ночь мой мозг очистился от лишних нагромождений и текущий вариант выглядит так:

1) В styles/мой стиль/theme/stylesheet.css в конец добавляем:

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

.buttons {
	display:inline-block;
	background-position: right bottom;
}

.buttons:hover {
	display:inline-block;
	background-position: left top;
}
2) В includes/session.php в функции img ищем:

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

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

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

return '<div class="buttons" title="' . $alt . '" style="background-image: url(' . $img_data['src'] . ');' . (($use_width) ? ' width: ' . $use_width . 'px;' : '') . (($img_data['height']) ? ' height: ' . $img_data['height'] . 'px;' : '') . '"> </div>';
Подготавливаем файлы нужных нам изображений в виде: два изображения друг над другом, снизу оригинальное, сверху - при наведении и не забываем прописать размеры в imageset.cfg

Опционально: таки title работает, но была бы полезна альтернатива alt, на случай недоступности изображений, которая не предусмотрена в div. Как можно сделать?

P.S. Единственно в избранных случаях возникает ситуация, когда элемент типа <div> оказывается внутри <p>, чего быть не должно. Пока лечу избранными правками в html.
Аватара пользователя
xisp
phpBB 3.0.0 RC7
Сообщения: 1798
Стаж: 14 лет 4 месяца
Благодарил (а): 152 раза
Поблагодарили: 215 раз
Забанен: Бессрочно

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

Сообщение xisp »

TerminatorTM писал(а):, но была бы полезна альтернатива alt, на случай недоступности изображений, которая не предусмотрена в div. Как можно сделать?
Опять же, смотрите, как это сделано в просилвере. Картинка в нём поверх текста, и если не доступна, будет виден текст.
phpBBex
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

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

Сообщение TerminatorTM »

Я смотрел и до этого, но не осилил что именно в CSS делает текст закрытым задним фоном.
Аватара пользователя
xisp
phpBB 3.0.0 RC7
Сообщения: 1798
Стаж: 14 лет 4 месяца
Благодарил (а): 152 раза
Поблагодарили: 215 раз
Забанен: Бессрочно

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

Сообщение xisp »

TerminatorTM писал(а):но не осилил что именно в CSS делает текст закрытым задним фоном.
Картинка поверх и делает. Точнее она прописана фоном в отдельном элементе, который поверх родительского элемента с текстом.
phpBBex
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

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

Сообщение TerminatorTM »

Словами то я это понимаю, но не в коде.
Возьмем пример:

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

<div class="buttons">
	<div class="reply-icon"><a href="{U_POST_REPLY_TOPIC}" title="{L_POST_REPLY}"><span></span>{L_POST_REPLY}</a></div>
</div>
Где {U_POST_REPLY_TOPIC} - это будет ссылка, а {L_POST_REPLY} - текст.

Используемые стили из buttons.css:

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


.buttons {
	float: left;
	width: auto;
	height: auto;
}

.buttons div {
	float: left;
	margin: 0 5px 0 0;
	background-position: 0 100%;
}

.buttons div a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0;
	position: relative;
	overflow: hidden;
}

.buttons div span	{ position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span	{ background-position: 0 100%; }
.reply-icon span	{ background: transparent none 0 0 no-repeat; }
.buttons div.reply-icon		{ width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
Как сказал профессор Ф.Ф. Преображенский "Кто на ком стоял? Потрудитесь яснее выражать свои мысли".
Так вот: какой элемент тут какой заслоняет и какими свойствами в CSS это достигается если можно по пунктам.
Аватара пользователя
xisp
phpBB 3.0.0 RC7
Сообщения: 1798
Стаж: 14 лет 4 месяца
Благодарил (а): 152 раза
Поблагодарили: 215 раз
Забанен: Бессрочно

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

Сообщение xisp »

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

.buttons div a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;

...


.buttons div span	{ position: absolute; width: 100%; height: 100%
То есть делаем ссылку блочным элементом с position: relative;, а вложенный в неё элемент- абсолютно позиционированным с размерами в 100%.
phpBBex
Аватара пользователя
Pazh
Former team member
Сообщения: 2317
Стаж: 16 лет 10 месяцев
Благодарил (а): 42 раза
Поблагодарили: 506 раз

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

Сообщение Pazh »

вот кнопка
Изображение
вот ее код html

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

<div class="reply-icon">
    <a id="fr-button" title="Стандартный ответ" href="http://www.phpbbguru.net/community/posting.php?mode=reply&f=18&t=40936">
        <span></span>
        Ответить
    </a>
</div>
вот ее css

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

.buttons div.reply-icon {
    width: 89px;
    height: 24px;
}
.buttons div {
    float: left;
    margin: 0px 5px 0px 0px;
    background-position: 0px 100%;
}
.buttons div span {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.reply-icon span {
    background-image: url("./styles/nx_guru/imageset/ru/button_topic_reply.png");
}
.reply-icon span {
    background: none no-repeat scroll 0px 0px transparent;
}
т.е. сама картинка кнопки на фон вставляется вот этим html кодом

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

<span></span>
Помощь в ЛС/email только за WM или ЮMoney
TerminatorTM
phpBB 1.2.1
Сообщения: 21
Стаж: 12 лет 9 месяцев
Благодарил (а): 1 раз

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

Сообщение TerminatorTM »

То, что фон добавляется через span - это существенная деталь, которая как раз ускользала от моего внимания.

Но Вы когда конкретизировали пример, к сожалению, потеряли часть кода в html и css, в частности кусок того самого, что управляет сплайном, потому мои попытки воспроизвести (в том числе анализируя оригинальный buttons.css) не привели к желаемому результату. В данном случае я пытался повторить все, только избавившись от прослойки в виде тега <a>, который в сабсильвере как раз содержит внутри себя все, что я тут пытаюсь отредактировать.

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