MadCap Software Forums

Don't know what a hover map is? Check one out in action! https://jsfiddle.net/MikeKelley/Lesu3m0 ... lt/#Result

Image maps haven't really been updated since their inception in HTML 3.1, 20 years ago. I got tired and frustrated with the awful user experience and decided to improve it. I demonstrated hover maps in my MadWorld '16 session and my recent MadCap webinar. Many attendees asked if I could make my tool available, and I've finally been able to!

Here's the hover map generator tool:
http://mike.kelley.consulting/tools/hovermapgenerator

And here's a blog post I wrote on how to implement them into Flare projects. I've additionally supplied a small, downloadable project you can use to get started:
http://mike.kelley.consulting/blog/how- ... s-in-flare

Happy hover mapping!

Thank you for this Mike.

Post of the year (so far). Awesome stuff!

Hi Mike,

Since I saw you present these hover maps at MadWorld I wanted to give this a shot and now I have finally had a chance. It works great, expect for one thing: when hovering the mouse over the hotspots, they don't become visible in my case. Meaning they remain grayed out as if not hovered over them. I copied your code unchanged to my project. Any idea from the top of your head what might be causing this?

I've also downloaded your sample project and it works fine there when I build it on my machine.

Thanks!

This is brilliant Mike. This just saved me so much time trying to get an image map hyperlink to text within popup. Flare does not allow pointing to snippets directly (for obvious reasons), but your hover maps solution worked a treat. Thanks for posting this.

I have recently updgrade to Flare 2018 r2 and my hover maps have stopped working. When I hover over the image I can see the outlines but no pop-up displays with the text.

Has everyone else experience this?

I found this was due to several issues:

• issues with the upgrade and a new version of jquery being used (v3.3.1 currently) not supporting getClientRects
• Difficulties in getting the Madcap inclusion of jquery aligned with the qtip javascript. qtip.js should follow immediately the jquery.js, and both should be the first scripts called in the head of the page.

Use your browser console to see the errors that are being generated.
The fix for the first was to remove the viewport: $(window) from the qtip so the position now reads: This has no affect on the popup.

The fix for the second issue was to hack into the output HTML and move my call to the qtip javascript so that it is immediately after the jquery one, and then place them both at the top of all the script calls in the head of the affected page. So the page now has: There's no place you can put the qtip script in the MasterPage template or the source file that will ensure that both jquery and qtip are adjacent.
The styles that define the popups I added to the head of the page source, and the jquery document.ready function is the first thing in the body of the source. That does the trick for me and I can see both the hover highlights and the popup where expected. It's a pain to have to remember to relocate the qtip each time, so I created a post processing script that moves it for me.

Cheers,

Rob

Hi,

Does anyone know if this hover mapper or something similar still exists and if it works with the newest version of flare?
Because I can't seem to be able to find it but find it really fascinating

hattie wrote:Hi,

Does anyone know if this hover mapper or something similar still exists and if it works with the newest version of flare?
Because I can't seem to be able to find it but find it really fascinating

Hi Hattie,
Yes they still exist and work, though you have to use the workarounds I suggest in my post. The basic code for qtips works well in HTML5 Flare output. The main problem is making sure the qtip code is in the right place in the output page. I couldn't find a way to do that except by post processing after a build to move it. The reference to qtip needs to be immediately after the jquery reference for it to work correctly. Feel free to PM me if you want an example.

Cheers,
Rob