Dynamic Odered list with jquery selectable control

Question

I got this mockup, I need to load dynamically pictures from a db and once loaded I need to click on each picture in order to mark what scholar will be promoted to the next grade, I'm figuring out mark it with a star image when I click on the picture, maybe an overlay div on each image that it is activated when I do click.

Any idea how can I make a dynamic selectable list (ordered list) and add an hidden div with an image on each picture?

Answer 1

This type of feature seems like a job for jQuery. I would set the holder diva position to relative and add another div inside with position absolute within the div with a png background image or similar. You can hide this by default using jQuery.hide() and then show the image with jquery.show. For a fancier effect you can use .fadeIn()