Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Вопрос от новичка

Автор: Areostar 4.6.2011, 15:39

Java Script - раньше не пользовал, вот скажите мне надо чтоб выбраный пункт в меню окрашивался в другой цвет! как это сделать я боль-мение понял, но если надо чтоб выделялось фигурно (как показанно во вложении). Как можно добиться такого? встаклять такой рисунок как фоновый для яцейки таблицы!? Или что ещё!?

Автор: systemIV 4.6.2011, 15:53

Ну примерно так:
При наведении на какой то пункт меню, блок с картинкой принимает параметр display: visible. До этого он был hide. В принципе и всё.

Добавлено через 1 минуту и 19 секунд
Лучше делай всё это через спрайты. И вставлять ничего не нужно будет.

Автор: Areostar 4.6.2011, 16:05

Я пример подкинуть не можите? плиз

Автор: Areostar 4.6.2011, 16:37

Скажите пожалуйста, как присобачить к менюшке перехвадчик события клика мышки!?

В РНР файле создаётся табличка для меню. Что надо чтоб прикрепить к ней JS? Запихнуть табличу в форму!? или создать страницу полностью(html, head, body И ТАК ДАЛЕЕ).?

Автор: bars80080 4.6.2011, 16:47

можно и без js обойтись

менюшка имеет примерно такую разметку:

Код


<ul class="menu">
<li><a>clients</a></li>
<li class="seleted"><a>resources</a></li>
<li><a>newsroom</a></li>
<li><a>careers</a></li>
</ul>

стили разметки

Код


.menu li {display: inline; background: url(/путь до фоновой картинки - ровный градиент.gif) repeat-x; }
.menu li a { text-transform: uppercase; text-decoration: underline; color: #ffffff; }
.menu li.seleted { background: url(/путь до фоновой картинки выбранного пункта.gif) no-repeat; }
.menu li a:hover { background: url(/путь до фоновой картинки при наведении на ссылку мышки.gif) no-repeat; }

если ещё ссылке и пункту (li и a) поставить стиль display: inline-block; то можно пункты представить в виде блоков в одну линию

Автор: Areostar 4.6.2011, 17:02

На счёт последнего пункта по подробнее плиз, как мне расположить пункты в строку!?

и мне надо не только при новедении, но и при клике!?

И к тому же если мне именно с табличкой надо!?

Автор: InfMag 5.6.2011, 17:35

Areostar, таблички в вёрстке не по назначению есьм моветон.

Код


.menu li { display: inline-block; width: 100px; height: 30px; }

Добавлено через 8 минут и 55 секунд
Areostar, перехват события клика мышки:

Код


var tags = document.getElementsByTagName('ul');
for (var i=0; i<tags.length; i++) {
    if (tags[i].className.indexOf('menu') !== -1) {
        var links = tags[i].getElementsByTagName('a');
        for (var n=0; n<links.length; n++) {
            links[n].onclick = function () {
                alert('Хорош тыкать!');
                return false; // если хотим чтобы ссылка не переходила по href
            };
        }
    }
}

Гораздо проще будет на jQuery.

Автор: Evghenusi 5.6.2011, 19:21

InfMag а точно нужен перехват?
вы лучше расспросите по подробнее, что товарисчу надо.

может он просто не верно излагает мыслю.
и ему нужна правильная "вёрстка", а перехватом события он подразумевает "onclick".

P.S. если влез не в тему...то звиняйте.

Автор: InfMag 6.6.2011, 17:33

Evghenusi, ну был вопрос про перехват. Вообще в его случае конечно не нужно, если мы говорим о вёрстке. Но этот вопрос куда более подходит к ветке.