JQuery Hover Image Swap Problem

I have been attempting to implement the JQuery Hover Implementation for a page that now uses JavaScript.

mousing over the Thumb Image should change the Lower Image accordingly, and when you mouse out the background-color should return to the background 开发者_Go百科color #FFFFFF.

I think that Im still missing something in the JavaScript and if someone sees the problem, I would really greatly appreciate it.

Here is my JSFiddle: http://jsfiddle.net/NinjaSk8ter/P8baa/

Here is the link to the site which illustrates the behavior: http://www.odontex.net/Ingles/mexico/aboutus-mexicoci.html

All your divs have id="content" changing them to class="content would be a start

I would use something like this...

Mark all the thumbs with e.g. class "thumb" and give them an attribute something like references="X", where X is the number of the thumb. Then, make content boxes with class="content" thumbref="X" with the same meaning...then

$(document).ready(function(){
    $(".content").hide();
    $(".thumb").hover(
        function(){
            $(".content[thumbref="+$(this).attr("references")+"]").show()
        },
        function(){
            $(".content[thumbref="+$(this).attr("references")+"]").hide()
        }
    );
});

and I think it should do the trick:)