-
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>
-
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:
- create your Hotspotter image and insert its short code into a post
- display that single post so the functional hotspots are generated
- view the source code of the generated single post page
- find all the HTML and JS Hotspotter code (you should be able to identify all of it by searching for
imagehotspotter)
- 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 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.