Форум

McLotos · #1 (**permalink**) 02.12.2010, 10:09

Подскажите как это делается, если можно линканите образец скрипта...
Есть картинка, в ней нарисованы варианты кнопки, всего 4 варианта для каждой кнопки т.е. вариант кнопки в нормальном состоянии, при наведении курсора, при клике, и когда на этой странице.
Я мог бы при помощи css сделать всё это но только в том случае, когда каждый из вариантов кнопки находится в разных файлах, а когда в одном я не умею... подскажите, хочу научиться и такому варианту создания меню. Для тех кто не понял о чем речь прилагаю файлик, из которого мне нужно сделать меню. http://javascript.ru/files/u10172/1.gif
Первая строка меню в нормальном состоянии
Вторая строка - при наведении курсора т.е. я так думаю OnMouseOver
Третья строка - при нажатой кнопке мыши что-то типа OnClick или OnButtonClick я просто не знаю JS, но думаю по образцу сориентирюсь...
Четвертая когда я нахожусь на странице этого пункта меню.
Если у кого-нибудь есть такой скрипик киньте плиз...

exec · #2 (**permalink**) 02.12.2010, 10:21

http://html-css.info/2009/07/css-sprites

McLotos · #3 (**permalink**) 02.12.2010, 10:24

То есть получается что JS вообще не нужен?

McLotos · #4 (**permalink**) 02.12.2010, 10:32

Хотя нет, в любом случае нужен, ну прописал я этот код для css, настроил, но как теперь првязать к ним event которые мне нужны, о них говорилоь выше.

ksa · #5 (**permalink**) 02.12.2010, 10:40

Сообщение от McLotos

Если у кого-нибудь есть такой скрипик киньте плиз..

Как вариант...

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type='text/css'>
.button,
.button_dn {
	width: 62px;
	height: 20px;
	display: block;
	text-align: center;
	text-decoration: none;
}
.button {
	color: #000000;
	background: url('http://javascript.ru/files/u10172/1.gif') no-repeat 0 0;
}
.button:hover {
	color: #ffffff;
	background: url('http://javascript.ru/files/u10172/1.gif') no-repeat 0 -22px;
}
.button_dn {
	color: #ffffff;
	background: url('http://javascript.ru/files/u10172/1.gif') no-repeat 0 -45px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<a href='#' class='button' onmousedown='this.className="button_dn"' onmouseup='this.className="button"'>Test</a>
</body>
</html>

McLotos · #6 (**permalink**) 02.12.2010, 10:47

КУЛ! СПС! а как теперь сделать чтобы оставалась нажатой так кнопка где я нахожусь?

exec · #7 (**permalink**) 02.12.2010, 10:58

<script type='text/javascript'>
	(function () {
		var nodes = document.getElementById("menu").getElementsByTagName("A");
		for (var i = 0; i < nodes.length; i++)
			if (nodes[i].href.replace("www.", "").split("#")[0].split("?")[0] == location.href.replace("www.", ""))
				nodes[i].className = "button_dn";
	})();
</script>

Ссылки поместить в DIV с id='menu'.

McLotos · #8 (**permalink**) 02.12.2010, 11:10

А что означает эта строчка if (nodes[i].href.replace("www.", "").split("#")[0].split("?")[0] == location.href.replace("www.", ""))
nodes[i].className = "button_dn"; что должно быть вместо "www" "" "#"?

McLotos · #9 (**permalink**) 02.12.2010, 11:11

А ещё такой вопрос, если ссылки не постоянные, ну я пишу скин под CMS там через админку можно меню настраивать, т.е. менять название пунктов меню,адреса и их колличество, тогда вариант с DIV не сработает?

exec · #10 (**permalink**) 02.12.2010, 12:00

Цитата:

что должно быть вместо "www" "" "#"?

Ничего менять не надо. Ну вот например, текущий адрес — www.site.ru#anchor?a=1&b=2&c=3, а в меню ссылка просто site.ru. Условие на равенство не сработает, а написанная выше строчка поможет этого избежать, вычленив все ненужные части URL.

Форум

Справочник

Discord чат

Курсы javascript