define parts of an image and assign to hover,click events

Question

lets say we have an image of human body, i want when user hover over part of body (head,arm,etc), this organ turn green and when he clicks a defined action happens.

is it doable using javascript ? if so what would be the concept ?

reason for question :

Objective: this is all a small part of an existing project in which user inputs his medical history, so i want insteed of giving him a dropdown with all organs just show a model of human and he click and save his history of tramua etc..

to do that i think i will need an image of human body and to define the boundaries in X-Y of each organ represented on this image and give it some properties(name).

1. User hover : boundaries of organ shows and color of bg is green for example
2. when user click it calls that object form.

is there something similar existing in js-jquery ? or i need to invent the wheel ?

Answer 1

1. You can use imagemaps. You define different areas inside image via co-ordinates.
2. You can use canvas (HTML5, supported in modern browsers)
3. You can use svg ( supported in modern browsers)
4. A worse way, but may be the easiest one, to put absolutely positioned divs over the body image. (will always give rectangular shape)

Answer 2

You can use HTML Maps and bind a mouse event to the different areas to change the color and perform a different callback on click.