подскажите способы замены картинки при наведении мыши
(нужно при создании меню). А также если на меню нажимать, а картинка будет меняться в другом месте.
Какие-нибудь простые для "чайника" способы, но чтобы на 100% работало в FireFox, Opera и IE.
Плиз.
можно и JS.
Только пример попроще, чтобы была возможность разобраться и свои картинки поставить.
ладно, будет вам пример..можно и JS.
Только пример попроще
html:
если у вас картинка прописываются фоном, то можно сделать примерно как тут: [Только зарегистрированные пользователи могут видеть ссылки. ]Код:[img]i/old-image.gif[/img] ................................................................... [Только зарегистрированные пользователи могут видеть ссылки. ]
ладно, будет вам пример..можно и JS.
Только пример попроще
html:
если у вас картинка прописываются фоном, то можно сделать примерно как тут: [Только зарегистрированные пользователи могут видеть ссылки. ]Код:[img]i/old-image.gif[/img] ................................................................... [Только зарегистрированные пользователи могут видеть ссылки. ]
вот черт, этот пост лишний :blush2:
спасибо
может не хватает еще какого-нибудь кода в шапке например?
яву туда надо писать или это чисто html?
А можете куда нибудь выложить то, что получилось...
[/quote]
ukazhite v kakom user-agent ne rabotaet
В FireFox 1.0 и в IE 6.0 не работает
На мой взгляд это довольно обширная тема.
То, о чем идет речь, можно обозвать одним словом. Это ролловеры.
Учитывая этот факт, техника Image Replacement, изначально любезно предложенная garA, здесь не совсем имеет отношение к делу...
При реализации ролловеров средствами DHTML необходимо учитывать много разных нюансов. Например, прелоад.
К сожалению, у меня сейчас проблемы со временем. Чуть позже постараюсь осветить некоторые принципы. Если к тому времени будет такая необходимость, конечно...
мне только нужно знать:
то, что не работает это ява или просто html?
или dhtml?
на яве уже знаю как, вроде работает.
Хотелось опимальный способ, который обычно используют профессионалы...
Ну вот, вроде освободился.
Да простят меня мои коллеги, но давайте немного абстрагируемся от вышеизложенного. Дело в том, что перед выработкой тактики необходимо выработать стратегию.
1. Смена изображения при наведении на него курсора мыши.
2. Смена одного изображения при щелчке мышью на другом изображении.
Дело в том, что подходы к решению этих задач есть разные. Можно воспользоваться DHTML (JavaScript) для решения обоих вопросов. Но для решения первого (но не второго) вопроса гораздо проще, предпочтительнее и, что самое главное, "правильнее" использовать CSS, а не DHTML. Поэтому я вынужден сделать здесь такое разделение.
Итак, какой из двух вопросов рассматриваем?
Интересует первый вопрос:
1. Смена изображения при наведении на него курсора мыши.
[/quote]
Хорошо.
В данном случае, как я уже говорил, гораздо предпочтительнее воспользоваться CSS. Это избавляет от необходимости вставки в код каких-либо скриптов и не требует делать отдельный прелоад ролловерного изображения. Существуют разные способы, но наиболее распространенный – изменение позиции фонового изображения. Т.е. изображения делается изначально таким, чтобы оно сразу содержало два варианта отображения (пример прикрепляю). А затем при помощи стилей мы задаем вот такое нехитрое правило:
На выходе получаем полноценный ролловер без использования DHTML.Код:a {background: url(img/b1.gif) no-repeat left top;} a:hover {background: url(img/b1.gif) no-repeat right top;}
Пример привел весьма сокращенный. Опять, к сожалению, тороплюсь.
Если понадобятся дополнительные комментарии – пишите.
ой
я то думал, зачем Aykroyd пишет о Image Replacement, а оказалось, что [Только зарегистрированные пользователи могут видеть ссылки. ] я дал не правильную ссылку :blush2:Учитывая этот факт, техника Image Replacement, изначально любезно предложенная garA, здесь не совсем имеет отношение к делу...
я хотел дать эту ссылку: [Только зарегистрированные пользователи могут видеть ссылки. ]
Я так поняла, что такой тип ролловера применим для однотипных ссылок меню, когда текст отдельно, а фоновая картинка повторяется.
Но у меня немного по-другому.
Если названия в меню выполнены не текстом, а картинками? (см. в приложении)
и нужно, чтобы они подсвечивались при наведении, при нажатии оставались подсвеченными.
Вот реализация с помощью скрипта:
<td width="76" height="46px">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
То есть меню разбито на несколлько картинок.
1. Есть ли возможность с пом. CSS сделать такое?
2. Как сделать, чтобы ссылка при переходе на раздел становилась такого цвета, как при наведении мыши (красной), потом при переходе на другой раздел, возвращалась в первоначальное сотояние? (с пом. CSS и JS)
уберите у выбранного пункта меню аттрибут href.
дайте ему class="selected".
вместо
напишите правилоКод:ul#menu a:hover {background: url(img/b1.gif) no-repeat right top;}
.Код:ul#menu a.selected, ul#menu a:hover {background: url(img/b1.gif) no-repeat right top;}
если фоновые картинки пунктов меню различаются (в вашем случае они с разным текстом), то спрячте текст (методов полно и на этом форуме они также обсуждались; например: поместить текст в ссылке в дополнительный и написать правило ul#menu a span {dispaly:none;}), каждому пункту меню дайте id и к этому id привязывайте фоновые картинки. придется написать пару правил для каждого пункта меню и эти пары буду следующего вида:
.Код:ul#menu a#mm_0 {background: url(img/b1.gif) no-repeat left top; width: 80px;} ul#menu a.selected#mm_0, ul#menu a#mm_0:hover {background: url(img/b1.gif) no-repeat right top;}
меняется только id пункта меню, имя файла соответствующей ему картинки и его размеры (в примере 35px и 80px).
и общий код для всех пунктов
.Код:ul#menu a {display: block; height: 35px;} ul#menu a span {display: none;}
ps: ul#menu или что у вас там для того, чтобы правило не распространялось ни на какие ссылки в документе, помимо ссылок в меню. всё просто
pps: если можете залезть на своем сайте в php.ini, и если вас не смущают однотипные имена картинок с номерами, то можно сделать формирование этих правил частью функций CMS, и, в дальнейшем, добавлять пункты меню в CMS и о CSS не думать
но это уже лирика...
Ваши права
k: