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

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

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

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, приношу свои извинения, по поводу второго, прост не правильно вас понял