как сделать смену картинки при наведении в навигации?

Первое сообщение в теме :

Хочу сделать чтоб картинка при наведении менялась т.е. просто была такая
а при наведении такая

img#i_icon_mini_register

Фокус-покус номер 2.

Анимируем не только стандартные, но и персональные кнопки.
Наведите мышку на две последние кнопки в меню.
Одна - ссылка на форум форумов.
Вторая - на юкозу. При наведении звездочки начинают мерцать.
При этом для анимация для каждой стандартной кнопки меню не изменилась.
То есть у них она, в отличие от персональных кнопок - своя.
Принцип действия игрушки.
Опять не 2, а 3 картинки.
Картинка №1 - изображение на прозрачном фоне с надписью. Можно и рамочку добавить. Тока все закрашивать не надо... Нам нужно на этой кнопке оставить побольше прозрачных мест, через которые будут просвечиваться фоновые изображения.
Например:

Устанавливается в ПА - верхняя часть и навигация для каждой персональной кнопки своя.
Картинка №2 - статичное изображение, которое будет просвечиваться через картинку №1 в "спокойном состоянии".
Например, вот такая картинка с звездочками:

Картинка №3 - анимированное изображение, которое будет просвечиваться через картинку №1 при наведении.
Например, сверкающие звездочки:

После того, как созданы все персональные кнопки, какие надо, со ссылками на форум форумов и другие страницы, ссылки на которые взбрендит поставить в меню, пишем в каскадную таблицу:

Код:

a.mainmenu img {
  background: transparent url('адрес картинки №2') center center scroll no-repeat;
}

a.mainmenu img:hover {
  background: transparent url('адрес картинки №3') center center scroll no-repeat;
}


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

kentus пишет:А на Профиль нету? Регистрация? Весело будет без кнопки регистрации)))))))))))))))

img#i_icon_mini_register - регистрация
img#i_icon_mini_profile - профиль

Кстати, по такому же принципу, как сделан фокус-покус №1, в движках ВВ3 на сервисе 2х2 можно "оживить" при наведении некоторые кнопки в сообщениях и списке форумов. Такие как "Новая тема", "Ответить", "Цитата", "Правка", "Профиль", "ЛС" и др.
Потому что хотя у этих кнопок нет id, но каждой из них присвоен класс.
Причем, каждой из таких кнопочек можно задать идивидуальную картинку при наведении.

как? откуда ты берешь эти данные "img#i_icon_mini_profile - профиль"

kentus пишет:как? откуда ты берешь эти данные "img#i_icon_mini_profile - профиль"

Из жука. А еще можно взять из CSS креатора, скрипт которого недавно выкладывал Ирбис. https://help.forum2x2.ru/forum-f80/tema-t9188.htm

На этой странице вижу:
Новая тема - img.i_post
Ответить - img.i_reply
правка img.i_icon_edit
цитата img.i_icon_quote
Профиль img.i_icon_profile
ЛС img.i_icon_pm
мультицитата - непонятный какой-то id,
www - нет ни id, ни класса, свойство получится задать тока как общее для всех картинок в диве выше...
Дальше лень шариться мышкой.

Как вы думаете, можно ли разделить строки расположения в навигации картинки и подписи? Т.е. картинки были б в верхней строке, а подпись к ним внизу?
Тогда уже не надо бояться, что разнесет строку на две или саму страницу ...
Как ПРИМЕР

Sunnyta пишет:Как вы думаете, можно ли разделить строки расположения в навигации картинки и подписи? Т.е. картинки были б в верхней строке, а подпись к ним внизу?
Тогда уже не надо бояться, что разнесет строку на две или саму страницу ...
Как ПРИМЕР

Они там не поделены. Это не картинка и подпись. Это одна картинка с надписью.
То есть:



Но решение, как я посмотрю, тоже интересное. Они двумя картинками обошлись, чтобы изменить ссылки при наведении.
Ща, попробую на тестовом. Может, тоже такое сооружу.

И для бб2 тоже имей в виду

Sunnyta пишет:И для бб2 тоже имей в виду

В вв2 id у картинок в навигации вроде такие же, как в вв3.
Посмотрела. Не... У них слегка по-другому сделано.
У них каждая ссылка в меню лежит в отдельном теге с id.
На сервисе 2х2 так не сделаешь. Здесь по-другому меню написано.

Здесь ты тоже самое для стандартных кнопок меню можешь сделать, но другим способом. То есть все с теми же 3-мя картинками.
То есть. Пустышка + две фоновые картинки.

Sunnyta пишет:Как вы думаете, можно ли разделить строки расположения в навигации картинки и подписи? Т.е. картинки были б в верхней строке, а подпись к ним внизу?
Тогда уже не надо бояться, что разнесет строку на две или саму страницу ...
Как ПРИМЕР

Это вроде сделано общей ссылкой (и картинка и подпись) и они нераздельны.

Угумс, это я видела. Хорошо у тебя получилось, но заморачиваться на 3 картинки мне лениво...
Еще бы вспомнить, где-то тут (Wol что ли) предлагал как можно картинку приподнять при наведении с помощью сисс.
Может заглянет сюда...

Спойлер:

Sunnyta пишет:Угумс, это я видела. Хорошо у тебя получилось, но заморачиваться на 3 картинки мне лениво...

Так ведь третья - пустышка, че ее делать то...

Sunnyta пишет:как можно картинку приподнять при наведении с помощью сисс.

На примере пм "Форум" на третьем бобике:

Код:

#i_icon_mini_index {
background: url('ССЫЛКА НА КАРТИНКУ'); width: 70px; height: 30px; display:block;
}
#i_icon_mini_index:hover {
background-position: 0 -30px;
};

Irbis пишет:
На примере пм "Форум" на третьем бобике:

Код:

#i_icon_mini_index {
background: url('ССЫЛКА НА КАРТИНКУ'); width: 70px; height: 30px; display:block;
}
#i_icon_mini_index:hover {
background-position: 0 -30px;
};

Хммм, теперь есть вопросы:
- в бб2 такой же код?
- как-то они не совсем привязаны друг к другу (т.е. картинка м.б. не рядом с надписью - тут надо задать позишн?)

*кажется разобралась ... это все прописАть в сисс, да?

Irbis пишет:На примере пм "Форум" на третьем бобике:

Попробовала... Правда, display:block; из кода выкинула.
Это, получается, анимированное меню можно сделать с помощью одного, но очень сложного гифа + пустышки, которая должна быть установлена как мини-иконка для кнопки...
"Очень сложный гиф" должен быть из 2 половинок. В первой половинке - все время одно изображение. Во второй - меняющийся кадр...
Если не анимировать, а просто чтоб статичные картинки менялись - проще...
Первая половинка - картинка "в спокойном состоянии", вторая - картинка при наведении...
Пошла такие шлепать у себя в форуме. Давно хотела, чтобы кнопки "Ответить", "Новая тема" и т.д. слегка менялись при наведении...

Fox-Alice,
1. тк не убирайте display: block; и пустышка не будет нужна.
2.

Если не анимировать, а просто чтоб статичные картинки менялись - проще...

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

а.... :D
Fox-Alice, приношу свои извинения, по поводу второго, прост не правильно вас понял