Title: Solution: Make ImageMapper Responsive
Last modified: March 7, 2017

---

# Solution: Make ImageMapper Responsive

 *  Resolved [Garrett Hyder](https://wordpress.org/support/users/garrett-eclipse/)
 * (@garrett-eclipse)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/)
 * Hello,
 * I just wanted to share a quick little jQuery snippet for making ImageMapper images
   responsive;
 *     ```
       // Responsive ImageMapper - Resize Mapster on Window Resize
       jQuery(document).ready(function($) {
           if ($('img[usemap]').length) {
               $(window).resize( function() {
                   $('img[usemap]').each(function() {
                       $(this).mapster('resize',$(this).closest('.imgmap-frontend-image').width());
                   });
               });
           }
       });
       ```
   
 * Note: You need to make sure this is enqueued after the imagemapper scripts and
   jquery.
 * Hope others find this useful,
    Cheers
    -  This topic was modified 9 years, 2 months ago by [Garrett Hyder](https://wordpress.org/support/users/garrett-eclipse/).
      Reason: *Fixed the code block formatting

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [KrisArgent](https://wordpress.org/support/users/krisargent/)
 * (@krisargent)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-9075712)
 * Thank you for this!
 *  Thread Starter [Garrett Hyder](https://wordpress.org/support/users/garrett-eclipse/)
 * (@garrett-eclipse)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-9075741)
 * No worries, glad it’s helped someone
 *  [gustav939](https://wordpress.org/support/users/gustav939/)
 * (@gustav939)
 * [8 years, 12 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-9187218)
 * Hi
 * Where do you insert this code?
 *  Thread Starter [Garrett Hyder](https://wordpress.org/support/users/garrett-eclipse/)
 * (@garrett-eclipse)
 * [8 years, 12 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-9188057)
 * Hi [@gustav939](https://wordpress.org/support/users/gustav939/),
 * You can place in your javascript file, just make sure it’s enqueued after the
   imagemapper script. If you don’t have an existing JS file then create a new one
   with this code and enqueue it into your theme.
 * Enqueue Script in WordPress – [https://developer.wordpress.org/reference/functions/wp_enqueue_script/](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
 * Hope that helps, in worst case you can just add within <script></script> tags
   within your footer.php after the wp_footer() call.
 * Cheers
 *  [iamkashifnadeem](https://wordpress.org/support/users/kashifkiduniya/)
 * (@kashifkiduniya)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-9553730)
 * Perfect!
    Thanks so much
 *  [dkamm](https://wordpress.org/support/users/dkamm/)
 * (@dkamm)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-9836167)
 * Still works perfectly. Great.
 *  [linae](https://wordpress.org/support/users/linae/)
 * (@linae)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-10224479)
 * Thank you very much you save me !
 *  [andza1](https://wordpress.org/support/users/andza1/)
 * (@andza1)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-10684216)
 * Hey guys , I’m having an issue. All areas are on the place but one of them is
   a bit off.
 * The website im working on is : [http://naujas.pajuriorezidencija.lt](http://naujas.pajuriorezidencija.lt)(
   see the parking area on the landing page)
 * any clue why? All other screen resolution working fine , just the 1920×1080 is
   wrong.
 *  Thread Starter [Garrett Hyder](https://wordpress.org/support/users/garrett-eclipse/)
 * (@garrett-eclipse)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-10696556)
 * Hi [@andza1](https://wordpress.org/support/users/andza1/),
 * As this topic is closed you’ll be better served opening a fresh topic otherwise
   your post will be overlooked.
 * Taking a quick look it’s hard to say, seems you’ve customized the plugin code
   directly which makes it difficult to determine if the cause is the plugin or 
   your customizations. You might want to start by separating your customizations
   into your child theme and out of the plugin so you can test if it’s a plugin 
   issue or your code.
 * Hope that sends you down the right path.
    Cheers

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Solution: Make ImageMapper Responsive’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/imagemapper_e1e9f0.svg)
 * [ImageMapper](https://wordpress.org/plugins/imagemapper/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/imagemapper/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/imagemapper/)
 * [Active Topics](https://wordpress.org/support/plugin/imagemapper/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/imagemapper/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/imagemapper/reviews/)

## Tags

 * [resize](https://wordpress.org/support/topic-tag/resize/)
 * [rwd](https://wordpress.org/support/topic-tag/rwd/)

 * 9 replies
 * 7 participants
 * Last reply from: [Garrett Hyder](https://wordpress.org/support/users/garrett-eclipse/)
 * Last activity: [7 years, 8 months ago](https://wordpress.org/support/topic/solution-make-imagemapper-responsive/#post-10696556)
 * Status: resolved