Normally, the “hot areas” drawn using the image map editor are not visible to the user. For example, if you convert a DITA
imagemap to XHTML, the Web browser will simply display the image as is. The user will understand that the image has “hot areas” only when she/he'll hover the mouse pointer above these “hot areas”.
However, in some cases, making the “hot areas” visible and/or giving them numbers so they can be referred to by number may be useful. This can be done by clicking the "Create and use an annotated variant of image file" button and checking the " " and/or " " checkboxes.
Figure 9.26. The popup menu displayed by clicking the "Create and use an annotated variant of image file" toolbar button
The other entries of the above menu let the user customize the appearance of the visual marks she/he has chosen to add to the image. In the following figure, the user has chosen yellow on purple numbers using a 9pt font size and thick, dashed, purple highlights.
Note that these visual marks are not rendered by the image map editor itself, as this would make drawing new shapes more difficult. Instead, it works as follows: after checking the "SVG image embedding the original image and adding the chosen visual marks above this image is automatically generated." and/or " " checkboxes and clicking , an
For example, if a DITA
<image href="images/imagemapworld.jpg">, this facility automatically generates SVG file "
imagemapworld.jpg.marked.svg" and replaces the value of the
href attribute by
Note that the format of the image to be annotated must be GIF, PNG, JPEG or SVG, otherwise the "Create and use an annotated variant of image file" toolbar button is disabled (grayed).
“Dead areas”, that is, areas having no link targets, are ignored by this facility.
Specify an image file, for example, by right-clicking the image placeholder and then selecting "".
Right-click anywhere inside the newly inserted
imageobjectco element and select " ".
Use the image map editor to add “hot areas” to your image. Do not bother setting the links of any of these hot areas because there is a way to do this automatically.
callout per hot area to the
calloutlist. The number and order of the callouts must match the number and order of the hot areas because this is how the correspondence between a hot area and a
callout is established. Do not bother setting the links of any of these callouts because there is a way to do this automatically.
Now that the Create and use an annotated variant of image file" facility.→ command has automatically added link targets to all areas, you may use the "