Image Maps with Hover States / Mouseover Effects in Robohelp 7

Image Maps are images with hot spot areas that work like hyperlinks. They are easy to use in Robohelp. Editors like Fast Image-Map 2 do the trick in minutes. The code is like this:

<map name="test" id="test">
<area shape="rect" coords="192,88,470,121" href="#device_name" />
<area shape="rect" coords="535,87,618,119" href="#enable_check_box" />
</map>
<img src="image.gif" usemap="#test" />


However, the <area> tag cannot be formatted using CSS.

I've tested several solutions using unordered lists and/or javascript. Sometimes they worked in the preview window but not in the compiled CHM or HTM file. Sometimes they didn't work at all.

The following technique ist old-fashioned but works nicely in Robohelp 7. Note: Robohelp 6 does not fully support background images.

1. Put IDs to your links and place them inside a parent element. Here it is a DIV:

<div id="menu">
<a id="device-name" title="Device Name" href="#device_name" style="width:279px; height:33px; top:89px; left:192px;"><em>Device Name</em></a>
</div>

You can put the coordinates and dimensions into a CSS stylesheet or the topic file.

How do you get the precise coordinates?

Open the background image in Photoshop or in an editor of your choice. Make a selection where you want to place the hot spot. Click "Transform". Now you can see the coordinates in the info palette.

Copy the selection and open a new document. For the height use 2x the height of the selection. Copy the selection 2x in your new document and place both layers exactly. Now add the desired hover effects to the bottom image. Save the file as a gif. The "height" dimension of the link is the height of the image /2.

CSS:

#menu {
background-image: url(image.gif);
background-repeat:no-repeat;
background-position:0 0;
height: 549px;
width: 643px;}

#menu a,{
text-decoration: none;
position:relative;}

#menu a em {
visibility: hidden;}

a#device-name {
background:url(selection.gif) top no-repeat;}

a#device-name:hover {
border: none;
background-position:bottom;}


#menu = Dimensions and background image of the image map.
#menu = The hyperlinks (hot spots). The position ist set to "relative" because the links are placed into a parent element.
#menu a em = Hide the links.
a#device-name = Set the background image for the hot spots. The links have to be placed precisely!
a#device-name:hover = The hover state.

Works nicely, is stable and easily customizable. However, it takes some time to prepare the images.

If you have something better, let me know!

Sorry for my english!

Mike