Меню на JS

[WebMasterOleg]

вот тут верстка: ВЕРСТКА

В общем меню надо сделать так, чтобы при наведении на любой участок раздела меню картинка этого пункта меню менялась с черно булой на цветную. Э это смог реализовать только когда наводишь непосредственно на саму картинку. Когда навожу на ссылку, картинка не меняется! Как сделать чтобы поменялась?? Сейчас я пытаюсь написать функцию на JQuery, но пока идей нет.

Это то самое меню!

<ul class="pages-menu">
          <li><a href="#" title="#"><img src="images/home-a.png" onmouseover="this.src='images/home-h.png';" onmouseout="this.src='images/home-a.png';" />Главная</a></li>
          <li><a href="#" title="#"><img src="images/sitemap-a.png" onmouseover="this.src='images/sitemap-h.png';" onmouseout="this.src='images/sitemap-a.png';" />Site Map</a></li>
          <li><a href="#" title="#"><img src="images/advertise-a.png" onmouseover="this.src='images/advertise-h.png';" onmouseout="this.src='images/advertise-a.png';" />Реклама</a></li>
          <li><a href="#" title="#"><img src="images/support-a.png" onmouseover="this.src='images/support-h.png';" onmouseout="this.src='images/support-a.png';" />Контакты</a></li>
</ul>

Вот так выводится список из 4х меню. Помогите плиз написать скрипт!!

[sigma77]

WebMasterOleg,

Зачем тут вообще скрипт?

a {
   display: block;
   height: 60px;
   background: url(img.png) no-repeat;
}

a:hover {
   background-image: url(img_hover.png);
}

[Electron]

А скриптом примерно так:

<a href="" onmouseout="document.getElementById('sitemap').src='images/sitemap-a.png'" onmouseover="document.getElementById('sitemap').src='images/sitemap-h.png'">...</a>

Edited November 28, 2011 by Electron

[WebMasterOleg]

Вот что получилось: Верстка. Просто пошаманил CSS.

Edited November 28, 2011 by WebMasterOleg

[Softlink]

только это все спрайтом лучше делать

[WebMasterOleg]

Знаю, но у меня пока проблемы с ними)) не могу правильно разместить их так, чтобы текст не задевать, и потом там с шириной надо играться...

Edited November 28, 2011 by WebMasterOleg

[Rikani]

Ага, не очень красиво, когда картинки при первом наведении мигают.

[WebMasterOleg]

Понимаете в чем проблема. Я не рисунок делаю ссылкой, я целый блок <li><a>Главная</a></li> делаю ссылкой. Когда прописываю ширину и высоту для спрайта (32х32), то у меня текст съезжает соответственно. Пока с этим не могу сладить. Попробую увеличить отступы картинок в спрайтах.

И еще проблема: картинка (спрайт) не встает по центру, даже при значениях top center.

Edited November 28, 2011 by WebMasterOleg

[WebMasterOleg]

Все, сделал меню с помощью спрайтов! Ура мле! Это победа! Верстка.