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.
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
Use our example image file if you don’t have your own image.
2. Create or edit a post or page
3. Add a Custom HTML block (or similar element, depending on your theme)
4. Copy your image map’s HTML code and paste it Into the HTML block
5. Back in your Media Library, click the regional map image, then click Copy URL to clipboard
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.
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.
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
9. Click Popup Maker > Create New
10. Type your popup’s name (required), title (optional), and content (whatever you want)
11. Click Triggers > Add New Trigger
12. Select Click Open for the kind of trigger you want, then click Add
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
14. Back in your Click Open trigger, type a hash (“#”) in the Extra CSS Selectors field
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.
16. Click Add to save your Click Open trigger
17. Click Publish or Update to save your popup
Update or publish your changes to make the popup live on your website.
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.
If you need to troubleshoot, read Troubleshooting Your First Popup.
If you need “hands-on” help, contact our friendly and knowledgeable support team.