How To Make A Responsive Image With Clickable Areas For Free

Share the knowledge...Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
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.

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 (by creating an SVG image, no coding required). Image Maps technology (used in this tutorial below) is simple, but it’s outdated, restricted in features and not convenient in use. I suggest using SVG instead of Image Maps.

 
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 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. (Update: I replaced the image map on that page with a SVG image created with the help of the new tutorial).

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

If you are using WordPress Block editor, then temporarily add a image block and copy its 〈img〉’s HTML content. You will need it further. I highlighted the part that you need as an example:

image code for using in image map - WP Blocks

You don’t need anymore the image block which you added. You can remove it.

 

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 in my example:

<img src="https://researchasahobby.com/wp-content/uploads/2016/06/my-scalable-img2.png" alt="responsive image 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="https://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="https://researchasahobby.com/best-optin-plugin-thriveleads/" coords="338,12,588,82" shape="rect">
    <area target="_blank" alt="Website security" title="Website security" href="https://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="https://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).

If you are using WordPress Block editor, then to add the responsive image with clickable areas you need to use Custom HTML Block. Add this block and add the code you created.

In my example it looks like this:

inserted image map code - WP Blocks

 

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 WordPress 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 WP 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.

P.P.S.: if you are not using WordPress, here are some jQuery plugins that can make your image maps responsive or/and really advanced: ImageMapster, jQuery RWD Image Maps.

