Правила форума
для обязательного прочтения!
Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Последние темы
» Как удалить не нужную инфу с форумаавтор shaman123 Сегодня в 10:13
» Как удалить с форума ссылки на 2x2 форум
автор shaman123 Сегодня в 9:22
» Представляем Пакеты услуг Forum2x2 : новый способ развития форума
автор KatrinaZ Чт 19 Апр - 17:24
» не работает Тег <hr />
автор hawk9951 Чт 19 Апр - 16:46
» [Общая тема] Заявки на удаление сомнительной рекламы
автор abigal Чт 19 Апр - 14:32
» Вопрос от новичка
автор Dana Domirani Чт 19 Апр - 14:17
» Как убрать возможность писать для определенного гостя? (по айпи)
автор Alex317 Ср 18 Апр - 11:07
» Почему-то стал медленнее загружаться сайт, никаких изменений в последнее время не вносил.
автор Dantes Вт 17 Апр - 8:20
» Красивая цитата
автор hawk9951 Вт 17 Апр - 7:40
» css текста
автор hawk9951 Вс 15 Апр - 22:26
Интересные решения
Изменение кнопок при наведении курсора
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1 • Поделиться •
Изменение кнопок при наведении курсора
У мнея вопрос! Можно ли сделать так чтобы при наведении на кнопки меню, кнопка менялась (там подсвечивалась, изменяла форму и т.д.) Если да то как? 

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
С помощью CSS можно сделать какое-то изменение) Но для этого его надо знать)
Иосиф Виссарионович-
-
Сообщения : 331
Регистрация : 2009-05-08
Благодарности : 78
Re: Изменение кнопок при наведении курсора
[code]Но для этого его надо знать)
И что это значит?


Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Вот в этом и проблема... Незнание не освобождает от ответственности)
Почитай: http://ru.wikipedia.org/wiki/Cascading_Style_Sheets
Внизу есть ссылки на русскоязычные ресурсы, понимание CSS тебе облегчит создание и эксплуатацию любого html документа, а если решишь серьёзно заниматься web-дизайном, то просто необходимо.
Почитай: http://ru.wikipedia.org/wiki/Cascading_Style_Sheets
Внизу есть ссылки на русскоязычные ресурсы, понимание CSS тебе облегчит создание и эксплуатацию любого html документа, а если решишь серьёзно заниматься web-дизайном, то просто необходимо.
Иосиф Виссарионович-
-
Сообщения : 331
Регистрация : 2009-05-08
Благодарности : 78
Re: Изменение кнопок при наведении курсора
Ладно, с этим прорвемся! но как использовать эту CSS? Насколько моему маленькому (но красивому
) мозгу известно что можно вставлять на место кнопок только одну картинку - и что делать раз нужно вставить две? Какой панелью воспользоваться? Куда коды вставлять?

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Cтоп! Помоему гдето в админке есть какое-то окно CSS?! 

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Вообще CSS не меняет содержимого а меняет его отображение на экране, тем самым ты сможешь менять свойства объекта при наведении, например, фон, границу, прозрачность, положение на экране, отступы... Так что сначала учебник - потом эксперименты...
CSS у нас можно использовать ПА > Оформление > Цвета > CSS
CSS у нас можно использовать ПА > Оформление > Цвета > CSS
Иосиф Виссарионович-
-
Сообщения : 331
Регистрация : 2009-05-08
Благодарности : 78
Re: Изменение кнопок при наведении курсора
Ладно, прорвемся=) Спасибо тебе 

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Cлушай! А ведь это окно похоже только для цветов!? А как тогда и куда вставлять код для кнопок?
Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Воспользуйся следующим кодом:
- Код:
<A href="Адрес ссылки" onmouseout="document.site.src='Адрес картинки, которая будет появляться после отведения курсора'" onmouseover="document.site.src='Адрес картинки, которая будет появляться при наведении курсора'"><IMG border=0 name=site src="Адрес картинки, которая будет показываться до наведения курсора"></A>
pops-
-
Сообщения : 75
Возраст : 25
Регистрация : 2008-02-14
Благодарности : 0
Re: Изменение кнопок при наведении курсора
Работоспособно, только немного нерационально 
Правильнее будет так:

Правильнее будет так:
- Код:
<A href="Ссылка"><IMG border=0 src="картинка до наведения" onmouseover="this.src='картинка при наведении'" onmouseout="this.src='картинка после наведения'"></A>
Re: Изменение кнопок при наведении курсора
да штука полезная, но как этот код использовать с кнопками меню?


Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Да читал я все это! Но к моему случаю такое не подходит
но все равно всем вам спасибо

но все равно всем вам спасибо

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
ну так объясни как следует что за случай, попробуем помочь
Re: Изменение кнопок при наведении курсора
У меня картинки, а не надписи, Irbis. Похоже уже понятно что без CSS ничего не провернешь 

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Ну если не провернешь без CSS, значит провернем с ним
Рассказывай что тебе нужно сделать я внимательно слушаю (вернее читаю))) и попробую помочь.

Рассказывай что тебе нужно сделать я внимательно слушаю (вернее читаю))) и попробую помочь.
Re: Изменение кнопок при наведении курсора
Ну хорошо, спасибо!
Значит пользователи у меня хотят чтобы когда ты проводишь курсором по кнопкам меню (под шапкой в смысле, я про эти) кнопки слегка подсвечивались. Если бы меню было в виджете, то еще можно изменить бы было, а то тут никак! Вот хорошо если бы администраторы внесли такую возможность в сервис как эффект при наведении мыши - стало бы проще. А то тут приходится знакомиться с какойта "КЭСЭСЭ".
Ну или хотя бы если бы можно было вставлять не адрес картинки, а скрипт.
Вообщем как бы сделать так чтобы картинка в меню при наведении менялась на другую и обратно?!


