Меню сайта. Выделение активной страницы в меню

[Dies]

Очень нужна помощь. Чёто никак не пойму как сделать элементарную вещь.

Выше, воображаемое меню сайта. Я хочу сделать так чтобы когда мышкой наводишь на кнопку сверху полосочка становилась красной и буквы становились белыми. Это я знаю как осуществить: 2 картинки и одна при наведении заменяет другую. но вот сама проблемма. как сделать чтобы после перехода по ссылке красная полоска оставалась только на активной странице??? вот как щас на первом пункте висит эта полоска, чтоб так было допустим когда по 3 пункту пройду. оченама нужно

вообще думаю можно было через css сделать проще, но шрифт на кнопках будет картинкой.

И не знаю имеет ли значение то что меню собираюсь делать таким образом что к каждой кнопке в ручную прописывать ссылку к странице. По другому пока никак не научился делать графическое меню.

Сайт ставлю на джумлу.

По возможности объясните простыми словами, для чайника. Занимаюсь данным делом недавно

[lancer]

но вот сама проблемма. как сделать чтобы после перехода по ссылке красная полоска оставалась только на активной странице??? вот как щас на первом пункте висит эта полоска, чтоб так было допустим когда по 3 пункту пройду. оченама нужно

Все зависит от способа, которым вы собираетесь реализовывать "измение картинки по наведении".

Если смещением позиции фона(лучший способ на мой взгляд), то просто прописываем активному пункту, например, класс on (class="on"), а в CSS указаываем, что у ссылки с классом "on" фон уже смещен в область, при которой видно красную полосочку.

В любом случае, независимо от способа, сначало просто реализуйте по наведении, а затем уже доработаете до того, что хотите.

Edited May 8, 2009 by lancer

[Dies]

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','file:///C|/Documents and Settings/ASUS/Мои документы/Тест сайтов/images/01324_newyorkcitybypaulobarcellosjr_1920x1080.jpg',1)"><img src="file:///C|/Documents and Settings/ASUS/Мои документы/Тест сайтов/images/01178_chicagoatnight_1920x1080.jpg" name="Image1" width="1920" height="1080" border="0" id="Image1" /></a>

Такой код у меня для вставки "изменяющейся картинки при наведении". Реализую через дримвивер функцией "Изображение прохода".

Ещё в этот код нужно что-то вставлять, какой-нибудь класс присваивать?

И если не сложно объясните пожалуйста, что потом прописывать в CSS

[lancer]

Если у вас с помощью JS это делается, то проще простого: в onmouseout тогда надо:

if (this.className != 'on')
{
	код замены картинки
}

! - в JS означает not, то есть, если это не элемент с классом on, то менять фон по отведении мыши не надо.

Ну а img'y, что активный, прописать class='on' и src = "картинка с полосочкой"

Edited May 8, 2009 by lancer

[Dies]

у меня меню не в яваскрипт) либо я чего-то недопонимаю...

в хтмл всё.

[lancer]

Раньше у вас было

onmouseout = "код замены картинки"

Теперь должно быть

onmouseout = "if (this.className != 'on') {код замены картинки}"

Edited May 8, 2009 by lancer

[psywalker]

Dies

Дружище , это немного заморочка, но совсем фигня, слушай:

1) Тебе нужно создать класс .page , в нём прописать ту картинку, которую ты хотел бы видеть на Действующей странице

2) От странице к странице просто меняй класс у ссылки, которой соответствует страничка и всё

Вот вырвал кусочек кода специально для тебя, недавно тут делал меню одно, вобщем как раз по твоей проблеме, просто разберись с кодом:

http://psywalker.ru/PayNetGate/menu.html

Смотри, после этого я просто переставляю класс .page другому элементу списка, который соответствует странице, и моё меню уже выглядит так:

http://psywalker.ru/PayNetGate/menu2.html

Edited May 10, 2009 by psywalker

[Hevel]

А если я использую IFlame, и меню у меня не перезагружается заново по переходе по ссылке!

[Razor]

Hevel, тогда думаю ЯваСкриптом только.

А вообще, чтобы это правда было автоматизировано все (вплане подсвечивался пункт меню) это ведь ЯваСкрипт или генерация страницы на сервере, тобишь при помощи обычных стилей такое не реализоватЬ, правильно?)