# Image Hotspot

## What is an Image Hotspot  Element?

An **image hotspot** is an interactive Quiz element that places clickable markers on an image.

<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>

{% stepper %}
{% step %}

### Success criteria

Select an option:

* **One**: Requires to select one of the areas to answer correctly;
* **All**: Requires to select all of the areas to answer correctly.
  {% endstep %}

{% step %}

### Display feedback icon

Click **No** to hide the feedback icon.
{% endstep %}

{% step %}

### Display feedback

Click **No** to hide the feedback field.
{% endstep %}

{% step %}

### Feedback type: general

Select a general feedback option from the drop-down menu:

* **Correct/Incorrect**: Displays feedback depending on whether the answer was correct or incorrect;
* **Any Response**: Displays informational feedback regardless of whether the answer was correct or incorrect.
  {% endstep %}

{% step %}

### Picture

Click **+** or **Upload** to open the [image uploading settings](https://help.parta.io/editor/edit-elements/set-media-and-content-elements/image) window.
{% endstep %}

{% step %}

### Accessibility

Click **Add Alt text** to open the accessibility settings window.
{% endstep %}

{% step %}

### Scaling

Select an image scaling option from the drop-down menu:

* **Auto**: Automatically selects the best fit for the display;
* **Fill**: Scales the image to cover the entire area while maintaining the aspect ratio (cropping if necessary);
* **Fit**: Scales the image to be as large as possible without cropping or distortion;
* **Stretch**: Resizes the image to fill the area by distorting its aspect ratio.
  {% endstep %}

{% step %}

### Overlay

Click **+** to add the overlay color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Type

Select a selected spot type option from the drop-down menu:

* **Icon**: Shows icon on the image after selecting a hotspot;
* **No icon**: Doesn’t show any icon on the image after selecting a hotspot.
  {% endstep %}
  {% endstepper %}

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>

{% stepper %}
{% step %}

### Add a Hotspot

Hover over the image, then hold and drag to select an image area.
{% endstep %}

{% step %}

### Move a Hotspot

Hover over the image hotspot, then hold and drag it.
{% endstep %}

{% step %}

### Resize a Hotspot

Click on the image hotspot, then hold and drag its corner.
{% endstep %}

{% step %}

### Delete a Hotspot

Click on the image hotspot, then click the **Delete** icon.
{% endstep %}
{% endstepper %}

## 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 %}