How to Use Image Maps

To use the DITA <imagemap> element in a PDF transformation, follow this procedure:

Start by determining the width and height of your image in CSS pixels and specify it on the <image> element using the @width and @height attributes.
Notes:
- A CSS pixel is 1/96 in, so if the image is created at a 96dpi resolution, one dot from the image is one pixel in the CSS space. If your image is displayed at another resolution, then it is adjusted accordingly (for example, 192dpi results in two dots from the image being equal to one pixel in the CSS space).
- You can use other CSS units, including percentages. The percentages are solved relative to the image size and represent a way of creating responsive image maps.
Warning:
If you publish the content for both PDF and HTML web output, make sure you only use pixels, as some browsers only support these units.
Example:
Suppose you have a large image that is 6400x4800 dots, but you want to make it fit in a box of 640x480 CSS pixels. In the following snippet, this is done by specifying the width and height attributes. The areas must use coordinates relative to these values.
```
  <imagemap>
    <image href="../images/Gear_pump_exploded.png"
        id="gear_pump_exploded"
        width="640"
        height="480">
        <alt>Gear Pump</alt>
    </image>
</imagemap>
```
In the map element, add areas (each with a shape and a set of coordinates):
```
  <imagemap>
    <image ...> ... </image>
    <area>
        <shape>circle</shape>
        <coords>172, 265, 14</coords>
        <xref
            href="parts/bushings.dita#bushings_topic/bushings"
            format="dita">Bushings</xref>
    </area>
    <area>
        <shape>poly</shape>
        <coords>568, 81, 576, 103, 468, 152, 455, 130</coords>
        <xref
            href="parts/drive-shaft.dita#drive_shaft_topic/drive_shaft"
            format="dita">Drive Shaft</xref>
    </area>
    ....
 </imagemap
```
The type of areas are the ones defined in the HTML standard: circle, poly, rect, default. For more details, see: https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element.
Warning:
Areas coordinates are relative the image box and are not affected by the image resizing (change in image width/height or scaling), accordingly to the HTML specs:
For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes - CSS browsers map those attributes to the aforementioned CSS properties).
Tip:
Adding the @scale attribute on the <imagemap> element will scale both the image and areas.
Verify how the shapes look in the output. You can make the shapes visible by using one of the following methods:
- Using the show.image.map.area.numbers and show.image.map.area.shapes transformation parameters.
- Adding a CSS snippet to your customization. The shapes have the image-map-shape class, the bullet around the image map number (image-map-number), and the text inside the bullet (image-map-number-text). To make them translucent yellow:
```
.image-map-shape {
  fill: yellow;
  stroke: orange;
  fill-opacity: 0.3;
  stroke-opacity: 0.7;
}
.image-map-number-text {
  visibility: visible;
  stroke: red;

}
.image-map-number {
  fill: yellow;
  fill-opacity: 1;
}
```
  Remember:
  Make sure the use.css.for.embedded.svg parameter is set to 'yes' (it is by default).

Tip:

An <svg> with links (<a>) can be used as an alternative to the DITA <imagemap> element. Make sure that each link is a relative URI to an ID inside the publication content.

How to Hide the Image Map Links List

Below every image map, a list of links that point to the image map targets is displayed. This list can be hidden from the final output by using the following CSS selector:

.imagemap--areas {
  display: none;
}