How To Make A Responsive Image With Clickable Areas For Free

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.

UPDATE: I’ve published a new tutorial which explains how to create not only clickable and scalable images, but also areas with highlight effect! It can be done for free and quite easily (no coding required).

 
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:
responsive image with clickable areas

Reliable hostingGrowing website audienceWebsite securityWordPress 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="12,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 in 2014, 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 other readers 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.

  5. This solved my responsive problem, after trying several hours to do it.

    But a strange things happened. When I went to Plugins > Add New in WP and searched for Responsive Image Map, this plug-in did not show up. After seeing your video, a searched Author > Philip Newcomer. Nothing.
    Finally, I went to Tag and searched for his name (I believe that’s what I searched for) and there it was! Very, very unusual —and frustrating, as hours ago I searched for Responsive Image Map and it didn’t show up.

    But thanks to your video and my perseverance, my site’s image map is now responsive!

    NOTE: page title might change by the time anyone goes to the site!

    • Hi Keith,
      Glad that you’ve made your image map responsive.
      As regards your issues finding the plugin, I guess you should have searched for “Responsive Image Maps”, not “Responsive Image Map” (mind the plural “maps”). WordPress plugin directly search is sensitive and not ideal πŸ™‚

  6. Hi Micheal,

    I have been looking for a way to make my 2012 interactive map website responsive, and stumble on your site by accident. Using wordpress and following your tutorial, my site worked, so thank you very much. I think you are right about these plugins that are not supported, that may fail later on down the line.

    I have a question, I used a jQuery Maphilight plugin to add visual highlights to image map. Do you know a easy way, I can incorporate this?

    Also , how can I add tooltips or popups to show images and text?

    Many thanks in advanced.

    Regards

    Josh

    • Hi Josh,

      Thanks a lot for your feedback and your question.
      By the way, I have been expecting such a question for a while πŸ™‚

      I know that this tutorial would be much more useful if I had explained how to add visual effects on an image map such as highlighting, tooltips and even animation and other advanced cool stuff.

      The bad news is that jquery plugins like the one you’ve found conflict with jquery used by WordPress (at least it was in my tests). And unfortunately, I could not find a super easy and universal way to avoid such conflicts. Since my website is aimed at people who are not very technical, such tutorial would go too complicated for them. That’s why I am reluctant to create a tutorial about this topic.

      The good news is that regardless of that you can still do what you want. Here are some suggestions:
      1. Perhaps in your configuration (your theme, plugins) there will be no conflicts. So just use the jquery plugins documentation to add the required functionality. It needs some technical knowledge.
      2. Or create independent HTML pages (not connected with WordPress). And use the jquery plugin. It should work 100% since WordPress and its plugins will not be involved. It may be easier that #1 in case there were conflicts in #1.
      3. Or create a SVG image (which already contains clickable areas, highlighting and other stuff inside of the image) instead of your ordinary
      jpg, png etc image. This may require using a script language (not complicated but still this is additional work). Then you can use SVG image wherever inside of your WordPress site. This is the most fundamentally correct and reliable way. But too complicated in many cases.
      4. Or simply use the outdated plugin that I mentioned in my article. I guess this is the easiest way, but not very reliable.

      Perhaps I’ll do an additional more thorough research on this topic to find out the easy and reliable way to add highlighting and tooltips on image maps. But unfortunately not in the nearest future.

      Hope this helps.

    • Josh, just wanted to let you know that I’ve created the tutorial how to create highlighted effects on image areas. You can find it here: http://researchasahobby.com/highlighted-areas-links-responsive-image-free-svg-wp/

  7. I’m thinking about using this technique to replace thumbnails in sidebar and reduce server calls, but am I going to preserve internal links or Google is not going to count them?

    Cheerio!

    • Hi Adam,

      Thanks for the interesting question.

      Very smart move to reduce server calls!

      I believe Google does count image map links (a common sense is telling me this and also a Googler confirms it).

      At the same time, Google Search Appliance does not crawl area tag links (according to this).

      By the way, a possible caveat regarding image map instead of thumbnails that I can see is that on smaller screens (e.g. on mobile devices) several thumbnails could be more advantageous due to a responsive design, whereas an image map could look very small.

  8. I think you didn’t RESEARCH enough :D, it’s not used for videos it’s used for icons, I just used this “YouTube technique” to reduce server calls from 92 to 61 (for now). This technique is using position of icons in my case thumbnails on one big picture to define appearance through css. You are right, it’s not image mapping (just looking similar), but it’s more useful in my case.

    You can check it out: https://www.cloversisters.com/health-beauty-benefits-sweet-cherries/

    Cheerio!

    *Leave the link just if you think is useful.

    • Adam, I can’t read your mind to understand what you meant by “YouTube technique”. From your link I can see that you use “Recent Posts Widget With Thumbnails” plugin. If you meant this, then the links to the posts in your sidebar are presented in standard HTML format (view the page source). Google should crawl such links.

    • I see now. Looks like this piece of code does the trick with breaking ONE image into several thumbnails
      .thumb-xxx {
      display: block;
      background: rgba(0, 0, 0, 0) url("path/bigpicture.png") no-repeat scroll -80px 0px;
      height: 50px;
      width: 74px;
      }

      Thanks for your example!

  9. Hi Michael,

    Is there a tool that can tell me the coordinates of a particular image, or how can I find the coordinates where I want my image to be clickable?

  10. Hi Michael,

    How about those who don’t use wordpress so they can’t use the responsive plugin? My website runs on OpenCart and I am absolutely clueless how to make the image responsive?

    Thanks

    Henry

    • Hi Henry,

      Good question.

      I’m absolutely not an expert on OpenCart.
      But what I can suggest is the following options:
      1. Get a jQuery plugin that does what you want. Search for “jQuery plugin for responsive images” or something like that. if you have not dealt with it before, you will need to learn how to add jQuery plugins to your website.
      2. Create an SVG image. It’s the most reliable and professionally recommended option. Although it’s the most labor-intensive as it requires dealing with code/coding to a greater extent than other options.
      3. Or perhaps the best option in your case – go to a OpenCart community/expert and ask/search for a solution.

      Hope it helps.

  11. In your first example only the top two of four links works. The bottom two do not link to anything.

    • Hi David,

      Great catch! I appreciate it very much.

      I’ve just fixed it.

      Just in case anyone else stumbles upon the same issue:
      It stopped working after I added a lazy load plugin to my website. Obviously the plugin affects functionality of image maps somehow. As a workaround I’ve specified a specific class for my image map images (in my post’s HTML code). And I’ve specified this class as an exception in the lazy load plugin settings.

      Once again, thank you for pointing this out!

  12. Please next time put in your title that this is specific to WordPress. There are millions of us who don’t use WP believe it or not.

    • Hi David,

      Thanks for your feedback.

      I thought that mentioning “in WordPress” on the title image and also in the first sentence of the article was enough.
      But anyway, sorry for the confusion.

      By the way, there’s a jQuery RWD Image Maps plugin on GitHub that may help you regardless of the platform you are using. Actually, the WordPress plugin mentioned in this article is just a wrapper to the jQuery RWD plugin.

      • David Schneider says:

        Hi Michael, it’s so nice to have someone respond quickly to questions πŸ™‚

        The reason I made the comment about the title is that in the search engines it comes up for everyone, which then seems to be a grab for traffic. Anyway, no big deal on that.

        I’ve decided that a clickable map is just bells and whistles and am going to continue using dropdown lists or bulleted llists to help navigate. I will continue watching your site though, lots of good info.

        • Thank you for appreciation, David.

          As regards the title, I agree to some extent. I wish I could make the titles as long and descriptive as possible. But if a title is long enough, the search engines cut if off. So, I try to make the titles short, attractive but not overpromising at the same time.

          Anyway, I don’t intend to attract just any traffic. My target audience (mostly WordPress users) benefit from my materials. And I benefit from involved audience.

          If someone just mistakenly clicks on my article titles in Google, they leave my site very quickly. And it does not make my stats look good (bounce-off rate increases). And of course no income for me as well as I recommend products mostly for WP users and I’ve got no ordinary ads that an occasional visitor can click.

          So, I want to say that I don’t intend to attract visitors by click-bait titles. But I agree that sometimes the titles are not what some visitors may expect, unfortunately.

          As regards clickable map as whistles and bells, on the one hand it’s true. On the other hand, it may add more attractiveness and user friendliness which can be a competitive advantage. But of course it depends on whether it’s worth spending efforts on it.

          By the way, I’ve found out that creating clickable maps via jQery plugins is not an elegant (and not very reliable in many cases) way.

          As an alternative approach I want to play with SVG coding in the near future to write an article how to easily create interactive stuff which is more beautiful and more reliable than image maps. It may take some time for me as I’m working on a couple of other articles at the moment.

          Anyway, I’ll be glad to see you around!

  13. Hi michael,
    And thanks a lot for your explanations.
    I’d wanted to apply that to a full screen homepage (just an image with clickable areas), do you know how can i do that? (and sorry for my poor english…)

    • Hi Flo,

      Did you try to do it the way I described in this tutorial (adding HTML code for image maps)?
      I think it should work in your case too.

      • Yes but the image doesn’t scale to full screen with Responsive Image Maps.
        Do you know a way to put it in full screen responsively?

        • Responsive Image Maps plugin allows to scale your image maps (the cooridnates of your interactive areas) accordingly to your image size change. If your image does not scale, this is a different story. This is not about image maps. You need to look at your CSS. Perhaps you’ll need to pay attention to width and max-width CSS properties.

  14. Hi Michael,

    I’ve just tried this technique but it seems the Responsive Image Maps plugin doesn’t make my image hotspots scale. I note that it’s compatible up to WP 4.1.18 and hasn’t been updated in 3 years. Is it still compatible with current v4.8? Or is something else interfering like EWWW Image optimiser or a performance plugin?

    Is there a current alternative to Responsive Image Maps?

    Thanks,
    chris

    • Hi Chris,

      This still should work. I’ve got the most recent WP version. And I’ve got a working example right in this post here. I’m using exactly the same method described in this article.

      I don’t use EWWW image optimizer, so can’t say.

      So, you need to analyze what causes conflicts in your particular case. Perhaps, start from deactivating your plugins to see if it works. By the way, you can create a copy of your website for testing quite easily.

      I agree that the Responsive Image Maps plugin has not been updated for a long time. But it still does its work well.

      Anyway, as a strategic alternative, I can suggest using SVG images. I’ll soon finish a simple but useful tutorial on it. This way you can get not only responsive clickable areas, but also the areas which get highlighted when you move mouse over them. Feel free to subscribe to my website updates to get a notification when the new tutorial is ready.

  15. Hi Michael,
    is there any hope to make image maps touch-friendly?
    Thanks.

  16. Hi Michael,

    I just want to thank you!

    I have been trying to figure out how to create an image map on my website or some time. This morning I stumbled across your post and followed your instructions (minus your plugin, because I thought that I would only need to install that to render on mobile devices and tablets, which I could do later on. I just wanted to see if I could get the image map to work in general on my laptop.)

    I used the free image map generator tool that you referred to, but the link area kept appearing in a different position on the image. I couldn’t understand it. I played about with the coding but nothing worked.

    Then it occurred to me that my laptop has a large sized screen, and maybe the image had been stretched? So I installed your plugin and hey-presto it works perfectly!!

    Thank you so much for for help πŸ™‚

    P.S, your plugin says that it’s untested on my version of WordPress, yet it works!

    • Hi Zoe,

      Thanks for your comment.
      Yes, the plugin is not updated, but it does what it should very well.

      By the way, I’m on my way to publish a new tutorial on creating interactive SVG images soon. It’s a more beautiful and elegant way to deal with clickable areas which get highlighted when you move your mouse on them or click on them. Stay tuned if you are interested!

It's important for me to know what you think

*

Show Buttons
Hide Buttons