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 ?

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 ?

• javascript
• jquery
• image-processing
• imagemap

Share Improve this question Follow edited Feb 23, 2013 at 20:13 Momen Zalabany asked Feb 23, 2013 at 20:07 Momen ZalabanyMomen Zalabany 9,0271616 gold badges8080 silver badges144144 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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)

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.