Image Maps with Hover States / Mouseover Effects in Robohelp 7

Report · Dec 06, 2008

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

Report · Dec 08, 2008

Mike,

I don't know what version you are using but in early versions of RoboHelp you could simply right click on an image and get a popup that allowed you to select "image map." Then the HotSpot editor would open up and you can drag and drop on the image to get your coordinates and setup your image map.

I'm not sure what you are trying to do when you say "the area tag cannot be formatted using CSS." What kind of formatting do you want on a piece of an image?

John

Report · Jan 20, 2009

John,

the Robohelp built-in editor messes the code up, so I never use it. However, not even Dreamweaver supports interactive effects in image maps. I wanted the hot spots to hover like hyperlinks. Seems to me much more convenient for the user.

quote:

I'm not sure what you are trying to do when you say "the area tag cannot be formatted using CSS." What kind of formatting do you want on a piece of an image?

Unfortunately, you cannot use the hover attribute in css for the <area href> tag. That is, why you need a more complicated solution for interactive hot spots in image maps.

My first solution had some flaws. Eventually, I found this smart piece of Javascript:

http://www.netzgesta.de/mapper/

This really did the trick and works great. The script is free of charge for non-commercial use only.

Mike