с помощью jquery, как изменить изображение при наведении указателей?

Question

У меня есть список ссылок (текстовое меню), и мне нужно изменить изображение в другой области, когда каждая ссылка зависает ...

изображения должны быть показаны там же, скажем, 100x100 площадь справа ... любая идея для достижения этой цели?

может ли каждая ссылка иметь src изображений? не знаю, как сделать это :(

Answer 1

Не полный ответ, но это будет направлять вас к реальному решению.

$("a") 
    .hover(function(){ $("#some-div").css("background", "my-image.jpg")); 

Answer 2

Вы можете хранить СРК изображения в отн метки на а?

<a href="#" rel="../images/myPicture.jpg">Anchor Link</a> 

Затем используйте раствор elcuco, но с небольшим изменением

$("a") 
    .hover(function(){ $("#some-div").css("background", $(this).attr('rel'))); 

Answer 3

Учитывая следующий HTML:.

<ul> 
    <li><a href="#" id="link1">Link Number 1</a></li> 
    <li><a href="#" id="link2">Link Number 2</a></li> 
    <li><a href="#" id="link3">Link Number 3</a></li> 
    <li><a href="#" id="link4">Link Number 4</a></li> 
    <li><a href="#" id="link5">Link Number 5</a></li> 
</ul> 
<ul> 
    <li><img src="image1.jpg" /></li> 
    <li><img src="image2.jpg" /></li> 
    <li><img src="image3.jpg" /></li> 
    <li><img src="image4.jpg" /></li> 
    <li><img src="image5.jpg" /></li> 
</ul> 

Используйте следующий JavaScript (с JQuery):

$(function(){ 
    $(".images img").hide(); 
    $(".links a").hover(function(){ 
    $(".images img").hide(); 
    $("#image"+/(\d+)$/.exec(this.id)[1]).show(); 
    }, function(){ 
    $(".images img").hide(); 
    }); 
}); 

Answer 4

Предположим, что каждое звено содержит HREF изображения будут показаны и идентифицируются класса, скажем link-image. Далее, предположим, что область отображения настроена с фиксированным id, imageDisplay.

$('a.link-image').hover(
    function() { 
     $('#imageDisplay').children().remove(); 
     $('<img src="' + $(this).attr('href') + '" alt="" />') 
      .css({ height: 100, width: 100 }) 
      .appendTo('#imageDisplay'); 
    }, 
    function() { 
     $('#imageDisplay').children().remove(); 
     $('<span>No image available</span>').appendTo('#imageDisplay'); 
    } 
); 

Вы могли бы на самом деле хотите использовать hoverIntent плагин для предотвращения мигания при перемещении мыши над ссылками.

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

$('a.link-image').click(function() { return false; }); 

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

Answer 5

Если не семантичен, и только для презентации я бы использовал классы и CSS.

$('.imageList li').hover(
function() { 
    $('#imageDisplay').addClass($(this).attr("class");); 
}, 
function() { 
    $('#imageDisplay').removeClass($(this).attr("class");); 
} 
); 

MARKUP

<ul class="imageList"> 
    <li class="deer">Show me a deer</li> 
    <li class="cow">Show me a cow</li> 
</ul> 
<div id="imageDisplay" /> 

CSS

#imageDisplay { 
    width:200px; 
    height:200px; 
} 
div.deer { 
    background:red; 
} 
div.cow { 
    background:blue; 
}