Jquery - когда ссылка наведена, переключите изображение в отдельном DIV

Question

Я новичок в Jquery, и у меня возникают проблемы с работой следующего.

У меня есть веб-страница с двумя столбцами. В левом столбце находится неупорядоченный список ссылок.

В правом столбце находится div.

То, что я хочу сделать, это иметь div в правом столбце, изменить его изображение, когда пользователь наводит курсор на ссылку в левом столбце

например.

Пользователь наводит ссылку 1. Div изменяется для отображения изображения 1.

пользователь наводит на ссылку 2 div отображает изображение 2

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

Любая помощь будет большой спасибо

Answer 1

Это позволяет использовать атрибуты данных HTML5 для хранения местоположения ресурса изображения.

<ul>
    <li><a href="foos.html" data-image-src="images/foo.png">What is a foo?</a></li>
    <li><a href="bars.html" data-image-src="images/bar.jpg">Find a good bar!</a></li>
</ul>

Я даже исправлю быстрый предварительный загрузчик изображений.

$(function() {
    $('ul a')
        .mouseover(function() {
            $('div img').attr('src', this.getAttribute('data-image-src'));
        })
        .each(function() {
            new Image().src = this.getAttribute('data-image-src');
        });
}

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

Answer 2

Просто очень быстрое решение, вы можете просто изменить источник изображения вместо div.

<a href="javascript:;" class="mylink" id="link1">link1</a>    
<a href="javascript:;" class="mylink" id="link2">link2</a> 
<div class="mydiv" ></div>

$(".mylink").bind("mouseover",function(){
  if ( this.id == 'link1' )
  {
     $(".mydiv")[0].innerHTML = "<img src='1.png'.. />";  
  }
  else
  {
     $(".mydiv")[0].innerHTML = "<img src='2.png' .. />";  
  }
}).bind("mouseout",function(){

  $(".mydiv")[0].innerHTML = "";
});

Предварительный просмотр источника