Dynamically display a photo's description on hover

Dynamically display a photo's description on hover

I'm fairly new to jQuery and JavaScript. I've beat around the block a couple times modifying code from here and there, but never written anything myself. Just thought I'd warn you.

I'm writing a tidbit of code that is going to be used for a photographer's website. The concept of the site is very simple; I am going to have Drupal generating two lists. The first list is simply photographs, semantically they just come one after another. The second is a list of div tags that contain a description of the photographs.

The only way that the images correlate currently is their semantic order. The first image should be matched with the first description, the second image with the second description, and so on. I do plan on changing this, but for the time being it is not my main concern.

Because the number of images added to the page might not necessarily be limited, I need to have jQuery pair up the images with the proper description, and then display it on hover—dynamically. My current method requires me to write out each hover function individually. This is a problem because, as I have mentioned, the amount of photos on any given page should not be limited.

Currently I have the functionality that I want, with the exception of the dynamic creation of functions. You can view what I have managed to do so far at  http://calvintennant.ca/blakeley.me/mock.htm. I have attached a .zip with all the files used to create that mock-up.

I hope you can help, thanks for looking.