Default.CSS .hmImageMap a.hmHotspotRect

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

Moderators: Alexander Halser, Tim Green

Post Reply
Joe Caplan
Posts: 7
Joined: Mon Sep 26, 2011 8:57 pm

Default.CSS .hmImageMap a.hmHotspotRect

Unread post by Joe Caplan »

I upgraded to HM7 and after just a few changes to some images in a table, I have all of my projects working. Most of my projects are CHM outputs, but I use HTML outputs to see what is going on and this post is one of those cases that shows the problem.

I am having one formatting issue related to the default.css sheet that HM7 generates and I never saw this before in all my years of using H&M. I have images that use hotspots all over my projects. When I hover over the images, the entire image turns dark gray and the mouse pointer highlights the link rectangle (hotspot) under the mouse pointer. I have now disabled the image highlighting in the project setup.

I use the custom skins pack and I looked for a setting in the custom skins, but could not find such a thing.

The Default.CSS generates this code that drives the issue:
.hmImageMap a.hmHotspotRect {
display: block;
position: absolute;
border: 1px solid transparent;
background: #000;
opacity: 0.01;
filter: alpha(opacity=1);
}

The change that I need is simply this:
background: #C0C0C0;

Yet I find no place to change this. I can change this for breadcrumbs, TOC entries and Headers in the custom skin packs (.hmskins).

The ideal solution for me would be to have the custom skins at Configuration>Common Properties>Text Variables with NEW options to set the image behavior and colors. These changes might include:
IMG_BORDERCOLOR
IMG_BORDEROPACITY
IMG_BORDERSIZE
IMG_HOVERCOLOR
IMG_HOVEROPACITY
IMG_BACKCOLOR
IMG_FILTERALPHA

I clearly need IMG_BACKCOLOR to be added.

Considering how pervasive my image map use has been, this type of setting should be made available to all.

Joe
User avatar
Tim Green
Site Admin
Posts: 23186
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Default.CSS .hmImageMap a.hmHotspotRect

Unread post by Tim Green »

Hi Joe,

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 :)

Before doing anything else, please make sure that you are using the current version of Help & Manual 7. Since this is a new release, updates are going to be released quite frequently in the first period. You can check your installed version with Help > About. The current version is 7.0.6 Build 3732. If you need to update you can download the latest installer from

http://www.helpandmanual.com/downloads.html?upd

Just install on top of your current version to update.
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.
Joe Caplan
Posts: 7
Joined: Mon Sep 26, 2011 8:57 pm

Re: Default.CSS .hmImageMap a.hmHotspotRect

Unread post by Joe Caplan »

As always, thank you for the prompt reply.
I DID turn off the hover property because it is simply too dark with the #000 setting.

It would work much better with the test tweak that I made to the Default.CSS to see how to control this issue. It can be made to work for my needs if I can get at that setting and I posted my ideas about how that could be made possible.

I have the newest version of the skin-packs and the software.

Thanks again for looking at this.

Joe
User avatar
Tim Green
Site Admin
Posts: 23186
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Default.CSS .hmImageMap a.hmHotspotRect

Unread post by Tim Green »

Hi Joe,

This isn't affected by anything in the skin pack because the CSS for the hover effect is included in the default.css file for the topic content. If you want to make a permanent change there you need to add your own version of the same CSS after Help & Manual's version, that will then just override its settings.

To do this you just need to locate the CSS reference containing the <%STYLESHEET%> variable in the HTML page template in the skin. That is where the reference to the default.css file goes. Then add your own version of the hotspot CSS after that. You can add it inline between <style> ... </style> tags, or as your own CSS file with a reference. If you use your own CSS file add it to the Baggage Files section of the skin, then it will be exported automatically. Remember that spaces and special characters aren't allowed in the file name. 8)
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.
Post Reply