Stop using archaic image maps and start using hover maps!

This forum is for all Flare issues not related to any of the other categories.
Post Reply
Mike Kelley
Propeller Head
Posts: 68
Joined: Fri Aug 22, 2014 12:24 pm

Stop using archaic image maps and start using hover maps!

Post by Mike Kelley »

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!
Last edited by Mike Kelley on Wed Jul 27, 2016 2:13 pm, edited 1 time in total.
sdcinvan
Propellus Maximus
Posts: 1260
Joined: Wed Aug 21, 2013 11:46 am
Location: Vancouver, Canada

Re: Stop using archaic image maps and start using hover maps

Post by sdcinvan »

Thank you for this Mike.

:)
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]
Paulie
Sr. Propeller Head
Posts: 140
Joined: Sun Mar 01, 2015 3:01 pm

Re: Stop using archaic image maps and start using hover maps

Post by Paulie »

Post of the year (so far). Awesome stuff!
"In an ideal world, software should be simple, well designed, and completely intuitive to end users. In the real world, good documentation is king."
charleybrown
Propeller Head
Posts: 20
Joined: Thu Sep 26, 2013 9:14 am

Re: Stop using archaic image maps and start using hover maps

Post by charleybrown »

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!
ogaleswapnil
Jr. Propeller Head
Posts: 5
Joined: Wed Sep 23, 2015 5:31 am

Re: Stop using archaic image maps and start using hover maps

Post by ogaleswapnil »

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.
ruthhenry
Jr. Propeller Head
Posts: 4
Joined: Sun Sep 10, 2017 11:24 pm
Location: Melbourne, Australia

Re: Stop using archaic image maps and start using hover maps

Post by ruthhenry »

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?
robdocsmith
Sr. Propeller Head
Posts: 247
Joined: Thu May 24, 2018 3:11 pm
Location: Queensland, Australia

Re: Stop using archaic image maps and start using hover maps

Post by robdocsmith »

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:

Code: Select all

position: { adjust: { method: 'shift' } },
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:

Code: Select all

    <script src="../Resources/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="Resources/Scripts/jquery.qtip.min.js"></script>
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
hattie
Jr. Propeller Head
Posts: 6
Joined: Thu Oct 29, 2015 3:28 am

Re: Stop using archaic image maps and start using hover maps

Post by hattie »

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 :-)
robdocsmith
Sr. Propeller Head
Posts: 247
Joined: Thu May 24, 2018 3:11 pm
Location: Queensland, Australia

Re: Stop using archaic image maps and start using hover maps

Post by robdocsmith »

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
Post Reply