Cant hide images after applying maphilight

[jtoverka]

Attached is my code below.
Without maphilight - On startup, only the first image is shown. When I click on the area, the image disappears and a new image appears with it's own mapping.

The only problem with that is, no high lights, which is where maphilight comes in.

When I apply that here, On startup the first image is shown. When I hover over the area, the high light appears as expected. However, when I click on it, the first image is still there and the second image appears below it.

How can we fix this?

`

<title>MCP7 Photo Documentation</title> <Style> body{ display: flex; align-items: center; justify-content: center; background-color: #000000; } </Style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="./jquery.maphilight.js"></script> <script type="text/javascript"> function activate(a){ // Hide all images var elements = $('.map'); for (let i = 0; i < elements.length; i++){ elements[i].hidden = true; }

		// Show one image
		document.getElementById(a).hidden = false;
		$(document.getElementById(a)).maphilight({wrapClass: false});
	};
	function hideAll(){
		$('.map').maphilight({
			alwaysOn: false,
			neverOn: true,
			wrapClass: false,
		});
	};
	function showAll(){
		$('.map').maphilight({
			neverOn: false,
			alwaysOn: true,
			wrapClass: false,
		});
	};
	function init(){
		$('.map').maphilight();
	};
</script>

`