# Image hotspot

**Image hotspot** creates interactive assessments where learners click on specific areas within an image. It’s ideal for testing visual recognition, spatial understanding, or identifying elements in diagrams, charts, maps, and other visuals.

## Style settings

<table><thead><tr><th width="188">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td></td></tr><tr><td>Rounding</td><td>Adjust corner radius of the main image container</td></tr><tr><td>Display border</td><td>Toggle border visibility around the main image (Yes/No)</td></tr><tr><td><strong>Answer area (preview)</strong></td><td></td></tr><tr><td>Background color</td><td>Define the background color for feedback areas that appear when spots are selected</td></tr><tr><td>Border color</td><td>Set the color for borders around feedback areas</td></tr><tr><td><strong>Spot (preview)</strong></td><td></td></tr><tr><td>Background image (all spots)</td><td>Upload or select a custom image to use as background for all clickable hotspots</td></tr><tr><td>Background color</td><td>Set the default background color for clickable hotspots</td></tr><tr><td>Hovered</td><td>Define the color that appears when users hover over hotspots</td></tr><tr><td>Height</td><td>Set the vertical size of hotspot indicators (in pixels)</td></tr><tr><td>Width</td><td>Set the horizontal size of hotspot indicators (in pixels)</td></tr><tr><td>Hover color</td><td>Define the color that appears when hovering over any hotspot</td></tr><tr><td><strong>"Correct" spot (preview)</strong></td><td></td></tr><tr><td>Background color</td><td>Set the background color for correctly selected hotspots (default: green success color)</td></tr><tr><td>"Correct" icon</td><td>Upload or select a custom icon to display when a correct hotspot is selected</td></tr><tr><td><strong>"Incorrect" spot (preview)</strong></td><td></td></tr><tr><td>Background color</td><td>Set the background color for incorrectly selected areas (default: red error color)</td></tr><tr><td>"Incorrect" icon</td><td>Upload or select a custom icon to display when an incorrect spot is selected</td></tr><tr><td><strong>Effects</strong></td><td><br></td></tr><tr><td>Image shadow</td><td><p>Add and configure shadow effects for the main image container:</p><p>- Click the "+" icon to add shadow effects</p></td></tr><tr><td>Spot pulsation</td><td>Toggle pulsation animation effect for hotspots (Yes/No)</td></tr></tbody></table>