Image maps

The imagemap element is used to define image maps (hotspot graphics) in DITA topics.

Image maps, also known as hotspot graphics and segmented hypergraphics, can be defined in DITA content using the imagemap element and its child elements. An imagemap element is applied to a standard image element. Obviously, when a topic which includes an image map is output to paper, the linking function will be lost; however, the static image will be rendered. You may want to use conditional processing so that image map graphics are only output to online delivery formats.

The DITA imagemap element is modelled on the HTML 4.1 map element, but uses elements where HTML uses attributes.

Table 1. Comparison of HTML and DITA image map element names
DITA mark-up	HTML mark-up
imagemap element	map element
image element (inside imagemap)	img element (outside map)
area element	area element
shape element	shape attribute of area element
coords element	coords attribute of area element
href attribute of xref element	href attribute of area element
text content of xref element	alt attribute of area element

The imagemap element has two child elements: an image element and an area element. The image element defines the image to which the clickable hotspot areas will be overlaid. The area element contains shape, coords, and xref elements which specify the hotspot co-ordinates and link targets.

An example of the DITA code to place an image map in a topic is:

<imagemap>
  <image href="../images/ej25.png" />
  <area>
    <shape>rect</shape>
    <coords>0,10,60,75</coords>
    <xref href="c_intercooler.dita">Intercooler</xref>
  </area>
  <area>
    <shape>circle</shape>
    <coords>30,120,30</coords>
    <xref href="c_expansion.dita">Expansion tank</xref>
  </area>
</imagemap>

Note:

If your DITA authoring tool does not provide good support for creating image maps, you can alternatively use a Web authoring tool to define the map in an HTML page, change the HTML attributes to DITA elements, and then copy the resultant code into your DITA topic.

Image maps are not permitted within a figure (fig) structure.