Frequently Asked Questions

Frequently Asked Questions

  1. I bought the plugin, but where is my email?!
  2. How do I install the plugin?
  3. How do I install a plugin upgrade?
  4. Can I use dynamic content in a hover box? (Can I put an autoplay video in the hover box?)
  5. How can my hotspot open a lightbox/fancybox slideshow?
  6. Can I replace an image I uploaded without losing the hotspots I created for it?
  7. Can I create irregular (meaning non-rectangular), polygon-shaped hotspots?
  8. Does it work with multi-site configurations?
  9. Does it work with the Genesis framework?
  10. How can I make the hover box stay fixed instead of following the mouse?
  11. How can I make the pop-up box center itself vertically in the window?
  12. Can I put a Hotspotter image into a non-standard place?
  13. Can my hotspots work if my image resizes or moves?
  14. How do I delete unwanted images?
  15. My staging server is on a different domain than the production site. Does the license allow this?
  16. One of my hotspotter images gets hidden or shown. How can my hot spots hide or show at the same time?
  17. Can I just show a hover box and have nothing happen when a hotspot is clicked?
  18. Do the hotspots work in mobile or a responsive design?
  19. When I hover where my hotspots should be nothing happens. What gives?!
  20. Can I click away from the pop-up box to make it close? <= Default behavior in v1.4.2
  21. I added several dozen hot spots, so why are only the first ~72 showing up?!
  22. With which versions of WordPress is the plugin compatible?
  23. How do I make my hotspots ellipses instead of rectangles?
  24. Why are my hotspots several pixels away from where they are supposed to be?
  25. Can I make the plugin execute a callback when the pop-up is opened or closed?
  26. Can I use an SVG file as the background image?
  27. Why am I seeing this error? "Failed to insert new record into server database!"
  28. How do I change the styles of my hotspots?
  29. Can I dynamically fetch an image URL by ID?
  30. Can you send me an invoice or tax receipt?
  31. You haven't answered my question!

  1. I bought the plugin, but where is my email?!

    For most every instant purchase of the plugin, your license/download email is sent within seconds or mere minutes. If it has been several minutes or hours since you purchased and haven't received an email, please check your email's spam or trash folder for the missing email. Also please be sure to add this email to you address book to ensure delivery of future messages: do-not-reply at imagehotspotter dot com
  2. How do I install the plugin?

    The plugin may be easily installed in one of two ways:
    1. Automatic Installation Submit the plugin zip file on the Plugins → Add New page. View full instructions.
    2. Manual Installation Upload the unzipped plugin folder into your server's wp-content/plugins directory, ensuring all created sub-directories are writable by your server. View full instructions.
  3. How do I install a plugin upgrade?

    If you attempt to upgrade using the Automatic Installation method described above, you'll very likely see an error like "Destination folder already exists." This is because WordPress currently will not automatically overwrite existing plugin files, even if you really mean to do so. Instead of using that method to install the newer version of the plugin, you'll have to use the Manual Installation method described above, wherein you FTP the new plugin contents into your existing wp-content/plugins folder. (Installing the newer version of the plugin will not destroy any images you have previously uploaded.)
  4. Can I use dynamic content in a hover box? (Can I put an autoplay video in the hover box?)

    Yes! When the hover box appears, the hotspot will have a jQuery event named "ihs_hovershow" triggered. When you move your mouse off the hotspot and the hover box closes, the hotspot will have event "ihs_hoverhide" triggered. There are two arguments to these events: 1) the event and 2) the hover box element. Example:
    // make a video appear and start playing once this hotspot is hovered over
    $('#imagehotspotter_spot-1-1').on('ihs_hovershow', function(event, hover_box){
      $(hover_box).html('<iframe src="//youtube.com/embed/I6OXjnBIW-4?autoplay=1#t=16.1s"></iframe>');
    });
    
    // when the mouse leaves, the video should be removed (otherwise it will keep playing invisibly)
    $('#imagehotspotter_spot-1-1').on('ihs_hoverhide', function(event, hover_box){
      $(hover_box).html('');
    });
  5. How can my hotspot open a lightbox/fancybox slideshow?

    In the properties of your hotspot specify the URL of the first slideshow image and in the attributes specify rel="lightbox" where "lightbox" is a value you define for that particular slideshow. If you have additional images you'd like included in a given slideshow, simply add an <a> tag to your post with the corresponding image URL and the same rel attribute. That will instruct your lightbox/fancybox that those images are to be coupled with the primary image which is linked to by the hotspot.
  6. Can I replace an image I uploaded without losing the hotspots I created for it?

    As of plugin version 1.8, yes! You will find a "Replace Hot Spotter Image" link at the top of the hotspot editor page. Just be advised that if the new image is smaller in width or height than your old image, any hotspots that extend outside the edges of the new size will break (all sorts of unexpected things might happen), this misuse of the plugin is unsupported, and any problems resulting from ignoring this warning are solely the user's (i.e., your) responsibility.
  7. Can I create irregular (meaning non-rectangular), polygon-shaped hotspots?

    Yes, kind of. Due to the special features offered by Image Hotspotter, using custom shapes via a standard HTML image map is not possible because web browsers simply don't support the functionality. In short, only rectangular shapes are available. However, as a workaround what you can do is create multiple, overlapping rectangular hotspots over the irregular area and assign the same attributes to each one. As long as you don't enable a visible border on the hotspots, to the end-user it will seem to be one large, irregularly shaped hotspot.
  8. Does it work with multi-site configurations?

    Yes, Image Hotspotter has been tested with standard multi-site installations and it has proven to function as expected. The only caveat is that the plugin needs to be installed in an individual sub-blog, not in the master/parent WordPress installation.
  • Does it work with the Genesis framework?

    Yes, Image Hotspotter has been reported by clients as having no issues working with Genesis.
 
  • How can I make the hover box stay fixed instead of following the mouse?

    The standard functionality of the hover box is to move with your mouse while it's over a hotspot. If you are using a custom layout where you'd like the hover box to sit in a fixed position, you can use the block of JavaScript below by just adding it to the footer of the page with the hotspots. (Find an example of this in action via our Powered By page.) This custom code will position the hover box at the center of the hotspot. If you're savvy with JavaScript you can modify the code to work on just a specific image or to change the position of the hover boxes if necessary.
    <script>
    (function($){
      $(window).load(function(){
        $(".imagehotspotter_caption_box").each(function(){
          var $that = $(this),
              $spot = $("#"+this.id.replace("caption_box", "spot")),
              w = parseFloat($spot.width()),
              h = parseFloat($spot.height());
    
          $spot.mousemove(function(){
            var os = $spot.offset();
            $spot.data('hovering', false);
            $that.css({top:os.top + (h / 2) ,left:os.left + (w / 2)});
          });
        });
      });
    })(jQuery);
    </script>
  • How can I make the pop-up box center itself vertically in the window?

    By default the pop-up box affixes itself to near the top of the browser window. If you'd instead like to make the pop-up box center itself vertically depending on the window height and pop-up box height, you can insert this JavaScript onto your page:
    <script>
    jQuery(window).resize(function(){
      var $div = jQuery('div.imagehotspotter_box:visible');
      var offset = (jQuery(this).height() - $div.height()) / 2;
      $div.css({ top : offset });
    }).resize();
    </script>
  • Can I put a Hotspotter image into a non-standard place?

    Sometimes you may want to put an image somewhere that doesn't support shortcodes like [hotspotter id=1] and you can do that in one of two ways. The first way is the most ideal, but requires that you edit your theme file. For example, if you want to insert a hotspotter image into your page header, you can modify header.php in your theme. You just need to add a single line like this:
    <?php echo do_shortcode('[hotspotter id=1]'); ?>
    
    If you need to insert somewhere where modifying a theme file doesn't work, there is another option that's a bit of a hack so it requires a little technical know-how. The trick to getting a fully-functional Hotspotter image's code is to first generate a shortcode on a post or page then to copy the generated code by viewing the page source and paste as needed. Specifically, these are the steps you can follow to achieve that goal:
    1. create your Hotspotter image and insert its short code into a post
    2. display that single post so the functional hotspots are generated
    3. view the source code of the generated single post page
    4. find all the HTML and JS Hotspotter code (you should be able to identify all of it by searching for imagehotspotter)
    5. copy that code and paste it where you want it displayed
    Keep in mind this procedure is definitely a messy hack, so you might have some trouble using it.
  • Can my hotspots work if my image resizes or moves?

    Yes. The caveat is: hotspots will typically only automatically adjust themselves when a window resize is detected. If you manually move or resize your hotspotter image (or if you allow it to be moved or resized by any other means), you'll need to call imagehotspotter_update_hotspots() to tell Image Hotspotter to update the hotspots.
  • How do I delete unwanted images?

    Go to the edit page for a Hotspotter image record and look in the top-right corner of the page. There you'll find a hidden treasure in the form of a button labeled Delete. Click this button and like magic all traces of your image record may be permanently deleted as if it never existed at all. Wow.
  • My staging server is on a different domain than the production site. Does the license allow this?

    If your blog's staging site is on a different domain than production and no one except you and your developers will ever have access to that site and only during development, it is acceptable for Image Hotspotter to be used there temporarily until the blog is moved into production.
  • One of my hotspotter images gets hidden or shown. How can my hot spots hide or show at the same time?

    This will require a little JavaScript programming on your part, but a single line will do it for you in most cases. You just need to make a single function call to get each hot spot to update itself in coordination with its image. The actual function you need to call is imagehotspotter_update_hotspots (but you could also just use $(window).resize() because triggering that will cause the former function to be executed automatically). With that in mind, you will just need to make your code invoke either of those options whenever the visibility changes on any of your hot spotter images. For example, if you have a tabbed page system where clicking tab #2 will hide tab #1 and vice versa and you have a hotspotter image on both (or either of the) tabs, you would just need to add to your page something like: $("#my-tab-nav a.page-tab").click(imagehotspotter_update_hotspots);
  • Can I just show a hover box and have nothing happen when a hotspot is clicked?

    Yes! To make your hotspot non-clickable, just choose Direct URL Hyperlink under Click Settings for your hotspot, specify any Address (even just a hash symbol "#"), and in the Link Attributes include onclick="return false" Ensure you have contents for your hover box. That will always be displayed, and upon clicking the hotspot nothing will happen and your hover box will remain open.
  • Do the hotspots work in mobile or a responsive design?

    Yes! As of version 1.0 your Image Hotspotter hot spots will function responsively. A hot spot will shrink itself down to fit if it exceeds the width of its parent element, and all hotspots will scale and relocate as needed. If the responsive functionality is not desired, you can disable it in the Image Hotspotter settings.
  • When I hover where my hotspots should be nothing happens. What gives?!

    This happens rarely, but it's almost always because the theme you're using specifies in its CSS a z-index higher in priority than the z-index of the hotspots. By default, the hotspots have a z-index of 10. They don't have a higher value because it is potentially more problematic to have hotspots appear when they aren't supposed to than vice versa, so you'll have to manually increase the z-index with a CSS style. It can be as simple as something like:
    <style>
    a.imagehotspotter_spot {
      z-index: 10000 !important;
    }
    </style>
    
  • Can I click away from the pop-up box to make it close?

    Update: This is now the default behavior in v1.4.2, so the information below is deprecated and left here only for posterity. ----- The semi-transparent overlay underneath the pop-up box has DOM ID "imagehotspotter_overlay" so it would be a simple matter of having a callback triggered on-click that executes a line of code to close the pop-up box. This should do the trick for you:
    <script>
    // if you're using jQuery before v1.7 change the first line to use live()
    jQuery('body').on('click', '#imagehotspotter_overlay', function(){
      jQuery('.imagehotspotter_box:visible > a:first').click();
    });
    </script>
    
  • I added several dozen hot spots, so why are only the first ~72 showing up?!

    Please refer to this post on Stack Overflow. In short, your PHP configuration is limiting the number of fields that can be submitted on a form, and when you save your hotspots, PHP is effectively dropping whatever array elements come after that. Typically, this seems to limit the hotspots to 72 (though it could vary). Increase your max_input_vars PHP variable to some arbitrarily large value, and that should fix the problem. (It defaults to 1000.)
  • With which versions of WordPress is the plugin compatible?

    Image Hotspotter is compatible with WordPress versions 2.0.2 up to the latest release, which as of this writing is 4.7.1. There have been no compatibility issues detected or reported.
  • How do I make my hotspots ellipses instead of rectangles?

    You can do that with a simple CSS style. Just add a border radius rule like this and voila all your hotspots will be circles and ovals:
    <style>
    .imagehotspotter_spot {
      border-radius: 50%;
    }
    </style>
    
  • Why are my hotspots several pixels away from where they are supposed to be?

    There are two reasons you might see this. 1) While you're logged into your blog, the administrative header bar is affixed to the top of the window and the content, including your hotspotter image, is pushed down, leaving the fixed-position hotspots aligned where the image was supposed to be. The quick fix for this is to simply browse the page while logged out. 2) The rarer issue is similar, but caused by any other dynamic or fixed-position content/elements that are inserted or removed or resized or repositioned on the page that cause the hotspotter image to be shifted from its natural position, leaving the hotspots where they were supposed to be. Fortunately, Image Hotspotter is intelligent enough to reposition and resize its hotspots automatically. It normally does that only whenever the browser is resized, but you can force that update to happen on a regular basis so any dynamic changes that cause hotspots to be misaligned can be overridden. The general fix is to run the imagehotspotter_update_hotspots() function periodically. A solution has been crafted for that purpose in the following JS code snippet. This will ensure the hotspots are repositioned correctly despite any external changes in page structure/layout that would otherwise leave the hotspots misaligned.
    <script>
    jQuery(window).resize(function(){
    if(typeof imagehotspotter_update_hotspots==='undefined')return;
    if(this.ihs_upd)return;this.ihs_upd=1;
    for(var n=1;n<=5;++n)setTimeout(function(i){
    imagehotspotter_update_hotspots();if(i==5)
    window.ihs_upd=0;},n*500,n);}).resize();
    </script>
    Just insert that into any page on which you have an Image Hotspotter image in use (or if you're lazy, just insert it for all pages). The page footer is an ideal location for it, but anywhere on the page (after the <head> area) will work.
  • Can I make the plugin execute a callback when the pop-up is opened or closed?

    Yep! There are two events you can bind your callbacks to for a pop-up box that will get triggered when it is opened and closed: ihs_hotspot_open ihs_hotspot_close Bind a hotspot's pop-up box to either of those if you'd like to dynamically control its content. For example:
    <script>
    jQuery('.imagehotspotter_box').bind('ihs_hotspot_open', function(){
      alert('the popup opened!');
    });
    <script>
  • Can I use an SVG file as the background image?

    Yep, you sure can. In case you're wondering, it will be uploaded and served on the page as uploaded, not converted to JPEG or anything along those lines. Keep in mind that SVG files are supported in most modern browsers, but you may have users with older browsers in which your SVG images won't work.
  • Why am I seeing this error? "Failed to insert new record into server database!"

    This has only ever been known to occur if you install Image Hotspotter as a plugin into a multi-site WordPress installation and then attempt to actually use the plugin from within one of the child blogs under that multi-site install. The solution is to install the plugin directly into the child blog for which you will be creating your image maps. Also, keep in mind that unless you've purchased the unlimited-site license, your license only allows for the plugin to be used with a single blog.
  • How do I change the styles of my hotspots?

    You can stylize hotspots using a CSS rule like this one:
    <style>
    a.imagehotspotter_spot {
      border: 2px dotted yellow;
    }
    </style>
    That will allow you to manipulate the look of the hotspots as they sit on the page. Note that that alone will not affect the default behavior of the hotspots to display a border when your mouse is hovering over them (using the color defined on the Settings page). If you'd like to override that, you should specify a CSS rule with the "hover" pseudoselector:
    <style>
    a.imagehotspotter_spot:hover {
      border: none;
      background: rgba(255, 0, 0, 0.5);
    }
    </style>
  • Can I dynamically fetch an image URL by ID?

    Yep! There is a special shortcode available for exactly that purpose. The syntax is as follows:
    [hotspotterimg id=123]
    
  • Can you send me an invoice or tax receipt?

    At present, all financial activities for Image Hotspotter licenses are executed via PayPal transactions, so any payment-related information can be found through your account on their website.
  • You haven't answered my question!

    Sorry! Please feel free to contact us with your question and we'll be happy to assist you.