Problem selecting specific related elements

Problem selecting specific related elements

Hi all,

Im trying to make a script that shows a certain image when hovering the mouse over a related link.
The way the two are linked is by the images id is the same as the links rel attribute.

My html look like this:
  1. <div class="pageContent">
  2.       <span id="first-project" class="thumbnails>
  3.             <img alt="" src="link to image">
  4.       </span>
  5.       <a class="project" rel="first-project" href="link">first project</a>
  6.       <span id="second-project" class="thumbnails>
  7.             <img alt="" src="link to image">
  8.       </span>
  9.       <a class="project" rel="second-project" href="link">second project</a>
  10. </div>
The effect Im trying to achieve is similar to the one used here: link
His script looks like this:
  1. jQuery(function($) {
                    $(".project").hover(
                        function()
                        {
                            var rel= $(this).attr("rel");
                            $("#thumbnails #" + rel).show();
                        },
                        function()
                        {
                            var rel= $(this).attr("rel");
                            $("#thumbnails #" + rel).hide();
                        }
                    );











So my question is really, how do I apply the same effect to my html?

Im really new to jQuery so would love some help here.

Peter