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

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

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

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


image jquery hyperlink hover
person Community    schedule 08.09.2009    source источник

Ответы (5)


arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

Вы можете сохранить src изображения в теге rel на странице a?

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

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

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

arrow_upward
0
arrow_downward

Учитывая следующий 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();
  });
});
person Jake McGraw    schedule 08.09.2009
comment
Имейте в виду, что для этого требуется, чтобы все изображения загружались вместе со страницей. - person tvanfosson; 09.09.2009

arrow_upward
0
arrow_downward

Предположим, что каждая ссылка содержит href отображаемого изображения и идентифицируется по классу, скажем, link-image. Кроме того, предположим, что область отображения настроена с фиксированным идентификатором 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; } );

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

person tvanfosson    schedule 08.09.2009

arrow_upward
0
arrow_downward

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

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

НАЗНАЧКА

<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;
}
person Sveisvei    schedule 08.09.2009