Responsive Image Maps

This plugin simply packages the RWD Image Maps jQuery plugin for use in WordPress, providing an easy way to make image maps responsive in any WordPress theme.

Download

You can download the plugin from its page on WordPress Extend.

Installation

To manually install the plugin, follow these steps:

  1. Download and unzip the plugin, and upload the ‘responsive-image-maps’ folder to your /wp-content/plugins/ directory. Or, download the plugin, and upload the ZIP file using the plugin uploader in the ‘Plugins’ menu in WordPress.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. There is no third step. Your image maps should now be responsive.

Changelog

  • 1.3 (2012-11-16)
    • Updated the RWD Image Maps jQuery plugin to version 1.4. Images are no longer required to have width/height attributes.
    • Updated readme.txt
  • 1.2 (2012-10-08)
  • 1.1 (2012-08-16)
    • Fixed path to jQuery plugin
    • Updated readme file
  • 1.0 (2012-08-15)
    • Initial release

Implementation Notes

Your image map needs to keep the original width and height attributes in the HTML markup for the RWD Image Maps jQuery plugin to function properly. This limitation has been removed in version 1.4 of the jQuery RWD Image Maps plugin (WordPress plugin version 1.3). The Responsive Image Maps WordPress plugin will add the CSS styles max-width: 100%; height: auto; to all image maps, which will override the HTML width and height attributes for the image map’s display.

It goes without saying, but the RWD Image Maps jQuery plugin requires javascript to be enabled in the user’s browser for it to work its magic.

If you have questions or problems with the RWD Image Maps jQuery plugin itself (not the WordPress wrapper for it), go to the jQuery RWD Image Maps plugin page on GitHub.

Help

If you need help, please do not comment on this page asking for help. Instead, open a new thread on the plugin’s support forum on WordPress extend. That way others will be more likely to see your thread and benefit from the solution, or possibly even help you themselves.

14 thoughts on “Responsive Image Maps

  1. Pingback: Responsive Image Maps 1.0 Released | Philip Newcomer

  2. Pingback: Responsive Image Maps Update | Philip Newcomer

  3. Hi, great plugg in, it worked verry good, but nog any more!?

    I don’t know what happend but it worked just fine, but now it is not working anymore.
    I removed the plug in and installed it again but no difference.

    You know what is wrong?

    Thanks,
    Sam

  4. Hey Philip,

    Great work with this plugin! I was so relieved to find it; I hope it saves me a ton of headache. To wit, I wonder if you can help me:

    I have installed the plugin and activated it in WordPress with two image maps in my code. One in the header template file, and the other in my mainIndex template file.

    If I keep the plugin deactivated, both image maps function as expected. When I activate your plugin, the image map in the mainIndex template file (i.e. in the body of my site) ceases to work. I have tried everything I can think of to remedy the problem but no luck so far.

    Is this plugin intended to work with two or more image maps in the same theme/site?

    If so, do you have any idea what could be causing my problem? I would sincerely appreciate any help/thoughts/suggestions. Thanks, Philip. —

  5. Hey Philip!

    Thanks for the reply. I opened a new thread on WordPress.org like you suggested using the title “Multiple Image Maps Not Working Properly w/ This Plugin”.

    If you have a moment to help me I would greatly appreciate. Thanks! —

  6. Pingback: Responsive Image Maps 1.2 Update - Philip Newcomer

  7. Pingback: Responsive Image Maps 1.3 Released - Philip Newcomer

  8. Pingback: aioua – Plugins @Wordpress

  9. The plugin’s not working for me? Try re-sizing browser on this page.

    If it helps I’m using a responsive image class with bootstrap3 “img-responsive”. When I remove the class, the map does not resize at all. With the class , bootstrap resizes the image, however the hotspots are gone.

    much appreciated, thx!

    Nate

Leave a Reply

Your email address will not be published. Required fields are marked *