Image mapping in Salesforce using jQuery
I had an interesting requirement in one of my assignment couple of months back, thought I should share with the community.
The requirement came from construction industry client for managing the injuries of labors to track the health and safety. We used image-mapster jQuery library to demonstrate the human body so that support agent can create the injury details after clicking the body part and send the information directly to health and safety department.
The purpose of this solution is to track the common injuries and reasons to know which safety systems need more investment in order to make them better.
Technically, we have defined the HTML image maps for the body parts. I have used three images which are shown below and added them as static resource in Salesforce
This image is used to show the background which defines the structure of the body
This image is used to highlight the part of the body
This image is used to show the selected part when the mouse is hovered
All the images overlay each other and give the effect of single image. When the user hovers the body part it changes the color and display the name of the part, after clicking it shows the form with the auto populated values based on the selection, on submission of form it creates the injury detail record in Salesforce as shown below:
Code Snippet for Visualforce page:
