Edit online

Image Maps (HTML)

The HTML <map> element is supported by the processor. It allows you to define a set of shapes over your original image and each shape behaves like a link pointing to a part of your publication or to an external resource.

Start by specifying the width and height of your image using attributes. The size and coordinates are in pixels. The size you define here is very important when you specify the coordinates of the shapes. You can use any CSS unit, including percents. The percents are solved relative to the image size and represent a way of creating "responsive" image maps (reusing the map on the same image with different sizes depending on the position in the document). If you are using the same customization CSS for HTML web output as well, make sure you use only pixels as some of the browsers do not support other units.
```
<img src="engine-picture.png" width="400" height="300">
```

Create a map element and link the image to the map:

<img src="engine-picture.png" width="400" height="300" usemap="mapID">
<map name="mapID">...</map>

In the map element, add areas, each with a shape and a set of coordinates:

<area shape="rect" coords="100,70,120,90"
          href="#radiator" alt="Radiator" />
....

Verify how the shapes look in the output. You can make the shapes visible using one of these methods:
- Using the -show-image-map-area-shapes and -show-image-map-area-numbers command-line arguments.
- 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;
	fill-opacity: 0.5;
	stroke-opacity: 0.5;
}
.image-map-number-text {
	visibility: visible;	
}
.image-map-number {
	fill: yellow;
	fill-opacity: 0.4;	
	stroke-opacity: 0.7;
}
```