using jquery, how to change an image when hovering

Question

I have a list of links (a text menu), and I need to change an image in other area when each link is hovered...

the images need to be showed in the same place, lets say a 100x100 area at right... any idea to achieve this?

can each link have the src of the images? no idea how to do it :(

Answer 1

Given the following 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>

Use the following JavaScript (with jQuery):

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

Answer 2

If its not semantic, and only for presentation, I would use classes and 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;
}

Answer 3

Not a complete answer, but this will guide you to the real solution.

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

Answer 4

Assume that each link holds the href of the image to be shown and is identifiable by class, say link-image. Further, let's say the display area is set up with a fixed 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' );
    }
);

You might actually want to use the hoverIntent plugin to prevent flashing as the mouse moves over the links.

Normally, you'd couple this with a click handler on the links that disables the default link behavior.

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

Note that you could simply chain the click handler onto the hover handler.

Answer 5

You could store the src of the image in the rel tag on the a?

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

Then use elcuco's solution but with a minor change.

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