Select multiple areas in a picture

I need to achive something like this:

As you can see, we have a base picture of a motherboard, and then 2 specifics areas of this pictures highlighted开发者_运维百科. On the left we have a component image, and the user has to choose one of the hilighted areas.

I checked jQuery JCrop, Mootools Moocrop... but neither one seems to be valid. What I want is to set a base big picture and select 2 or more areas there. I will store the coordenates on the database.

After that, I'll load the picture with the areas and ask the user to choose one area, like in the picture.

Does anyone have any clue how can I achive that?

Ignoring the actual mechanics of the highlighting of the areas, if you want to make those areas clickable or otherwise JS-actionable, you can use an old-school HTML image map.

I think this http://www.sanisoft.com/blog/2009/01/23/img-notes-v02-a-couple-of-bug-fixes-and-some-more/ may help you with some changes in the JS.