How To Make A Responsive Image With Clickable Areas For Free

Share this!
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkedin

How to make a responsive image with clickable areas
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?

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.

Ready example

Here’s an example I’ve made for a demonstrating purpose:
resposnive imgage with clickable areas

Reliable hosting Growing website audience Website security WordPress backup plugins and services

There are four clickable areas on the image above. Each area has different URL which goes to a specific article. By the way, check them out – they are the corner stones of my website and very popular.

If you open this page 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.

Also, if you like, you can see my live example of the image with clickable areas which resize correctly. It’s a simple image scheme that assists in choosing hosting.

Is it difficult to make image with clickable areas that scale correctly?

No, not at all. What you basically need is:

  1. 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.
  2. 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:

Making a responsive image with clickable areas - image code

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.

That’s it!

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
  • 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)

  • ImageMapper  plugin
  • 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.

  • Draw Attention plugin
  • This looks like a cool and well-functioned plugin. But its free version allows to create only one interactive image (image map).

Conclusion

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.

Comments

  1. Hello Michael,

    Thanks for your great tutorial. I’ve got a question: how about if I want to display the target images in the same window that is the main image. Basically what I want is, if I click on Rect1, display image1; if I click on Rect2, display image2; and so on, but imagex should be displayed on the same window near the main image (where the rects are) and they are also saved in uploads folder.

    Thanks,
    Marco

    • Hello Marco,
      if I understood you correctly, you need to use JavaScript. Look here as a starting point.

    • By the way, I’ve just thought of the following solution. If you are not keen on coding, there’s an interesting solution – use two(multi)-step opt-in form. This is not a standard use of opt-in form, but you can adjust it to your needs to get what you want without coding.

      On the the first step (page) of the form you place your main image with Rect areas.
      On the second step (page) of the form you place your main image with Rect areas AND the image nearby that should appear on clicking Rect1.
      On another step (page) of the form you place your main image with Rect areas AND another image nearby that should appear on clicking Rect2.
      And so on.
      When you are on the step (page) 1, you click a Rect1 and corresponding step (page) opens up.

      You can place the form in any part of your content using short codes. Look at this example of the two-step form to get an initial understanding of how a two(multi)-step form may look like.

      With this approach you don’t even need to care of image scaling when re-sizing, because the form will care of it automatically.

  2. Dear Michael.,

    I should say, this tutorial realy worked for me. I’ve searched and tried many things, but this solution was simple and very effective.

    Many thanks indeed

    Farideh

  3. G’day Micheal,
    I’m always compelled to contact people like yourself who are “responsive” (sorry had to put it in!) to people – shows you care about them & yourself… indicates you care about what you do!
    I have a map of a country with seven states… AND sorry to say (for difficulty) each state is a different shape and size (naturally)… how do you think your programme will accommodate?
    Just a thought?
    I’m about to fully upgrade my site.
    appreciatively yours,
    Bruce

    • Hi Bruce,
      Thanks a lot for your kind words 🙂
      The technique I described in this article will be completely fine in your case.
      You will just need to use poly shape to outline your states.
      Good luck!

  4. trying to do the job with your tool at the moment Micheal… because I am a newbie to coding it seems that I have “got lost” with the wee details of the heading change after pasting the code in to the WP page… In all honesty it was the one point in the video that had me lost before I started – we will see.

    The point that I would like to share is this Programme is simple to use – from having a gander around before coming in touch with your Micheal – it seems yours in simply the best…
    sincerely
    Bruce

    • The coding part should not be hard, as it’s mainly a copy-paste thing. If you continue to struggle you can send me your code, the image and the description of your problem. Perhaps you just stumbled on a plain surface and I could help you easily.

It's important for me to know what you think

*

Show Buttons
Hide Buttons