define parts of an image and assign to hover,click events
image-processing, imagemap, javascript, jquery
Solution
- You can use imagemaps. You define different areas inside image via co-ordinates.
- You can use canvas (HTML5, supported in modern browsers)
- You can use svg ( supported in modern browsers)
- A worse way, but may be the easiest one, to put absolutely positioned divs over the body image. (will always give rectangular shape)
Problem
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). - User hover : boundaries of organ shows and color of bg is green for example - when user click it calls that object form. is there something similar existing in js-jquery ? or i need to invent the wheel ?