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.
Dark hotspots
Moderators: Alexander Halser, Tim Green
- Tim Green
- Site Admin
- Posts: 23189
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Dark hotspots
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:
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.
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) }
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Re: Dark hotspots
Hi Tim,
All fine now. Thank you for your answer.
All fine now. Thank you for your answer.