JSFiddle - React, Tailwind, and code Playground

HTML

<div id="kaart">
	<img src="http://allmotive.eu/images/afbeeldingen/Imagemap/kaart.png" />
    <img id="image-1" class="hover current" src="http://allmotive.eu/images/afbeeldingen/Imagemap/1.png" /><img id="image-2" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/2.png" /><img id="image-3" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/3.png" /><img id="image-4" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/4.png" /><img id="image-5" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/5.png" /><img id="image-6" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/6.png" /><img id="image-7" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/7.png" /><img id="image-8" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/8.png" /><img id="image-9" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/9.png" /><img id="image-10" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/10.png" /><img id="image-11" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/11.png" /><img id="image-12" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/12.png" /><img id="button-kaart" src="http://allmotive.eu/images/afbeeldingen/Imagemap/kaart.png" width="353" height="499" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="153,150,157,154,158,162,168,162,185,155,192,156,200,167,204,159,208,155,187,146,200,125,193,116,208,117,218,102,174,40,161,64" href="?id=1" alt="Noord-Holland" hover="1" />
  <area shape="poly" coords="176,36,185,47,212,36,214,88,259,89,273,81,292,71,286,57,272,50,283,28,271,16,253,4,205,12" href="?id=2" alt="Friesland" hover="2" />
  <area shape="poly" coords="265,4,276,15,283,25,283,33,278,48,287,55,292,43,304,42,314,51,340,77,346,85,351,71,349,30,322,4" href="?id=3" alt="Groningen" hover="3" />
  <area shape="poly"...

CSS

#kaart {
    float: left;
    height: 499px;
    overflow: hidden;
    width: 50%;
}
#kaart area, #kaart area:active {
    border: medium none !important;
    outline: medium none !important;
}
#kaart img {
    float: left;
    position: absolute;
}
#kaart .hover {
    opacity: 0;
}
#kaart #button-kaart {
    opacity: 0;
}
#provincies {
    float: left;
    height: 499px;
    overflow: hidden;
    width: 50%;
}
#provincies .provincie {
    clear: both;
    float: left;
    height: 499px;
}
#provincies li {
    list-style: none outside none;
    padding: 8px 0;
}
#provincies ul {
    margin: 0;
}
#provincies a {
    color: #8D8D8D;
    text-decoration: underline;
}
#provincies a:hover {
    color: #666666;
}
#kaart .current {
    opacity: 1 !important;
}

JavaScript

jQuery(document).ready(function() {
	
	jQuery('body').data('provincies', jQuery('#provincies').html());
	
	jQuery('#provincies .provincie').each(function(){
		if(!jQuery(this).hasClass('current'))
		{
			jQuery(this).remove();
		}
	});	

	jQuery('#Map area').hover(
	function(){
		jQuery('#image-'+jQuery(this).attr('hover')).fadeTo('fast', 0.8, function() {
			// Animation complete.
     	}); 
	 },
	function(){
		jQuery('#image-'+jQuery(this).attr('hover')).fadeTo('fast', 0, function() {
			// Animation complete.
     	}); 
    });

   	jQuery('#Map area').click(
	function(e){
		e.preventDefault();
		
		jQuery('#provincies').html(jQuery('body').data('provincies'));
		
		jQuery('.current').removeClass('current'); 
			
		jQuery('#image-'+jQuery(this).attr('hover')).addClass('current'); 
		jQuery('#prov-'+jQuery(this).attr('hover')).addClass('current'); 
		
		jQuery('#provincies .provincie').each(function(){
			if(!jQuery(this).hasClass('current'))
			{
				jQuery(this).remove();
			}
		});
		
    });

});