|Summary||This article describes the properties and functionality of the Image Hotspot ADC|
|Applies to||Design Version 5.4 onwards|
|Written for||Scriptwriters and survey authors|
- To download the qex file (in example directory), click here
- Version of the adc: 2.0.6
This ADC allows you to define clickable areas on any given image. Each clickable area can have a sentiment attached to it e.g. Like, Dislike and Neutral.
This control is compatible with question tables loops containing a single coded question. The layout has to be in response block format. This ADC allows you to define upto 20 hotspots and the single question can have up to 3 options.
|PROPERTY||DESCRIPTION||OPTIONS/ POSSIBLE VALUES|
|Image URL||URL of the image to be used||??ResPath??/Imagename|
|Image height||Height of the image in pixels||string|
|Image width||Width of the image in pixels||string|
|Hover Colour||Colour of the area(s) when hovered upon||any RGB colour|
|Positive Colour||Colour of the area(s) when selected positively||any RGB colour|
|Neutral Colour||Colour of the area(s) when selected neutrally||any RGB colour|
|Negative Colour||Colour of the area(s) when selected negatively||any RGB colour|
|Hotspot Area 1 to 30||SVG Paths for hotspots #1 to #30||Any SVG Path|
How to Make and retrieve the SVG Path
To create the "hotspots" You can use any graphics software that creates SVG.
We used a site called http://editor.method.ac/ which is a free online browser-based vector creator. below is a screengrab of how you can create an SVG and retrieve it's path using Method Draw