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. Can I put a Hotspotter image into a sidebar widget (or some other non-standard place)?
  12. Can my hotspots work if my image resizes or moves?
  13. How do I delete unwanted images?
  14. My staging server is on a different domain than the production site. Does the license allow this?
  15. One of my hotspotter images gets hidden or shown. How can my hot spots hide or show at the same time?
  16. Can I just show a hover box and have nothing happen when a hotspot is clicked?
  17. Do the hotspots work in mobile or a responsive design?
  18. When I hover where my hotspots should be nothing happens. What gives?!
  19. Can I click away from the pop-up box to make it close?
  20. I added several dozen hot spots, so why are only the first ~72 showing up?!
  21. 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?

      There are plans to add support for uploading a replacement image, but until that is available, you can replace an existing image by uploading it via FTP into your wp-content/plugins/image-hot-spotter/images folder. Just ensure the new file name is the same and that it is not smaller in width/height than your hotspots require (or all sorts of unexpected things might happen).

    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.

  • 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($){
      $(document).ready(function(){
        $(".imagehotspotter_caption_box").each(function(){
          var $that = $(this),
              $spot = $("#"+this.id.replace("caption_box", "spot")),
              os = $spot.offset(),
              w = parseFloat($spot.width()),
              h = parseFloat($spot.height());
    
          $spot.mousemove(function(){
            $spot.data('hovering', false);
            $that.css({top:os.top + (h / 2) ,left:os.left + (w / 2)});
          });
        });
      });
    })(jQuery);
    </script>
  • Can I put a Hotspotter image into a sidebar widget (or some other non-standard place)?

    Actually, yes you can, however it’s a bit of a hack so it requires a little technical know-how. The issue is that WordPress does not allow you to filter sidebar widgets, so you cannot insert an Image Hotspotter short tag like into the sidebar; those short tags are only converted in posts and pages.

    Thus, the trick to getting a fully-functional Hotspotter image into the sidebar is to first generate it via a post/page then to copy the generated code into the sidebar. 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 into a sidebar widget
  • Can my hotspots work if my image resizes or moves?

    Unfortunately, no. The hotspots are defined with an absolute position, offset, and size that is dependent on the image retaining its natural dimensions and position. If the image scales or moves (e.g., inside a slideshow, lightbox, etc.) the hotspots will almost certainly no longer function as designed.

    When uploading, please ensure your images are the size they’ll be when viewed on the website so that hotspot misalignment can be avoided.

  • 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 images will function nicely in a responsive environment. An image 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 this functionality is not desired you can disabled 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?

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

  • You haven’t answered my question!

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