Fandom Developers Wiki
Advertisement

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.

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

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