Installation

To enable highlighting for an ImageMap, surround it in a div element with the imageMapHighlighter class.

<div class="imageMapHighlighter">
	<imagemap>...</imagemap>
</div>

Configuration

Customization can be applied to all highlighted ImageMaps using CSS variables on the root element or any parent of the div (allowing CSS to cascade), like this:

:root {
	--imagemaphighlight-fill: rgba(0, 0, 0, 0.35); /* the background of highlighted areas on the ImageMap, should be transparent */
	--imagemaphighlight-stroke: #FFC500; /* the stroke around highlighted areas on the ImageMap */
	--imagemaphighlight-stroke-width: 2; /* the width of the stroke around highlighted areas on the ImageMap */
	--imagemaphighlight-legend-highlight: rgba(255, 255, 255, 0.1); /* the background of highlighted areas in the legend */
}

Some customization can also be applied to a specific ImageMap, by adding data attributes to the highlight wrapper.

<div class="imageMapHighlighter"
	data-fill="#0001"
	data-stroke="blue"
>

The legend can be disabled for a specific ImageMap by setting data-legend to false or 0.

<div class="imageMapHighlighter"
	data-legend="false"
>

Example