Dark hotspots

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
Kif Taco
Posts: 13
Joined: Thu Feb 23, 2017 9:54 am

Dark hotspots

Unread post by Kif Taco »

Hello,

I created a single landing page (html) with a couple of buttons and I used the Hotspot editor to assign a web link to each of them. When I published the page, the hotspots turned very dark. It looks really hideous and the text on the buttons is hard to read. I can't figure out how to prevent this "darkening". Any suggestions?
Thank you in advance.
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Dark hotspots

Unread post by Tim Green »

Hi Kif,

You don't need to do anything at all with CSS. You can turn this feature off directly in Configuration > Publishing Options > WebHelp > HTML Export Options: Highlight hotspots in pictures :)

If you want to adjust it you need to add some CSS of your own. The CSS for the hotspots is included in the main CSS file for the topic styles that is generated automatically. To change/redefine it you need to add your own CSS to the HTML Page Template in your skin directly after the reference with the <%STYLESHEET%> variable that inserts the standard CSS.

The CSS generated by Help+Manual looks like this:

Code: Select all

.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1)  }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border-radius:50%; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap:hover a.hmHotspotRect {opacity:0.3; filter:alpha(opacity=30); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:0.3; filter:alpha(opacity=30); }
a.hmHotspotRect:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
a.hmHotspotEllipse:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
To change it, you would add your own version of what you want directly after the reference containing the <%STYLESHEET%> variable, between style tags. You only need to include the attributes you want to change, in this case that would be the background color and the opacity (transparency) values. So you would insert this block of code, with those things changed as you want to have them. The settings with :hover in the selector are for when the mouse is over the hotspot.

Code: Select all

<style type="text/css">
.hmImageMap a.hmHotspotRect {  background:#000; opacity:0.01; filter:alpha(opacity=1)  }
.hmImageMap a.hmHotspotEllipse { background:#000; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap:hover a.hmHotspotRect {opacity:0.3; filter:alpha(opacity=30); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:0.3; filter:alpha(opacity=30); }
a.hmHotspotRect:hover {  background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
a.hmHotspotEllipse:hover {  opacity:0.3; filter:alpha(opacity=30) }
</style> 
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Kif Taco
Posts: 13
Joined: Thu Feb 23, 2017 9:54 am

Re: Dark hotspots

Unread post by Kif Taco »

Hi Tim,

All fine now. Thank you for your answer.
Post Reply