Вид для печати
подскажите способы замены картинки при наведении мыши
(нужно при создании меню). А также если на меню нажимать, а картинка будет меняться в другом месте.
Какие-нибудь простые для "чайника" способы, но чтобы на 100% работало в FireFox, Opera и IE.
Плиз.
тут более чем достаточно способов:Цитата:
подскажите способы замены картинки при наведении мыши
[Only registered and activated users can see links. Click Here To Register...]
тут без JS не обойтись.. это вам к Aykroyd [Only registered and activated users can see links. Click Here To Register...]Цитата:
А также если на меню нажимать, а картинка будет меняться в другом месте.
можно и JS.
Только пример попроще, чтобы была возможность разобраться и свои картинки поставить.
ладно, будет вам пример..Цитата:
можно и JS.
Только пример попроще
html:
если у вас картинка прописываются фоном, то можно сделать примерно как тут: [Only registered and activated users can see links. Click Here To Register...]Код:[img]i/old-image.gif[/img]
...................................................................
[Only registered and activated users can see links. Click Here To Register...]
ладно, будет вам пример..Цитата:
можно и JS.
Только пример попроще
html:
если у вас картинка прописываются фоном, то можно сделать примерно как тут: [Only registered and activated users can see links. Click Here To Register...]Код:[img]i/old-image.gif[/img]
...................................................................
[Only registered and activated users can see links. Click Here To Register...]
вот черт, этот пост лишний :blush2:
спасибо
Не работает, что не так?
<td width="200" height="46px">[Only registered and activated users can see links. Click Here To Register...]</td>
станно, у меня все работает.. я скопировал ваш код и вставил у себя..
короче, вот это:
у меня работает
может не хватает еще какого-нибудь кода в шапке например?
яву туда надо писать или это чисто html?
А можете куда нибудь выложить то, что получилось...
[/quote]Цитата:
Originally posted by lenmikh@Mar 13 2007, 15:34
Не работает, что не так?
<td width="200" height="46px">[Only registered and activated users can see links. Click Here To Register...]</td>
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
ukazhite v kakom user-agent ne rabotaet
В FireFox 1.0 и в IE 6.0 не работает
На мой взгляд это довольно обширная тема.
То, о чем идет речь, можно обозвать одним словом. Это ролловеры.
Учитывая этот факт, техника Image Replacement, изначально любезно предложенная garA, здесь не совсем имеет отношение к делу...
При реализации ролловеров средствами DHTML необходимо учитывать много разных нюансов. Например, прелоад.
К сожалению, у меня сейчас проблемы со временем. Чуть позже постараюсь осветить некоторые принципы. Если к тому времени будет такая необходимость, конечно... [Only registered and activated users can see links. Click Here To Register...]
мне только нужно знать:
то, что не работает это ява или просто html?
или dhtml?
на яве уже знаю как, вроде работает.
Хотелось опимальный способ, который обычно используют профессионалы...
Ну вот, вроде освободился. [Only registered and activated users can see links. Click Here To Register...]
Да простят меня мои коллеги, но давайте немного абстрагируемся от вышеизложенного. Дело в том, что перед выработкой тактики необходимо выработать стратегию. [Only registered and activated users can see links. Click Here To Register...] Какой именно вопрос рассматриваем?
1. Смена изображения при наведении на него курсора мыши.
2. Смена одного изображения при щелчке мышью на другом изображении.
Дело в том, что подходы к решению этих задач есть разные. Можно воспользоваться DHTML (JavaScript) для решения обоих вопросов. Но для решения первого (но не второго) вопроса гораздо проще, предпочтительнее и, что самое главное, "правильнее" использовать CSS, а не DHTML. Поэтому я вынужден сделать здесь такое разделение.
Итак, какой из двух вопросов рассматриваем?
Интересует первый вопрос:
1. Смена изображения при наведении на него курсора мыши.
[/quote]Цитата:
Originally posted by lenmikh@Mar 14 2007, 15:02
Интересует первый вопрос:
1. Смена изображения при наведении на него курсора мыши.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Хорошо. [Only registered and activated users can see links. Click Here To Register...]
В данном случае, как я уже говорил, гораздо предпочтительнее воспользоваться CSS. Это избавляет от необходимости вставки в код каких-либо скриптов и не требует делать отдельный прелоад ролловерного изображения. Существуют разные способы, но наиболее распространенный – изменение позиции фонового изображения. Т.е. изображения делается изначально таким, чтобы оно сразу содержало два варианта отображения (пример прикрепляю). А затем при помощи стилей мы задаем вот такое нехитрое правило:
На выходе получаем полноценный ролловер без использования DHTML.Код:a {background: url(img/b1.gif) no-repeat left top;}
a:hover {background: url(img/b1.gif) no-repeat right top;}
Пример привел весьма сокращенный. Опять, к сожалению, тороплюсь.
Если понадобятся дополнительные комментарии – пишите. [Only registered and activated users can see links. Click Here To Register...]
ой
я то думал, зачем Aykroyd пишет о Image Replacement, а оказалось, что [Only registered and activated users can see links. Click Here To Register...] я дал не правильную ссылку :blush2:Цитата:
Учитывая этот факт, техника Image Replacement, изначально любезно предложенная garA, здесь не совсем имеет отношение к делу...
я хотел дать эту ссылку: [Only registered and activated users can see links. Click Here To Register...] [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by garA@Mar 14 2007, 16:34
я хотел дать эту ссылку: [Only registered and activated users can see links. Click Here To Register...]* [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Это совсем другое дело. [Only registered and activated users can see links. Click Here To Register...]k: [Only registered and activated users can see links. Click Here To Register...]
Я так поняла, что такой тип ролловера применим для однотипных ссылок меню, когда текст отдельно, а фоновая картинка повторяется.
Но у меня немного по-другому.
Если названия в меню выполнены не текстом, а картинками? (см. в приложении)
и нужно, чтобы они подсвечивались при наведении, при нажатии оставались подсвеченными.
Вот реализация с помощью скрипта:
<td width="76" height="46px">[Only registered and activated users can see links. Click Here To Register...]</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 или что у вас там для того, чтобы правило не распространялось ни на какие ссылки в документе, помимо ссылок в меню. всё просто [Only registered and activated users can see links. Click Here To Register...]
pps: если можете залезть на своем сайте в php.ini, и если вас не смущают однотипные имена картинок с номерами, то можно сделать формирование этих правил частью функций CMS, и, в дальнейшем, добавлять пункты меню в CMS и о CSS не думать [Only registered and activated users can see links. Click Here To Register...]
но это уже лирика...