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!
Stop using archaic image maps and start using hover maps!
-
- Propeller Head
- Posts: 68
- Joined: Fri Aug 22, 2014 12:24 pm
Stop using archaic image maps and start using hover maps!
Last edited by Mike Kelley on Wed Jul 27, 2016 2:13 pm, edited 1 time in total.
-
- 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
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]
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]
Re: Stop using archaic image maps and start using hover maps
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."
-
- Propeller Head
- Posts: 20
- Joined: Thu Sep 26, 2013 9:14 am
Re: Stop using archaic image maps and start using hover maps
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!
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!
-
- Jr. Propeller Head
- Posts: 5
- Joined: Wed Sep 23, 2015 5:31 am
Re: Stop using archaic image maps and start using hover maps
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.
-
- 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
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?
Has everyone else experience this?
-
- Sr. Propeller Head
- Posts: 248
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Stop using archaic image maps and start using hover maps
I found this was due to several issues:
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
- 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.
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' } },
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>
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
Re: Stop using archaic image maps and start using hover maps
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
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
-
- Sr. Propeller Head
- Posts: 248
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Stop using archaic image maps and start using hover maps
Hi Hattie,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
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