Share the knowledge...Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Comments

  1. Hi! I found your solution elegant and simple! I used it. But then I stuck with the following problem: I wanted to have an image to be opened when clicking on the areas/maps. This was first simple, with a link to the image. However, when trying to open the image into a lightbox, i was not able to find a solution, because:
    the rel=”lightbox” instruction, put inside the html tag does not work. The explanation can be found here: https://stackoverflow.com/questions/5400703/rel-tag-inside-a-map
    So one has to use some javascript, which could be easy for experienced programmers, but complicated for me… πŸ™‚
    Another interesting thing I found:
    an image map generator, online, very pleasant to use: https://www.image-map.net
    this can be combined with the solution of yours here above.

  2. Its possible made this image fullscreen responsive and with the buttons?

    Can u help me?

  3. Thanks michael. ur solution helped me

  4. When you switch tabs in the block from HTML to Preview my links work, but when you switch to the full preview they do not work. They don’t show up at all. Any suggestions?

  5. This is ,mind blowing, thanks for sharing.

  6. Hi
    Can you upate this blog with css anaimation for area tag
    It will be more useful for me

  7. Hi! Sorry, didn’t see this comment earlier when I checked. Sorry for not posting this in the SVG tutorial! I understand the importance of others being able to see this. I posted another comment saying that the image maps issue had been resolved but not SVG, now that I’ve got your response I’ll just say thank you very much and that we don’t really need to pursue any issues further.
    Thanks!

  8. Spandan Bandyopadhyay says

    Dear Michael,
    As of a few minutes ago, I have resolved the issue with the image maps that I reported to you in a previous comment. Please don’t waste your time giving me advice on it! Turns out all I had to do was set the width and height of my image, and now the clickable areas are aligned correctly. If this seems like a basic thing to have missed, I must confess that this is literally my first ever time doing anything with web design, or anything to do with computers in general really. Thank you so much for making my dream come true by helping me with this image map thing. (Unfortuately, my issue with the SVG never really got solved, so I would still be really grateful if you could guide me on that, although that problem just became far more low priority now that I’ve got the image map working. The difference between one and the other is just that the other looks a bit flashier.
    Thanks so much,
    Spandan

  9. Hi there,
    Sorry if this comment has already posted. This tutorial was extremely helpful and I manage to get it almost exactly right. I just hit a slight snag, though – the 23 clickable areas in my image appear to have shifted a little out of place, so the clickable link area will be under and to the right of where I want it to be. This seems like a simple problem, I just know so little about web design that it’s stumped me. I thought downloading and activating the plugin you mention would help me but it doesn’t seem to, although I am actually unsure if scaling works or not for me. I tried following your other tutorial about SVG and managed to create a highlighted clickable area in a file that worked in the browser and yet did not, as with many others, work in WordPress. I tried changing theme and deactivating all other plugins than the SVG one, and it still didn’t work – it just looks like a normal static image in WordPress. Since the issue I ran into in both cases seems to be that the Plugin isn’t behaving as it’s supposed to, I think my problem might have to do with that. I must confess I barely know what a Plugin is – I just downloaded and activated them (changing the settings as instructed for the SVG one) and yet it’s like I never downloaded them at all. I would really appreciate any advice you could give me on this.
    Spandan

    • Spandan, I’ve left this comment of yours, and removed the first one.

      Your clickable areas can be displaced because of two reasons as far as I can think of:
      1. You specified the coordinates of your clickable areas incorrectly.
      2. You did not install or activate Responsive Image Maps plugin. This plugins handles scaling.

      As regards issues with SVG, you better post your comment in the article in question. But anyway.
      If you created SVG which works perfectly in a single browser page then your SVG is fine.
      If at the same time your SVG does not work in your WordPress site, then there’s some conflict between SVG functionality and the software of your site (other plugins or theme).

      There’s no precise solution to your issue, unfortunately. In case you use some page building plugins like Elementor or Divi, you need to use HTML/Code element to add your SVG and probably also disabling some feature in your theme (e.g. disable Image Light Box in Elementor’ settings).

  10. Helped too much to achieve this in one of my project. Thanks for the work

  11. http://desaw.com/responsive-image-map.htm

    I created this (my own mind thought) – seems to work everywhere.
    Just JS and HTML

    Works for rectangular shaped links at the moment.

  12. You wrote:

    > Every beginner WordPress user knows that image can be clicked and a specific URL can open.

    No they don’t!! For this beginner WordPress user, the images I included in my first article were (annoyingly!) replaced by lower resolution versions. I was expecting WordPress at least to make them clickable, so the user could click on one and see a full-screen full-resolution version, as I have seen on many sites. But they are not, and information on how to configure this (if it is even possible with the theme I have chosen) is remarkably elusive!

  13. Hi Michael,

    I worked out what I was doing wrong with my responsive image not working in Elementor. Of course it was an oversight of simply missing a little bit of code. My issue now seems to be centering the image correctly in Elementor. I think I may have actually resolved the issue, although I would like to know if I’m using the correct method as I don’t want to have to revisit this as manually having to input the coordinates for 30 clickable links is time consuming.

    Getting the code by inserting an image via WordPress’ editor gives me image dimentions of 1024x700px as default at 100% However, when adding the code and adding it to Custom HTML the image is misaligned and is to the left. The way I have resolved this issue is by increasing the image’s size to 1200×820 and using the full size option.

    I’m currently using this code:

    Is this this correct way to resolve the misalignment? or should I be using the 100% option and adding code to center the image?

    Many thanks,

    Ian

    • Hi Ian,

      Yeah, working with image maps coordinates can be tedious.

      I don’t see the code (it’s automatically stripped out when you post the comment). But anyways, if you use Responsive Image Plugin, then you should not have issues with misalignment on the page or scaling the image (provided you don’t mess up with the name of the image and width/height parameters in the final code). At least it’s supposed to work so and it used to work.
      As a universal solution, I suggest using SVG instead of image maps (this tutorial). Image maps is outdated technology and is limited and inconvenient in use.

  14. Hi Michael,

    Many thanks for the video. I have never coded before at all, and managed to achieve the result I wanted from your instructions first time!

    However, I do have a problem you might be able to help with. I can add the code as you show in your video to a WordPress page. However, I can’t seem to add it to a page when I’ve used DiveBuilder. Do you know how I can do this. Divi doesn’t seem to let me past in code.

    Any help would be greatly appreciated.
    Mike

  15. Can you link to a <div class location on the same page? I tried the code below and it doesn't jump to that division. It only jumps to the top of the page.

    HelloRed

    HelloBlue

    HelloYellow

  16. Hi Michael, great knowledge share. I am trying to create a responsive image map, that is not for a WordPress site and cannot have javascript, been searching searching cannot find anything. Do you have any ideas? Regards Lee

  17. Hi Michael,
    thanks a lot for this tutorial. It works well, but I’m having a couple of issues

    1. When I click on the links another window is opened. How could I let the link open on the same window?
    2. How do I remove the page titles? If I edit HTML to remove them, the links don’t work anymore.
    It’s the first time in my life I’m using WordPress and editing HTML, but I want a front page with a clickable image.

    Thank you

    Aless

    • Hi Aless,

      Here are the answers:

      > How could I let the link open on the same window?

      Simply remove target tag (i.e. target=”_blank”) from the image map area codes.

      > How do I remove the page titles?

      Uhm, I did not understand what titles you mean and what you wanted to achieve. Can you elaborate it, if you still have the issue?

      • Hi.
        I thought I would receive an email when you replied to my message, but I didn’t.
        I would love to send you a screenshot of the code and of the webpage to make it clearer, but I can’t.
        If you go to my webpage http://www.re-des.org you’ll see what I mean.

        1. The various pages’ titles (for example ‘Home’ and the date in the home page) appear on all the pages and I don’t know how to remove them.

        I’m having a lot of other issues:
        2. I’m not able to center the image in the home page and the links to the various areas are misplaced
        3. I tried to do what you suggested (remove target=”_blank”) but nothing happens and I still get the same result: it opens another window.
        4. I changed the custom CSS in ‘Simple Custom CSS’ to make the ‘menu’ banner shorter, when I see the preview it shows correctly, but when I actually Update the Custom CSS the menu banner goes back to normal.
        5. I was using Elementor, it didn’t work with the image I created in image map and I removed it. Now the whole WordPress interface looks cranky (I think it is the ‘classic’ interface, with very little options) and I don’t know how to go back to the normal interface

        Thanks a lot for helping me!!

        • Alessandro,

          You should have received the emails when you get replies to your comments. I will look at this. Thanks for reporting this issue.

          As regards the issues your are describing, they look like you are struggling with website building, they are not connected with this tutorial or with the image maps.
          Sorry, I can’t help you building your website and fix the issues. But you can send me an email at researchasahobby@gmail.com with the screenshots you want, I can have a look at them and give you a short notice to help you move forward.

          As regards image map using, it should work with Elementor as well (I see it already working on your website!).

          I went to your website and did not see any home/date stuff in the home page apart from the top menu which is the part of your website theme.

          The image map (clickable image) looks totally okay and clickable ares are not misplaced – everything in order.
          When I click the areas, the new pages open in the same window.

          if you have issues, then it can be something with your browser. Could you let me know what browser you are using?

          Also, if you broke something in your website and you don’t know how to go back, you need to restore a backup.
          If you don’t have a backup, ask your hosting to restore it for you if they made the backup.

          Don’t give up. You are just in the beginning of your way with your website. It can be hard sometimes.

  18. I used this method a little over a year ago. After one of the recent WordPress updates, it broke the plugin that you recommend above. I was in fact googling to look for alternatives because the plugin hasn’t been updated in years and there are no others in the repository like it.

    Any other ideas for an implementation other than using the Responsive Image Maps plugin?

    It’s likely that everyone who has implemented this solution will find their images now unclickable. I hope that’s not the case and it’s just a quirk with the one site I’m dealing with but I suspect that isn’t true.

    • Patrick,

      It’s sad to hear that something is broken on your website. But you had an isolated issue with update / the plugin conflict.
      I am still using the plugin (Responsive Image Maps), including on this page. And I update WP regularly.
      As you can see in this tutorial, my example on this page (as well as other implementations on my website) are working fine.

      Try troubleshooting your issue by disabling all plugins but the Responsive Image Maps. And then enabling the plugins one by one. Perhaps other plugins conflict with Responsive Image Maps.

      As regards alternative ways of creating clickable areas, I have a tutorial on creating interactive SVG image and adding it to WordPress.

  19. Hi there Michael. I’m trying to make a digital card that is interative (or at least with magnetic links) that works on mobiles. But I dont want the person to have to open a page to visuaize the image. I’m basically in need of creating an interative pdf but better because pdf is kinda broken and is required to the person to have the adobe installed in order to things to work and be clickable, and I was thinking about something that i could just share and be there, like a business card but digital. Is that possible whatsoever?

  20. Blanca Abend says

    Michael,
    You and your video are amazing, Just made it so easy! Thank you so much for your help with this. After researching so much I could not believe how fast I made it after I saw your presentation. I truly thank you for posting it.
    Blanca Abend

  21. I would love to be able to post photos with clickable links to different objects in the photos.

    I guess that would be a hundred times more popular and require a lot more code.

    Maybe I could use the info you’ve supplied by placing things in a photo exactly where the links will show up.

  22. massimo defilippo says

    HELLO,I created a mapper image with 3-4 zones.
    I try to insert your code into my websites, but it is not responsive, it works only in desktop.
    why???

    this is the code:

    thanks

  23. Jessica Wilson says

    Hello, enjoyed finding this article with a possible solution to what I’m trying to do. However, I need to ensure that everything I do on our site (which is funded by a government grant) is accessible for screen readers. Do you know whether keyboard navigation and/or screen reader software would work with this kind of image mapping? People need to be able to navigate and click the hotspots using alternates to a mouse in order for me to be able to include such a design element on our site.

    • Hello Jessica,

      Thanks for your question.

      Technologically you can access the elements of image maps. But I’m not acquainted with practical use of screen readers. I don’t know if they can access the elements of image maps the way you need. I encourage you to test it yourself.

      Besides, I’ve just tried and I can access the elements of image maps (hotspots) with keyboard navigation (e.g. by pressing TAB to navigate across image map elements and ENTER to imitate a mouse click).

  24. sondra menthers says

    Hi Michael, this is very awesome, and I am no newbie to HTML code or WP but I need to do this in Confluence. Confluence does have an HTML plugin which has worked for some formatting, CSS styles and the like, but it seems to not ‘play nice’ with your code. This is what I am trying to do

    create a clickable map with circle points

  25. jc bello says

    hi can I pass a value from an area to a modal?

  26. Erin N Rippinger says

    Hello,
    Begininner here, whenever I copy and paste the code to my blog from the free image mapper, I get an icon instead of my picture. Do you know how to fix this?

  27. Hi Michael

    I have just a question: I succeeding creating my first image map; however, I wanted to use an animated gif. I is basically a jpg that I converted to gif and then I added some animated markers; like the ones on the google maps, but these ones are bouncing.

    After having imported the gif, I realized that the animation is no longer there. I guess inkscape only imports one frame. So, now to the question:

    is it somehow possible to import the markers on the svg and do the animation with inkscape?

    Thanks

    Best regards
    Josef

  28. I haven’t tried it yet. Found myself here, because I could see that in tutorials by others, there were constant complaints as to responsiveness. I can simply see YOU are responsive and that is worth a “thanks” across the internet. The bonus will be if I can make this work. Stay tuned for news πŸ˜‰

  29. Hi Michael!

    I was wondering if there is any way to create image mapping that is compatible with mobile without using CSS?
    I have created one for my blog and it is working properly for PC but not for the mobile version due to change in coordinates.

  30. Hi Michael!

    I’m trying to create a site with a hi-res photograph as the background and I want it to have clickable hotspots that bring up little pages within the image that has extra information (words, videos, pictures) embedded in it. I have literally zero coding experience, just this vision of what I want to do. I’ve been trying to research clickable hotspots and responsive images and I stumbled across your page & video. Will this method work with a photo as well? Or am I trying to do something out of left field?

  31. 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!

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

  33. 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.

  34. 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.

  35. 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!

  36. 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!

  37. 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.

  38. 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?

  39. 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!

  40. 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.

  41. 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: https://researchasahobby.com/highlighted-areas-links-responsive-image-free-svg-wp/

  42. 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 πŸ™‚

  43. 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.

  44. 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!

  45. 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

  46. 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.

It's important for me to know what you think

*