JSFiddle - React, Tailwind, and code Playground
HTML
<img id=kaartImageMapBackground src="http://allmotive.eu/images/afbeeldingen/Imagemap/kaart.png" usemap=#kaartImagemap width="353" height="499" alt>
<map id="kaartImageMap" name="kaartImageMap">
<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" alt="Noord-Holland" title="Noord-Holland">
<img id="image-1" class="hover" src="http://allmotive.eu/images/afbeeldingen/Imagemap/1.png" alt="" />
JavaScript
<script type="text/javascript" language="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();
}
});
});
});
</script>