Recreating clickable image map

Hello @margmacd,

Draw Attention unfortunately doesn’t import HTML source code. If you’d like to make an interactive and responsive image with this plugin, you’ll need to draw in the coordinates using our interface.

Here’s a video walkthrough of how to create an interactive image – https://wpdrawattention.com/document/create-your-first-draw-attention-image/

And here’s a demo of the free plugin in action – https://wpdrawattention.com/demos/the-arrondissements-of-paris/

Let me know if you have any other questions ??
Natalie G

Many thanks for this kind and helpful reply, Natalie. From the video you have recommended, this plugin appears to be a very impressive output. I will have a go, noting that the instructions in the video give the impression that the plugin is very easy to use.

I have activated the plugin, Natalie, and noted that whereas the video invites the user to choose ‘Add new’ from a 5-item drop-down menu, my corresponding drop-down menu consists of the three items ‘Edit Image’, ‘Import/Export’ (which does not provide clear functionality to simply upload an image from the Media Library) and ‘Upgrade to Pro’ (which should not be an option for me, as I am an academic delivering services to my students and am not supported to pay for WordPress upgrades). Perhaps you could suggest what is needed to follow the instructions on the video more effectively, including uploading the image as a first step.

Thanks in advance!

@margmacd

I’m sorry for any confusion! Our free edition has limited functionality – only supports a single interactive image and the ‘Left layout’ for showing hotspot content.

The ‘Edit Image’ item is our interface for creating an interactive image. Within this item, you should be able to upload an image or use one from your Media Library. That setting should be on the right-side panel.

‘Import/Export’ is if you need to move your interactive image to another site.

Thanks,
Natalie G

Hi Natalie

Thanks for your comments. I have had a practise and encountered a few issues in addition to learning a few lessons at the same time!

1) I didn’t realise that any edits would overwrite the content in my original image within my media library and in turn mangle the html code pointing to this image within my WordPress site. I have now deleted the content where the code has become mangled.

2) My original image involves multiples regions where a hotspot needs to be inserted. However, once I have saved a change I cannot find a way of getting the image to reappear so that I can return to it and create a new hotspot.

Perhaps you could respond to 2) as I cannot realistically edit the image in one sitting.

Many thanks!

Hi @margmacd,

1) We don’t make any changes to the WordPress library, your original image, or anywhere else on your website besides in the Draw Attention area. Are you sure the code edits are related to Draw Attention?

2) Any Draw Attention image should re-appear automatically as soon as you save any changes to it. Can you please share a few more details about what happens when you save a change to your image?

Thank you for these comments. I am going to do a little trouble-shooting to assess alternative ways of addressing the problem with the old images and I will aim to get back to you if I feel that using the basic level version of Draw Attention is the best option.