Jquery - when a link is hovered, switch an image in a seperate DIV

Question

Hi, I am new to Jquery and am having problems getting the following working.

I have a web page with two columns. In the left column is an unordered list of links.

In the right column is a div.

What I want to do is have the div in the right column, change its picture when a user hovers over a link in the left column

eg.

User hovers link 1 The div changes to display image 1

user hovers link 2 div displays image 2

I cannot seem to get it to work no matter what i do.

Any help would be great thanks

Answer 1

Just a really quick solution you might just change the source of the image instead of the 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 = "";
});

Preview Source

Answer 2

This makes use of HTML5 data attributes to store the location of the image resouce.

<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>

I'll even chuck a quick image preloader in for good measure.

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

It shouldn't take too much effort to create a nice fading effect to go with this as well.