Вообщем как бы сделать так чтобы картинка в меню при наведении менялась на другую и обратно?!

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
А ссылочку не дадите на форум взглянуть?
Или хотя бы скажите какой движок
Или хотя бы скажите какой движок
Re: Изменение кнопок при наведении курсора
Ссылочку не дам - все секретно, без обид
Движок phpBB 2


Движок phpBB 2

Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Re: Изменение кнопок при наведении курсора
Не так все оказалось просто как казалось
Сначала идете в ПА > Оформление > Цвета > CSS
Добавляете туда:
Далее в ПА > Общие настройки > Форум/Конфигурация находите поле "Описание сайта" и добавляете в него
Далее в ПА > Оформление > Шаблоны/Общие настройки находите шаблон overall_footer и в самый конец перед </body> добавьте:
Надписи типа сообщения_ссылка_на_картинку_при_наведении заменить на соответствующие им адреса картинок. Если какого-то из пунктов в вашем меню навигации нет, то удалить соответствующие строчки.
Сохраняете и публикуете шаблон.

Сначала идете в ПА > Оформление > Цвета > CSS
Добавляете туда:
- Код:
#ilogin{display: none;}
Далее в ПА > Общие настройки > Форум/Конфигурация находите поле "Описание сайта" и добавляете в него
- Код:
<div id="ilogin">{USERNAME}</div>
Далее в ПА > Оформление > Шаблоны/Общие настройки находите шаблон overall_footer и в самый конец перед </body> добавьте:
- Код:
<script>
var ilogin = document.getElementById("ilogin").innerHTML;
var indexx = document.getElementById("i_icon_mini_index");
var portalx = document.getElementById("i_icon_mini_portal");
var calendarx = document.getElementById("i_icon_mini_calendar");
var galleryx = document.getElementById("i_icon_mini_gallery");
var faqx = document.getElementById("i_icon_mini_faq");
var searchx = document.getElementById("i_icon_mini_search");
var membersx = document.getElementById("i_icon_mini_members");
var groupsx = document.getElementById("i_icon_mini_groups");
var profilex = document.getElementById("i_icon_mini_profile");
var messagex = document.getElementById("i_icon_mini_message");
var loginx = document.getElementById("i_icon_mini_login");
var logoutx = document.getElementById("i_icon_mini_logout");
var registerx = document.getElementById("i_icon_mini_register");
indexx.onmouseover = function qq(){this.src='форум_ссылка_на_картинку_при_наведении'};
indexx.onmouseout = function ww(){this.src='форум_ссылка_на_картинку_при_отводе'};
portalx.onmouseover = function ee(){this.src='портал_ссылка_на_картинку_при_наведении'};
portalx.onmouseout = function rr(){this.src='портал_ссылка_на_картинку_при_отводе'};
calendarx.onmouseover = function tt(){this.src='Календарь_ссылка_на_картинку_при_наведении'};
calendarx.onmouseout = function yy(){this.src='Календарь_ссылка_на_картинку_при_отводе'};
faqx.onmouseover = function uu(){this.src='ЧаВо_ссылка_на_картинку_при_наведении'};
faqx.onmouseout = function ii(){this.src='ЧаВо_ссылка_на_картинку_при_отводе'};
searchx.onmouseover = function oo(){this.src='поиск_ссылка_на_картинку_при_наведении'};
searchx.onmouseout = function pp(){this.src='поиск_ссылка_на_картинку_при_отводе'};
galleryx.onmouseover = function nn(){this.src='галерея_ссылка_на_картинку_при_наведении'};
galleryx.onmouseout = function mm(){this.src='галерея_ссылка_на_картинку_при_отводе'};
membersx.onmouseover = function aa(){this.src='сп.пользователей_ссылка_на_картинку_при_наведении'};
membersx.onmouseout = function ss(){this.src='сп.пользователей_ссылка_на_картинку_при_отводе'};
groupsx.onmouseover = function dd(){this.src='группы_ссылка_на_картинку_при_наведении'};
groupsx.onmouseout = function ff(){this.src='группы_ссылка_на_картинку_при_отводе'};
profilex.onmouseover = function gg(){this.src='профиль_ссылка_на_картинку_при_наведении'};
profilex.onmouseout = function hh(){this.src='профиль_ссылка_на_картинку_при_отводе'};
messagex.onmouseover = function jj(){this.src='сообщения_ссылка_на_картинку_при_наведении'};
messagex.onmouseout = function kk(){this.src='сообщения_ссылка_на_картинку_при_отводе'};
if (ilogin == "Гость"){
loginx.onmouseover = function ll(){this.src='вход_ссылка_на_картинку_при_наведении'};
loginx.onmouseout = function zz(){this.src='вход_ссылка_на_картинку_при_отводе'};
registerx.onmouseover = function vv(){this.src='регистрация_ссылка_на_картинку_при_наведении'};
registerx.onmouseout = function bb(){this.src='регистрация_ссылка_на_картинку_при_отводе'};
}
if (ilogin != "Гость"){
logoutx.onmouseover = function xx(){this.src='выход_ссылка_на_картинку_при_наведении'};
logoutx.onmouseout = function cc(){this.src='выход_ссылка_на_картинку_при_отводе'};
}
</script>
Надписи типа сообщения_ссылка_на_картинку_при_наведении заменить на соответствующие им адреса картинок. Если какого-то из пунктов в вашем меню навигации нет, то удалить соответствующие строчки.
Сохраняете и публикуете шаблон.
Re: Изменение кнопок при наведении курсора
СПАСИБО ОГРОМНОЕ, Irbis!





Розетка-
-
Сообщения : 174
Регистрация : 2008-09-06
Благодарности : 9
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения