Back to Troubleshooting Guides

Troubleshooting

Hotspots Out of Place

This guide applies to:

  • Basic
  • Professional

Introduction

This guide will go over hotspots that are showing as incorrectly placed within the page on which the Draw Attention image is embedded. If the interactive image shows the hotspots correctly placed within the admin dashboard but shows the hotspots out of place on the front-end, then there are several things to check:

  • Is the Responsive Image Maps Plugin installed?
  • Is the image an SVG image?
  • Was the main image recently resized?
Hotspot shifting off to the side

Need a refresher on how the interactive images work? Take a look at our interactive image editor guide.

Responsive Image Maps Plugin

Please check your list of active plugins to see if you have the Responsive Image Maps plugin installed and activated. If so, we regretfully recommend deactivating this plugin. It has been abandoned and has not been updated in over 5 years.

Additionally, it is written in a way that conflicts with Draw Attention because it attempts to take over any image map on the page, which interferes with our plugin’s ability to resize and place hotspots correctly.

Using An SVG Image

If you’ve uploaded an SVG image on which to draw your hotspots, they may appear out of place. This also can particularly occur on iOS devices. We do not currently support drawing hotspots on SVG images, as the SVG image format is not supported by WordPress core.

We would recommend converting your image to .png, .jpg, .webp or .gif. Once complete, the hotspots should appear correctly placed and sized.

SVGs also cause Responsiveness issues with the Draw Attention plugin.

Resizing the Main Image

The hotspots will appear out of place if you’ve recently resized the main image used in the Draw Attention interactive image. This is because the hotspots retain their coordinates set for the original image you drew them on.

To resolve this, you’ll need to either:

  1. Revert to the original image.
  2. Resize your new image to use the original image’s dimensions.
  3. Redraw the hotspots so that they match your new image.

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides