Изменение картинки в другом блоке через hover

[Lamo]

Здравствуйте!
Хочу сделать горизонтальное меню, при наведении на кнопки которого менялась бы картинка header(располагается над меню). Планирую, чтобы каждой кнопке соответствовала своя картинка.
Примерно как это выглядит: mammoth-russia.ru.
Только у них меню вертикальное. И не знаю как это у них сделано.
Как можно реализовать мою задумку?
Подскажите пожалуйста.

[MyLastHit]

jQuery метод .hover(). Работаете внутри примитивно с DOM, меняете background нужного слоя. Картинки рекомендую предзагрузить в переменную или слить в один спрайт и менять background-position. Иначе будет с задержкой.

[Lamo]

Сообщение от MyLastHit

jQuery метод .hover(). Работаете внутри примитивно с DOM, меняете background нужного слоя. Картинки рекомендую предзагрузить в переменную или слить в один спрайт и менять background-position. Иначе будет с задержкой.

А пример кода не подкинете? Просто я не спец в этой области, сайт делаю пхпшоп цмс фри.

[MyLastHit]

(Например) Создайте несколько img в контейнере .pic, сделайте всем display:none кроме первого. Создайте меню nav>a*6. Каждому a добавьте data-id с номером по порядку начиная от нуля.
Поскольку hover не делегируется пока что, я думаю не будет ничего плохого в том, чтобы написать так:

$('nav a').hover(function(){
    var id = $(this).data('id');
    $('.pic img:eq('+id+')').show();
  }, function(){
    $('.pic img').hide();
})

Может и не красиво, но коротко и понятно) Упростить и оптимизировать можно, если стоит такая задача - подскажу как.

[Lamo]

А как можно Ваш код приделать к моему? Разрешите приведу код css:
Это код горизонтальной менюшки:

.smk-menu a, .smk-menu a:link, .smk-menu a:visited, .smk-menu a:hover { text-align: left; text-decoration: none; outline: none; letter-spacing: normal; word-spacing: normal; }
.smk-menu, .smk-menu ul { margin: 0; padding: 0; border: 0; list-style-type: none; display: block; }
.smk-menu li { margin: 0; padding: 0; border: 0; display: block; float: left; position: relative; z-index: 5; background: none; }
.smk-menu li:hover { z-index: 10000; white-space: normal; }
.smk-menu li li { float: none; }
.smk-menu ul { visibility: hidden; position: absolute; z-index: 10; left: 0; top: 0; background: none; }
.smk-menu li:hover>ul { visibility: visible; top: 100%; }
.smk-menu li li:hover>ul { top: 0; left: 100%; }
.smk-menu:after, .smk-menu ul:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; }
.smk-menu, .smk-menu ul { min-height: 0; }
.smk-menu ul { background-image: url(images/spacer.gif); padding: 10px 30px 30px 30px; margin: -10px 0 0 -30px; }
.smk-menu ul ul { padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px; }
div.smk-nav-center { position: relative; float: right; right: 50%; }
ul.smk-menu { position: relative; float: left; left: 50%; }
.firefox2 ul.smk-menu { float: none; }
.smk-menu { padding: 6px 6px 6px 6px; }
.smk-nav { position: relative; height: 39px; z-index: 100; }
.smk-nav .l, .smk-nav .r { position: absolute; z-index: -1; top: 0; height: 39px; background-image: url('images/nav.png'); }
.smk-nav .l { left: 0; right: 0; }
.smk-nav .r { right: 0; width: 996px; clip: rect(auto, auto, auto, 996px); }
.smk-menu a { position: relative; display: block; overflow: hidden; height: 27px; cursor: pointer; text-decoration: none; }
.smk-menu ul li { margin:0; clear: both; }
.smk-menu a .r, .smk-menu a .l { position: absolute; display: block; top: 0; z-index: -1; height: 81px; background-image: url('images/menuitem.png'); }
.smk-menu a .l { left: 0; right: 4px; }
.smk-menu a .r { width: 408px; right: 0; clip: rect(auto, auto, auto, 404px); }
.smk-menu a .t { margin-right: 10px; margin-left: 10px; font-weight: bold; font-size: 14px; color: #383838; padding: 0 14px; margin: 0 4px; line-height: 27px; text-align: center; }
.smk-menu a:hover .l, .smk-menu a:hover .r { top: -27px; }
.smk-menu li:hover a a .l, .smk-menu li:hover a .r { top: -27px; }
.smk-menu a:hover .t { color: #EBEBEB; }
.smk-menu li:hover a .t { color: #EBEBEB; }

Кусок кода html менюшки:

  <div class="smk-header">
        <div class="smk-header-png"></div>
        <div class="smk-header-jpeg"></div>
        <div class="smk-logo">
          <h1 id="name-text" class="smk-logo-name"><a href="http://www.Название сайта.ru/" title="@name@">Название сайта</a></h1>
          <div id="slogan-text" class="smk-logo-text">Слоган фирмы</div>
        </div>
      </div>
      <div class="smk-nav">
        <div class="l"></div>
        <div class="r"></div>
        <div class="smk-nav-center">
          <ul class="smk-menu">
            <li class="item28"><a href="/" title="Главная"><span class="l"> </span><span class="r"> </span><span class="t">Главная</span></a></li>
            <li class="item28"><a href="/" title="Проектирование"><span class="l"> </span><span class="r"> </span><span class="t">Проектирование</span></a></li>
            <li class="item28"><a href="/" title="Монтаж"><span class="l"> </span><span class="r"> </span><span class="t">Монтаж</span></a></li>
            <li class="item28"><a href="/" title="Сервис"><span class="l"> </span><span class="r"> </span><span class="t">Сервис</span></a></li>
            <li class="item28"><a href="/" title="Примеры работ"><span class="l"> </span><span class="r"> </span><span class="t">Примеры работ</span></a></li>
            <li class="item28"><a href="/" title="Стоимость услуг"><span class="l"> </span><span class="r"> </span><span class="t">Стоимость услуг</span></a></li>
            <li class="item28"><a href="/" title="Контакты"><span class="l"> </span><span class="r"> </span><span class="t">Контакты</span></a></li>
           </ul>
        </div>
      </div>
      <div class="smk-content-layout">
        <div class="smk-content-layout-row">
          <div class="smk-layout-cell smk-sidebar1">
            <div class="smk-block">

[MyLastHit]

Приделать можно. Если сами думать не хотите, то тут есть ветка фриланса.