What’s in This Tutorial

This tutorial walks you through the steps for creating image map popups with Popup Maker.

Image Map Popups in Action

We recently helped some customers make popups that display when you click different parts of an image (i.e., image map).

For example, we’ve got a regional map of California. When we click each region (such as Bay Area), a popup for that region appears.

Image Map Popups Demo

In the demo above, we clicked on the following regions and saw a popup for each.

  • North Coast
  • Bay Area
  • Central Coast

Note: To follow along, make sure you already have an image and the HTML for your image map. If you don’t have those, you can borrow our image (California regional map courtesy of Wikimedia Commons CC BY-SA) and the “starter” HTML code below!

Starter Image

Use the link below to download the starter image.

https://wppopupmaker.com/wp-content/uploads/ca-regions-674w-marked-3.png

Starter Image Map HTML Code

Copy and paste the HTML code below into your HTML code block or element.

<img src="YOURIMAGEURLGOESHERE" usemap="#image-map">

<map name="image-map">
    <area id="north-coast-popup" alt="North Coast" title="North Coast" href="#" coords="42,6,25,144,102,300,154,304,157,272,83,74,80,5" shape="poly">
    <area id="bay-area-popup" alt="Bay Area" title="Bay Area" href="#" coords="103,304,101,323,145,396,192,408,211,404,192,337,149,307" shape="poly">
    <area id="central-coast-popup" alt="Central Coast" title="Central Coast" href="#" coords="152,404,249,598,352,640,359,576,250,438,213,407" shape="poly">
    <area alt="Southern California" title="Southern California" href="#" coords="358,644,476,757,541,750,505,612,434,575,364,574" shape="poly">
</map>

Our Assignment

We’re going to make a popup that displays when you click Southern California on the map.

Let’s get going!

Steps To Create a Popup Maker Popup for the Southern California Region

1. Upload your image map image file

Add New Media File

Use our example image file if you don’t have your own image.

2. Create or edit a post or page

Edit A Post

3. Add a Custom HTML block (or similar element, depending on your theme)

Add A Custom Html Block

4. Copy your image map’s HTML code and paste it Into the HTML block

Paste Image Map Html Code Into A Custom Html Block

5. Back in your Media Library, click the regional map image, then click Copy URL to clipboard

Media Copy Url To Clipboard Button

6. Paste the image URL into img tag’s src attribute in between quotes

If you used our example starter code, you’ll replace YOURIMAGEURLGOESHERE with your image’s URL.

Image Map Src Url

7. Add an area id attribute for the Southern California region image map coordinates

Below, we added id="southern-california-popup" to the area tag for the Southern California coordinates. Later, we’ll use that ID value as an extra CSS selector to trigger our Southern California popup.

Add An Area Id Attribute For The Southern California Region Image Map Coordinates

You can copy the following code and paste it after <area for the Southern California coordinates.

id="southern-california-popup"

Note: Leave a space between area and id.

8. Click Publish or Save to save your image map post or page

Click Save To Update Your Post

9. Click Popup Maker > Create New

Click Popup Maker &Gt; Create New

10. Type your popup’s name (required), title (optional), and content (whatever you want)

Type Your Popup'S Name, Title, And Content

11. Click Triggers > Add New Trigger

Click Triggers &Gt; Add New Trigger

12. Select Click Open for the kind of trigger you want, then click Add

Click Open Trigger

Note: We didn’t add a cookie because we want our regional popups to display on every click.

13. Copy the southern-california-popup text

Copy The Text &Quot;Southern-California-Popup&Quot;

14. Back in your Click Open trigger, type a hash (“#”) in the Extra CSS Selectors field

Type # In Extra Css Selectors

15. Paste the southern-california-popup text after the hash (no space)

You must have exactly #southern-california-popup in the Extra CSS Selectors field.

Paste Southern-California-Popup After The Hash

16. Click Add to save your Click Open trigger

Trigger Click Add Closeup

17. Click Publish or Update to save your popup

Update or publish your changes to make the popup live on your website.

Update Popup

Whew! You did it 🙌🏼

Test Your Image Map Popups

Go to the post or page that has the image map. Click Southern California on the map. You should see something like this.

Demo Of The Southern California Image Map Popup

If you need to troubleshoot, read Troubleshooting Your First Popup.

If you need “hands-on” help, contact our friendly and knowledgeable support team.