On click select and remember which is selected

On click select and remember which is selected


I have a display with around 100 thumbnail images.  Each has an anchor tag around it that does not target any place. It's just a container for the thumbnail and a rollover span that triggers when move your mouse over the thumbnail. . This works. The structure of each thumbnail looks like this. 


  1. <a class="thumbnail thumbLeft" href="#">
  2.       <img id="avatar" width="30" height="30" border="0" name="Avatar Image" alt="AvatarImage" src="/images/AVATARS/10_30x30_BLUE.gif">
  3. <span style="width: 150px"><img width="150" alt="" src="/images/AVATARS/10_150x150_BLUE.gif"></span>
  4. </a>

I have just added a .click event to the .thumbnail class, that does an addClass when you click on one to add a white border around it. But not before removeClass is called on all thumbnails.

This works too. 

Now my question. 

I want to have a button on the page that collects the file name of the thumbnail image you selected. 

Do do that I'd need to look inside the currently selected thumbnail to it's containing <img > 

Furthermore I'd like to know if no image was selected.  I'm not sure how to do any of this and would appreciate some guidance.