Ссылки в hover меню картинками

[skygazer]

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

С псевдоклассом hover я знаком, но есть одна проблема. В html коде пункты меню пустые.

<div id="home"><a href="#"></a></div>

Ко мне пришла в голову мысль заполнить пункты меню по высоте прозрачной картинкой шириной в один пиксель, и

div a{display:block;}

в css.

С лого у меня та же проблема, хотя она конечно решаема вынесением картинки в html. Подскажите как по-хорошему это все сделать, не хотелось бы изобретать велосипед.

[Gaspode]

Картинки фоном идут?

У простой ссылки — один фон, у ссылки с ховером — другой фон. Или я что не так понял?

[SelenIT]

есть одна проблема. В html коде пункты меню пустые

Это действительно проблема — для поисковиков и поисковой оптимизации. Какой-никакой текст у ссылок должен быть обязательно. На самый худой случай — в виде alt-текстов картинок. Хотя лучше нормальным текстом, используя техники замены его картинкой

[skygazer]

Картинки фоном идут?

У простой ссылки — один фон, у ссылки с ховером — другой фон. Или я что не так понял?

Для каждого пункта меню отдельная фоновая картинка, и ховер картинка. Сейчас у меня готово ховер меню, но пункты меню ссылками сделать не получается.

Выглядит это так:

#home,#portfolio,#webhosting,#about{
float:left;
height:84px;}

#portfolio{
background:url(images/menu_02.png);
width:109px;}
#portfolio:hover{
background:url(images/darkmenu_01.png);}
#webhosting{
background:url(images/menu_03.png);
width:105px;}
#webhosting:hover{
background:url(images/darkmenu_02.png);}

Я бы сделал меню текстом и не мучался, но в задании макета- меню картинками.

Edited January 19, 2012 by skygazer

[buddah]

Так надо? http://jsfiddle.net/BEaAV/

[skygazer]

,

Edited January 20, 2012 by skygazer