Jump to content
  • 0

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


pitbull522
 Share

Question

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

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

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

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

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Edited by pitbull522
Link to comment
Share on other sites

  • 0

Если я вас правильно понял, то в коде должно получиться следующее -> 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;
}

Link to comment
Share on other sites

  • 0

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

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

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


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.: Видимо у меня руки кривые, когда я делал тоже самое - не работало. gg.gif

Edited by pitbull522
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy