скрыть кнопки меню после клика на них

[greysells]

Подскажите как организовать следующее.

Есть кнопки меню.реализованы вот так. есть ссылка, изображение фоном.

			<td  class="td" valign="top">
			<div style="background-image:url(/images/tog_03.gif); background-repeat:no-repeat; width:109px; height:32px; vertical-align:middle; padding-top:10px; " >
			<div>
			<a href="price.php"><center>Прайс-лист</center></a>
			</div>
			</div>
			</td>

И нужно сделать,что бы при нажатии, это изображение скрывалось и оставался только текст ссылки.

Т.е. если ссылка активна бэкграунда не видно пользователю, как только он кликнул на другую ссылку, у этой отображение возобновилось,а у "кликнутой" аналогичным образом скрылось. Буду очень благодарен за помощь.

[Spamol]

Можно например у кнопки после клика сделать беграунд цветом беграунда на фоне которого расположена это кнопка и чтобы пока выбрана эта ссылка фон кнопки не менялся.... Если не понятно - могу предоставить фрагмент css-кода!

[greysells]

Можно например у кнопки после клика сделать беграунд цветом беграунда на фоне которого расположена это кнопка и чтобы пока выбрана эта ссылка фон кнопки не менялся.... Если не понятно - могу предоставить фрагмент css-кода!

примерно представил, но Ваш код все же будет полезен.

[greysells]

Как сделать саму процедуру он клика. Приведите пример кода пожалуста.

[Veseloff]

1. Каждому диву с картинкой присваиваем айдишник.

2. Пишем функцию, которая будет показывать все картинки.

3. Для кадой конкретной ссылки пишем событие онклик, которое сначала делает все картинки видимыми, а потом прячет нужную.

<div style="background-image:url(/images/tog_03.gif); background-repeat:no-repeat; width:109px; height:32px; vertical-align:middle; padding-top:10px; " id="div1">
<a href="#" onClick="showall(); document.getElementById('div1').style.backgroundImage='none'; return false;">Прайс-лист</a>

Но в конкретном случае ссылка, как я понял, ведет на страницу price.php. Что мешает в скрипте нужным образом обработать данные? Тогда никакого онклика не надо будет

[greysells]

а как выглядит сама функция?

[Spamol]

Вот такой готовый вариан(меню в сером стиле)

CSS

#content {
	background: #f3f3f3;
	border: 1px solid #9C9C9C;
	margin: 0 auto;
	width: 800px;
	}
#pages li {
		display: inline;
		list-style-type: none;
		}

	#pages ul, ol {
		margin: 0;
		padding: 0;
		}

	#pages a {
		background: #b8b8b6;
		color: #dbdbdb;
		font-weight: bold;
		margin: 0 3px 0 0;
		padding: 6px 10px;
		}

	#pages a:hover {
		background: #a4a4a3;
		color: #0f41b3;
		}

	.current_page_item a, .current_page_item a:hover {
		background: #a4a4a3 !important;
		color: 0f41b3 !important;
		}

HTML

<div id="content">
			<div id="pages">
			<ul>
			<li><a href="Ссылка">Название ссылки</a></li>
			<li><a href="Ссылка2">Название ссылки</a></li>
			</ul>
			</div></div>

Вроде так, нету времени пробовать!

Edited February 8, 2009 by Spamol