Меняющаяся кнопка

[Demon2 0]

Подскажите плиз код, для реализации меню:

Меню-блок, состоит как бы из кнопок.

кнопка: наводим курсор - меняеться, уводим - принимает первоначальный вид.

т.е. используеться 2 картинки. Но нужно что бы текст был не нарисован на самой картинке, а написан на ней.

Соре если криво обьяснил..

[lifestar 18]

Пример кнопок покажи, они нарисованы уже?

[Demon2 0]

Нет, ненарисованы...

ну вот например наподобие такого хочеться:

в выделеном состоянии пункт "статистика"

Хочеться узнать как такое реализовываеться..

Изменено 5 сентября 2007 пользователем Demon2

[Akela 9]

Если псевдокнопка, т.е. линк на фоне - в стилях пишешь a:hover и там другой цвет, фон и т.п.

[Demon2 0]

Да, думаю это то что мне нужно, только вот с css я не дружу..

Пытаюсь добавить такое:

.menu { color: #000000; font-family: tahoma; font-size: 11px; background: url(../images/menu_bg.gif); cursor: pointer; padding-left: 15px; }

.menu a:hover { color: #000000; font-family: tahoma; font-size: 11px; background: url(../images/menu_bg_actived.gif); cursor: pointer; padding-left: 20px; }

Но вообще не то че-то..

Изменено 5 сентября 2007 пользователем Demon2

[Akela 9]

Вот это - "url(../images/menu_bg_actived.gif);" - явно работать будет не всегда.

[Demon2 0]

Ну насчет ссылки ясно...ладно, попробую пока что помучаться сам, но примерчик непомешал бы..

Изменено 5 сентября 2007 пользователем Demon2

[lifestar 18]

Пример

HTML код

<div class="yoMenu">

	<ul>

		<li><a href="http://yoSite.ru" title="yoTitle">yoMenu 1</a></li>

		<li><a href="http://yoSite.ru" title="yoTitle">yoMenu 2</a></li>

		<li><a href="http://yoSite.ru" title="yoTitle">yoMenu 3</a></li>

	</ul>

</div>[/html]

CSS

[code].yoMenu ul { list-style: none; margin: 0px 0px 5px 0px; padding: 0px; } .yoMenu ul li { display: inline; padding: 0px; margin: 0px; } .yoMenu ul li a, .yoMenu ul li a:visited { display: block; color: #5e66b1; text-decoration: none; margin: 0px; padding: 4px 10px 4px 10px; border-bottom:1px solid #f5f5f5; font-size: 10pt; background: #000 url(http://yoSite.ru/img/menuoff.gif) center center repeat-x; } .yoMenu ul li a:hover { background: #fff url(http://yoSite.ru/img/menuon.gif) center center repeat-x; color: #000; text-decoration:none; }[/code]

menuoff.gif и menuon.gif картинки высотой как пункт меню (можно больше) и шириной 2-5 пикселей.

[Demon2 0]

ясно, спасибо, буду завтра химичить

[Demon2 0]

Спасибо, применил еще немного фантазии и неплохо получилось

Изменено 8 сентября 2007 пользователем Demon2