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

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

0 голосов
/ 01 октября 2009

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

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

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

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

например.

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 01 октября 2009

При этом используются атрибуты данных 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');
        });
}

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

2 голосов
/ 01 октября 2009

Просто очень быстрое решение, вы можете просто изменить источник изображения вместо 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 = "";
});

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

...