# Image Hotspot

## What is an Image Hotspot  Element?

An **image hotspot** element 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.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FdjNg4ziOEXwuqCSrPrcs%2FImage_Hotspot.01.png?alt=media&#x26;token=b70dab66-76f1-4736-84d9-6584a0705f91" alt=""><figcaption></figcaption></figure>

## Edit General Image Hotspot  Element Settings

[Open](https://help.parta.io/editor/edit-elements) an image hotspot element settings window to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FDTzohCLD7cFRT4mkLzk9%2FImage_Hotspot.02.png?alt=media&#x26;token=a292a145-3010-4f94-950f-834545cb6c4d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FlirAjrrdBrp4VgITrzU0%2FImage_Hotspot.03.png?alt=media&#x26;token=ec5d5145-7c7e-4f23-8a00-00be0c6b140a" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Success criteria</td><td><p>Sets the logic for the hotspot element completion.<br></p><p>Select an option:
</p><ul><li><strong>One</strong>: Requires to select one of the areas to answer correctly;
</li><li><strong>All</strong>: Requires to select all of the areas to answer correctly.</li></ul></td></tr><tr><td>2</td><td>Display feedback icon</td><td><p>Shows / hides the feedback icons next to the image hotspot.</p><p></p><p>Select an option:</p><ul><li>Click <strong>Yes</strong> to enable the feedback icons;</li><li>Click <strong>No</strong> to hide the feedback icons.</li></ul></td></tr><tr><td>3</td><td>Display feedback</td><td><p>Shows / hides the <strong>Feedback type: general</strong> option.</p><p></p><p>Select an option:</p><ul><li>Click <strong>Yes</strong> to enable the feedback option;</li><li>Click <strong>No</strong> to hide the feedback field.</li></ul></td></tr><tr><td>4</td><td>Feedback type: general</td><td><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Enable the <strong>Display feedback</strong> option to start editing.</p></div><p>Allows to set general feedback.</p><p></p><p>Select an option from the drop-down menu:</p><ul><li><strong>Correct/Incorrect</strong>: Displays feedback depending on whether the entered answer was correct or incorrect;</li><li><strong>Any Response</strong>: Displays informational feedback regardless of whether the entered answer was correct or incorrect.</li></ul></td></tr><tr><td>5</td><td>Picture</td><td>Click <strong>+</strong> or <strong>Upload</strong> to open the <a href="../../set-media-and-content-elements/image">image uploading settings</a> window.</td></tr><tr><td>6</td><td>Accessibility</td><td>Click <strong>Add Alt text</strong> to open the accessibility settings window.</td></tr><tr><td>7</td><td>Scaling</td><td><p>Select an image scaling option from the drop-down menu:</p><ul><li><strong>Auto</strong>: Automatically selects the best fit for the display;</li><li><strong>Fill</strong>: Scales the image to cover the entire area while maintaining the aspect ratio (cropping if necessary);</li><li><strong>Fit</strong>: Scales the image to be as large as possible without cropping or distortion;</li><li><strong>Stretch</strong>: Resizes the image to fill the area by distorting its aspect ratio.</li></ul></td></tr><tr><td>8</td><td>Overlay</td><td>Click <strong>+</strong> to add the overlay color and its intensity by using a hex color code or selecting a shade from the palette or <strong>Branding</strong> color list.</td></tr><tr><td>9</td><td>Type</td><td><p>Select a selected spot type option from the drop-down menu:</p><ul><li><strong>Icon</strong>: Shows icon on the image after selecting a hotspot;</li><li><strong>No icon</strong>: Doesn’t show any icon on the image after selecting a hotspot.</li></ul></td></tr></tbody></table>

The changes will be saved automatically.

## Manage a Hotspot

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fmu4LzmYTU0P2tkHnj80Y%2FImage_Hotspot.04.png?alt=media&#x26;token=4b07b0b3-4dbd-4e1c-b482-58d7c40da3c9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add a hotspot</td><td><strong>a.</strong> Hover over the image;<br><strong>b.</strong> Hold and drag to select an image area.</td></tr><tr><td>2</td><td>Move a hotspot</td><td><strong>a.</strong> Hover over the image hotspot;<br><strong>b.</strong> Hold and drag it.</td></tr><tr><td>3</td><td>Resize a hotspot</td><td><strong>a.</strong> Click on the image hotspot;<br><strong>b.</strong> Hold and drag its corner.</td></tr><tr><td>4</td><td>Delete a hotspot</td><td><strong>a.</strong> Click on the image hotspot;<br><strong>b.</strong> Click the <strong>Delete</strong> icon.</td></tr></tbody></table>

The changes will be saved automatically.

## Brand an Image Hotspot Element

[Set corporate branding for an image hotspot element](https://help.parta.io/branding/create-branding/elements/image-hotspot).

{% hint style="success" %}
Use the [pro mode](https://help.parta.io/no-code-editor) of the editor to set an element branding different from the corporate branding template.
{% endhint %}