One of our customers sets up the database for health insurance company and likes to edit the list of injuries by clicking on an image of the human body; he asked us whether it is possible to populate the column using clickable image. We helped him and decided to share the results with you.
Here is a link to a sample database.
As a clickable image format we chose Scalable Vector Graphic images. Why?
- It is a vector image format supported by all modern browsers.
- It scales to any resolution.
- There are many SVG editors and convertors.
As an image we took the map of United States from Wikipedia. And here is what we got:
Clicking on checkboxes highlights the state on the map. Clicking on the map checks corresponding box.
To place the map we added “Text with html” section on the form. Below is the code for it:
While it seems wordy at first, it solves four tasks:
- Where to place an image? There is a <div> with “usmap” ID
- How to style an image and the selection? There are <styles> for that.
- Configure what is clickable and where to place the results.
Latter script section contains the call to
TD.clickableSVG(…) function that accepts configuration object with the following keys:
- control: the name of the text/hidden input or checkbox group with the value.
- svg: is either
- SVGElement or
- CSS selector to find SVG already on the page or
- URL to SVG image to load or
- text with SVG image code.
- appendTo: CSS selector to element to append SVG image into for URL and SVG-as-text cases.
- clickable: CSS selector to detect clickable elements, default is *[id] — any element with ID attribute.
- valueAttr: the name of the attribute that holds the value. Default is “id” — our best guess as id is the only attribute uniformly editable using SVG editors’ UI.
- selectedClass: CSS class to apply when element is selected. Default is “selected”.
- delayInit: whether to delay initialization until the page is fully loaded. Default is false. Initialization code relies on input control is present on the page at the moment the function runs. If it’s not the case, try setting this parameter to true.
Thanks for your help on this Kirill.
It’s made an arduous process clear and entertaining, as well.