Fandom Developers Wiki

ImageMapHighlight is based on a script written by קיפודנחש on Wikipedia. It adds highlighting around ImageMap elements, making it easier to tell what is part of what. It also adds a legend below.


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

<div class="imageMapHighlighter">


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"

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

<div class="imageMapHighlighter"


List of JavaScript enhancementsList of CSS enhancementsGlobal Lua ModulesCode Logos
About this image
Text above can be found here (edit)