Меню сайта картинками

[pitbull522]

Хотел сделать меню сайта как здесь -> _http://www.mighty-sport.ru/ то есть меню состоит полностью из картинок и наползает на шапку, а при наведение на пункт одна картинка меняется меняется на другую (получается, что пункт под курсором выделяется).

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

В общем то я знаю как сделать одинаковый background ко всем пунктам меню, если оно состоит из слов -> http://jsfiddle.net/7Jp2q/ Но в данном случае меню полностью состоит из готовых картинок и background присваивать просто не к чему.

Гуглил, но точно таких готовых решений нет.

Как это можно реализовать?

[tius]

На сайте-примере нет никакого заумного кода: ряд a-тегов, внутри которых img, меняющихся при событии mouseOver.

В данной ситуации, лучше всего делать меню рядом a-тегов с классами, которым присваивать значения с высотой+шириной блока и фоновым изображением, которое менять под курсором уже псевдо-классом a.menu-foobar:hover.

[pitbull522]

На сайте-примере нет никакого заумного кода: ряд a-тегов, внутри которых img, меняющихся при событии mouseOver.

В данной ситуации, лучше всего делать меню рядом a-тегов с классами, которым присваивать значения с высотой+шириной блока и фоновым изображением, которое менять под курсором уже псевдо-классом a.menu-foobar:hover.

Если я вас правильно понял, то в коде должно получиться следующее -> http://jsfiddle.net/Q2TQJ/

Пункты меню даже не отображаются на экране. Видимо потому что в теге <a> пусто и фоновое изображение прикреплять не к чему.

Здесь картинка это уже готовый пунк меню, ему никакого дополнительного текста не требуется. В этом у меня вся загвоздка, поэтому я и обратился на форум.

Edited July 28, 2012 by pitbull522

[tius]

Если я вас правильно понял, то в коде должно получиться следующее -> http://jsfiddle.net/Q2TQJ/

Пункты меню даже не отображаются на экране. Видимо потому что в теге <a> пусто и фоновое изображение прикреплять не к чему.

Здесь картинка это уже готовый пунк меню, ему никакого дополнительного текста не требуется. В этом у меня вся загвоздка, поэтому я и обратился на форум.

Неправильно вы меня поняли.

Фоновое изображение крепиться к тегу а. Картинки внутри не нужны вообще.

Пример (высота и ширина ссылки взята "от балды"):

a.item1 {
	display: block;
	width: 100px;
	height: 25px;
	background: url('путь_к_фоновому_изображению.jpg') no-repeat 0 0;
}
a.item1:hover {
	background: url('путь_к_фоновому_изображению_при_наведении_мышки.jpg') no-repeat 0 0;
}

[pitbull522]

Неправильно вы меня поняли.

Фоновое изображение крепиться к тегу а. Картинки внутри не нужны вообще.

Пример (высота и ширина ссылки взята "от балды"):

a.item1 {
	display: block;
	width: 100px;
	height: 25px;
	background: url('путь_к_фоновому_изображению.jpg') no-repeat 0 0;
}
a.item1:hover {
	background: url('путь_к_фоновому_изображению_при_наведении_мышки.jpg') no-repeat 0 0;
}

Спасибо за помощь, всё хорошо работает.

P.S.: Видимо у меня руки кривые, когда я делал тоже самое - не работало.

Edited July 30, 2012 by pitbull522