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.

Stop using archaic image maps and start using hover maps!

Postby Mike Kelley on Wed Jul 27, 2016 10:24 am

Don't know what a hover map is? Check one out in action! https://jsfiddle.net/MikeKelley/Lesu3m0o/embedded/result/#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.
Mike Kelley
Propeller Head
 
Posts: 68
Joined: Fri Aug 22, 2014 12:24 pm

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

Postby sdcinvan on Wed Jul 27, 2016 1:32 pm

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/featurerequest.aspx[/i]
User avatar
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

Postby Paulie on Wed Jul 27, 2016 1:48 pm

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

Postby charleybrown on Thu Oct 20, 2016 6:12 am

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!
charleybrown
Propeller Head
 
Posts: 20
Joined: Thu Sep 26, 2013 9:14 am

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

Postby ogaleswapnil on Sun Jan 08, 2017 4:28 am

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

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

Postby ruthhenry on Tue Nov 06, 2018 6:21 pm

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?
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

Postby robdocsmith on Tue Jun 11, 2019 11:32 pm

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
robdocsmith
Jr. Propeller Head
 
Posts: 3
Joined: Thu May 24, 2018 3:11 pm


Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 6 guests