So ...
Upon activation, go to your admin menu and click the new Draw Attention link item
You'll be taken to Draw Attention image editor where you can create your first interactive image:
Give it a name, define your highlight styling options (color and border color) and drag-and-drop the targeted image into the upload panel:
Then hit the "Update" button to save the image.
After "publishing", you can to edit the image and highlight specific areas, add colors, links, draw hotspot areas, and more.
Below you'll see a "More Info Box Styling" panel with several options. Don't use it at this point. Scroll down to the "Hotspot Areas" panel and expand the clickable area to preview your image:
Now you need to define at least one clickable area in the image. Simply click and drag with your mouse to create a hotspot area. First it could be a bit tricky, but is very straightforward :)
Here is my new hotspot area (the head of the robot) according to my highlight styling settings defined earlier (yellow color and red border color):
After defining the clickable area, you need to define the associated action.
Scroll down a bit, add a title, select the "Show More Info" from the "Action" drop down list, and add a description in the input field below to explain the hotspot area on the image:
And now, if you selected the "Show More Info" option, you can go back the define some styling options in the "More Info Box Styling" panel.
I will select a yellow background with a black title color and red text color.
Now click the "Update" button to store your changes and visit your post (click the view post link).
Here is the result in my case with the mouse hovered over the robots head ...
... and the result after clicking the given hospot:
Now let's see the second option. If you select the "Go to URL" option from the action drop down list, you can send the user to another page, offer, article, etc.
Just enter the URL, activate the "Open in New Window" checkbox and you are done:
In this case the "Show More Info" box will disappear ...
... and once clicked, the hotspot area will send the reader to the given website or page.
Cool isn't it?
OK. Let's move forward to the last lesson for a few important closing thoughts ...
That looks like a lot of fun - thanks for sharing!
Sharlee (Chocolate IceCream)