Tutorial

Infographic

Step 1 Create a new image map

To create a new image map, click New on the top-left of the editor, enter a name and click Create.

You can choose to have a responsive or fixed size of the image map. To change that, click Settings. From the menu on the left, choose General. The Responsive setting is automatically enabled. If you want to set a specific size, you should disable it and enter the desired width and height in pixels.

Keep in mind the real size of the image which you will set as a background in next step. If you set a different width/height ratio you can stretch the image and it will look bad. After setting an image in Step 2, you can always come back and click the Reset Size button.

Step 2 Set a background image

To set the background image click Settings, go to the Image section and click Choose Image to launch the WP Media Library.

If you are using the Standalone version, you have to paste the URL of the image.

Step 3 Draw shapes

Choose the Ellipse tool from the toolbar on the left and draw a circle as shown on the image.

When you are done drawing shapes, choose the Select tool to avoid accidentally creating new shapes.

You can then duplicate this shape 5 more times by clicking the Duplicate button on the bottom-right. Place each duplicated shape over the rest of the circles on the infographic.

Additionally, you can rename each shape by clicking Rename.

Step 4 Shape styles

You can customize the styles of a shape both for its default state and mouseover state.

When you select a shape you can see its settings on the right side of the Editor. Look for the Default Style and Mouseover Style tabs.

In the Default Style tab, set the Background Opacity to 0. In the Mouseover Style tab, click Copy from Default Style.

You can also make the shapes glow!

Click Settings, open the Shapes tab and enable Glowing Shapes. Set the Glow Color to #01A9A9 and Glow Opacity to 0.4.

Step 5 Tooltip styles

You can customize the tooltips by changing background color, opacity, border radius, you can set fixed width or even place the tooltip exactly where you want it.

Select a shape, click the Tooltip Style button and change the Background Color to #01A9A9 and the Border Radius to 10.

If the Tooltip Style button is not easily accessible, you can click Edit Style from the Tooltip tab on the right.

Step 6 Tooltip content

To edit the content of the tooltip, click the Tooltip Content button above it.

From the new window that opened drag a Heading and a Paragraph element directly to the tooltip.

You can edit the settings of each element by selecting it and opening the Settings tab. Feel free to explore the different options for layout and style.

Step 7 Interactivity

The functionality that we want to add is to change the image when you mouseover one of the circles. This is where the JavaScript API comes in! Please keep in mind, this is a tutorial on Image Map Pro™, not on JavaScript. If you don’t understand any of the code below that is okay, you can still do lots of things with the Editor!

Here is the code:

(function($, window, document, undefined) {
    $(document).ready(function() {

        // Called when the user triggers a mouseover event
        $.imageMapProEventHighlightedShape = function(imageMapName, shapeName) {

            // First, check which shape triggered the event
            if (shapeName == 'Circle 1') {

                // Change the background image of the image map
                $('.imp-main-image').attr('src', 'path/to/image_for_circle_1.png');

            }

            // Repeat for each shape
            // …
        }

        // Called when the user removes the mouse from a shape
        $.imageMapProEventUnhighlightedShape = function(imageMapName, shapeName) {

            // Go back to the default image
            $('.imp-main-image').attr('src', 'path/to/default_image.png');

        }
    });
})(jQuery, window, document);

We are using two callbacks:

$.imageMapProEventHighlightedShape - Called when the user triggers moves the mouse (or taps) over one of the circles.

$.imageMapProEventUnhighlightedShape - Called when the user removes the mouse from a shape, or taps somewhere else.

Check out the full documentation of the JavaScript and the HTML APIs.

Step 8 Include the code

To make the code work, we need to add it to your image map (duh). This process is different in the WordPress version and the Standalone version of the plugin.

WordPress - Open the Settings, go to the Custom Code tab and paste the code there.

Standalone - Paste the code in a <script> tag or in a separate .js file.

Step 9 Publish your image map

The final step left is to publish the image map on your site. Again, this process is different on WordPress and in the Standalone versions of the plugin.

For detailed instructions, please check out the Publishing Your Image Map section of the documentation.