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


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

+2  A: 

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>

  if ( == 'link1' )
     $(".mydiv")[0].innerHTML = "<img src='1.png'.. />";  
     $(".mydiv")[0].innerHTML = "<img src='2.png' .. />";  

  $(".mydiv")[0].innerHTML = "";

Preview Source

+2  A: 

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

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

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.

Alex Barrett