This is a tutorial (including video) how to make a responsive image with clickable areas (i.e. responsive interactive images) for free in WordPress. This will allow you to get an image with multiple areas on it which can be clicked with their own URLs. And when this image is automatically scaled (e.g. when displaying on different mobile devices) the clickable areas scale appropriately.
Every beginner WordPress user knows that image can be clicked and a specific URL can open. But not many bloggers know that making an interactive image that contains several clickable areas can be done pretty easily and for free. So, this simple tutorial explains how you can get it done.
By the way, I could not find a reliable free plugin that could do this job. That’s why in the first place I’ve written this tutorial.
- Why you may need image with multiple clickable areas?
- Ready example
- Is it difficult to make image with clickable areas that scale correctly?
- Tutorial how to create a responsive image with clickable areas that scale correctly
- Free plugins for creating image maps
Why you may need image with multiple clickable areas?
Images that contains one or multiple areas that can be clicked are more interactive, more engaging, more interesting, more creative and provide better conversions compared to simple clickable images.
This allows you to get an image and let your users click on different parts of your image. This can be well used for floor plans, assembly parts, body parts, food recipes etc. Another example how you can use it is bringing a new life into your old static infographic to make it interactive with clickable areas.
Here’s an example I’ve made for a demonstrating purpose:
There are four clickable areas on the image above. Each area has different URL which goes to a specific article.
If you open this article on a mobile device (or simply resize your browser window on your desktop) you will see that the image above got scaled. And the clickable areas also stayed where they had to. So the image does not loose its clickable functionality after scaling.
Is it difficult to make image with clickable areas that scale correctly?
No, not at all. What you basically need is:
- Create an image map out of your image. It requires you to use HTML editing of your post where you use your mage, but the HTML code for the image is pretty simple.
- Use a free plugin (Responsive Image Maps) that handles image maps scaling. The plugin is dead-simple and does not require any settings.
So, the bottom line is that the most difficult part of creating a scalable image with clickable areas is creating clickable areas on your image. But you can handle it easily as long as you can deal with HTML view of your links.
In other words, if you are not afraid of seeing something like the code piece below, then you can do it.
<area shape="rect" coords="10,105,157,225" href="http://YourURL.com">
(This is a code for a clickable rectangle area)
I will explain further in details what exactly you need to do to get multiple clickable areas on one image.
Tutorial how to create a responsive image with clickable areas that scale correctly
In short, the whole thing is pretty simple:
- you need to turn your image into image map (image with clickable areas);
- you need to handle correct scaling of image with clickable areas (you need a plugin for that).
Here’s a video tutorial where I demonstrate all the steps described in this post.
And here are the description of the steps below I’ve done.
1. Handle correct scaling of image with clickable areas
Install Responsive Image Maps plugin. It’s a free plugin for WordPress that handles image maps scaling. The plugin does not require any settings. Simply install it and that’s it.
Without this plugin your clickable areas on your WordPress site will not work correctly when your image is scaled (e.g. after a browser window is resized).
2. Simply insert image into your post or page
You can start creating an image map from inserting your image to your WordPress post or page the usual way.
Here’s a HTML view of the inserted image:
3. Generate image map code for your image
There are many ways how you can generate or create HTML code for your image to get an image map.
Basically, the core of the code contains coordinates of your clickable areas of your image.
Image map code with one rectangle clickable area may look like this:
<img src="http://your-site.com/wp-content/uploads/2016/06/img.png" usemap="#image-map"> <map name="image-map"> <area href="http://TargetURL.com" coords="9,12,279,78" shape="rect"> </map>
This code will display image img.png with clickable area of a rectangle form. The form will have specified coordinates (in pixels).
Let’s see line by line at the code:
Line 1 contains your image location (you get it when you insert image) and the identifier for your image map (image-map – you can make it up, make sure it’s unique within your post or page).
Line 2 is just an empty line (does not play any role).
Line 3 contains opening tag for your image map. It contains your image map identifier (image-map)
Line 4 contains properties for clickable area. In particular, there are: URL that opens when user clicks this area; coordinates and shape of the clickable area. In our example the clickable area is rectangle (rect). The coordinates are in pixels in the following order (Left upper horizontal, Left upper vertical, Right lower horizontal, Right lower vertical). The beginning of coordinates (zeros) are the very left upper corner of your image.
Line 5 contains just a closing tag for your image map.
As you can see the code for image map is pretty simple. You can get coordinates in any image editor and write the code manually. But in this tutorial I will use a free simple online service that simplifies this process and generates the code for your image.
By the way, if you want to play with image map coding, you can do it here. Clickable areas can be rectangle, circle or polygonal.
After I got the code for my image map generated, I just specified the image map identifier (usemap property, my-image-map in my case) for the image I inserted on step 2.
And the final code for my image map with four rectangle clickable areas looks like this:
<img src="http://researchasahobby.com/wp-content/uploads/2016/06/my-scalable-img2.png" alt="resposnive imgage with clickable areas" width="600" height="420" class="aligncenter size-full wp-image-3344" usemap="#my-image-map"/> <map name="my-image-map"> <area target="_blank" alt="Reliable hosting" title="Reliable hosting" href="http://researchasahobby.com/best-website-hosting-companies-fooling/reliable-web-hosting-recommend/" coords="7,12,279,81" shape="rect"> <area target="_blank" alt="Growing website audience" title="Growing website audience" href="http://researchasahobby.com/best-optin-plugin-thriveleads/" coords="338,12,588,82" shape="rect"> <area target="_blank" alt="Website security" title="Website security" href="http://researchasahobby.com/best-security-plugin-for-wordpress-combination/" coords="7,336,279,403" shape="rect"> <area target="_blank" alt="WordPress backup plugins and services" title="WordPress backup plugins and services" href="http://researchasahobby.com/wordpress-backup-codeguard-backupbuddy-blogvault-vaultpress/" coords="338,336,588,405" shape="rect"> </map>
Title and Alt properties are not necessary. Alt tags are good for SEO and Title tags allow users to see hints (tooltips) when moving mouse over the clickable areas. I want the links to open in new browser windows or tabs, so target=”_blank” is added for this purpose.
4. Insert your code into your post or page and check out how it works
Add your code to your post or page, save changes (or make a preview of the changes).
Your image should display with clickable areas. Move your mouse over the clickable areas to see if they work the way you expect.
Also, resize your browser window to get your image scaled and check you if the clickable areas continue working fine.
It required a little bit of coding, but if you are not afraid of working with html view of your posts or pages, then it’s a just piece of cake for you.
Free plugins for creating image maps
What if you don’t want to mess up with the code at all? Are there any free plugins that make your life easier to create image maps?
Yes, there are some plugins. But as far as I could find (or better to say, could NOT find), none of them are free or work flawlessly.
- Image Mapper by WP Tooling
- ImageMapper plugin
- Draw Attention plugin
It’s some beta version, last updated 2 years ago, did not work for me at all (could not load any images to start testing it)
This seems like an awesome free plugin that allows creating not only clickable areas, and has additional features like areas highlighting and popup layouts. It was originally designed in 2013 for creating comics for some project. But unfortunately since that time the development of the plugin was very limited. And it simply does not work for some people or stopped working.. Also some users report that they have issues with using multiple image maps.
Although it’s reported to work on responsive websites, after playing with the plugin for a while I could not make the image maps responsive on my test site, i.e. image maps created with this plugin did not scale when size of browser window changed. And therefore on mobile devices it did not look great on my tests.
However, this plugin may work in your case. And this is a more beautifully-looking solution that the method I’ve described in this tutorial.
However, since the plugin is not actively developed, it may stop working one day.
And the solution I’ve described in this tutorial is a super reliable one.
This looks like a cool and well-functioned plugin. But its free version allows to create only one interactive image (image map).
When I needed a quick solution to creating an image map (it’s an interactive image, image with clickable areas) which would be responsive, I could not find a free plugin for that. That’s why I created this tutorial to share my approach, which requires you to be able to deal with html code a bit.
However, there are some free plugins that can create interactive images without any coding. Although these plugins have limitations, there are chances that they may work in your case. But I would not call it very reliable solution. Anyway, I’ve described these plugins in the section right before the conclusion.
There is also a number of paid plugins that you can use to create responsive images with clickable areas. But if you need a free, simple and reliable solution, then this tutorial is what you need.
P.S.: if you know about the plugin that can create responsive image maps for free, feel free to let me and otherreaders know in the comments below. And I’ll include this information into my article to share the knowledge.