• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Interactive human body image

 
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello all,

I'm working on a health application which would have a capability to register wounds on the body by clicking on an image. If the user clicks on point in the image it should be able to tell the corresponding body part. I think, in theory, the way to go is create a SVG image and create multiple regions and have javascript interact with it. But can you guys give me pointers like

1. How should i create this complex SVG image ? What would be the tool and how can i maintain this co-ordinate and the body part mapping ?
2. What is the best option ( or the best hacky approach ) out there to achieve this sort of functionality with Javascript ?


Thanks
Srikkanth
 
Marshal
Posts: 28177
95
Eclipse IDE Firefox Browser MySQL Database
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
But HTML already has the <map> tag which can be used to describe an image-map, and it doesn't require JavaScript for the user to interact with it. Did you consider that possibility already?
 
Srikkanth Mohanasundaram
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Paul,
Thanks for your reply.

I did read about the map , area tags which can be used to define a region on an image. There are a couple of questions though

1. The examples which i see basically include href attributes in the area, so when you click on an area it would behave like an hyperlink. I'm wondering if the area element supports click , ondrop events like other HTML elements.
2. Is there a tool which can generate the polygon co-ordinates for the area elements, hand-crafting this looks very tedious.

Thanks
Srikkanth
 
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Try Image Mapstar plugin

http://www.outsharked.com/imagemapster/default.aspx?demos.html#skeleton

Hope it's helps..!
 
Srikkanth Mohanasundaram
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Dinesh. I'm using image mapster for now. But this library is not actively maintained , the last release was way back in 2012. I'm not sure if there are newer libraries written which would probably have more features like adding an overlay text etc.,

I also used gimp to generate the image maps. It wasn't really tough...
 
He got surgery to replace his foot with a pig. He said it was because of this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic