Hotspots in images

[TeSol]

Hello,

I want to add hotspots in images in my Webhelp/HTML5 output. Please check out the following link -

http://panic.com/transmit/

Is it possible to do this using Flare? I tried using image maps but am not able to add the red dot and the fade in/fade out effect. Also, I do not want a link to any file - I just need to have a tool-tip.

Any pointers on how I can achieve this would be much appreciated. I use Flare v10.2 and Windows 8.1

Thanks in advance

[kwag_myers]

I have been tasked with the same idea. Must be the latest design fad. I'm going to attempt mine using Mimic for the hotspots and animation, which will be relatively simple. Then I just have to figure out how to incorporate it into my Flare project.

[Mike Kelley]

I built something similar to what you linked to, that is very easy to use. It uses some custom jQuery I wrote and a jQuery plugin called qTip2. I've written the script up so that it's super easy to add other images with other overlays. It might look complex at first, but it really is simple once you get the hang of it. I demonstrated and trained some of my less-technical co-workers and they can add new hover maps (as I call them) to our project in as little as 20 minutes. All the script needs is:

• CSS top and left locations for the hotspots

  Code: Select all

  #AgentInterface_3, #AgentInterface_4, #AgentInterface_5 {
      top: 162px;
  }
  #AgentInterface_3, #AgentInterface_8 {
      left: 64px;
  }
  

• CSS size dimensions for the hotspots

  Code: Select all

  #AgentInterface_8, #AgentInterface_9 {
      height: 28px;
      width: 30px;
  }

• Formatting of the hotspot border sizes, shapes, and colors

  Code: Select all

  .hoverMap#AgentInterface:hover .mapLink {
      border: 2px solid #fa8c00;
  }
  .hoverMap#AgentInterface .overlay {
  	border-radius: 5px;
  }

The hover maps are such a huge hit inside my company with Product Owners, Product Managers, Support personnel, and Project Managers, that I'm working on packaging up the script, the base-line CSS, and a helper tool so that they can be dropped into any project. I'm even considering proposing to MadCap that I demonstrate this technology at MadWorld next year and present a session on what it is and how to use it (along with providing zipped up projects with working examples and such).

If there's more interest on this forum, I can package the script, helper tool, and CSS files with instructions on how to implement them into Flare and how to create your first hover map.

EDIT: With the qTip2 plugin, you can make some very easy changes to the script to get the same slide-up, fade-in effect as on the page you linked to.

[TeSol]

Thanks kwag_myers. Unfortunately, I don't have Mimic so that is not an option.

Mike Kelley, thanks for the information. I have passed it on to the development folks and just need approval to go ahead. I do hope your paper is accepted at Madworld 2016-all the best. It would be great if Madcap incorporates this in the future. Have you submitted a feature request?

Thanks again.

[qtxasjo]

If there's more interest on this forum, I can package the script, helper tool, and CSS files with instructions on how to implement them into Flare and how to create your first hover map.

Mike, maybe a little bit late to the party, but I'd love to know more on how you have implemented qTip2 in Flare!

[Mike Kelley]

If there's more interest on this forum, I can package the script, helper tool, and CSS files with instructions on how to implement them into Flare and how to create your first hover map.

Mike, maybe a little bit late to the party, but I'd love to know more on how you have implemented qTip2 in Flare!

Unfortunately, qTip2 doesn't work in Flare 11 TopNav due to MadCap's inclusion of RequireJS in the output. I'm working on a solution now.