JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="container container_auto_width">
    <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" />
      ...

CSS

#kaart {
    float: left;
    height: 200px;
    width: 50%;
}
#kaart area, #kaart area:active {
    border: medium none !important;
    outline: medium none !important;
}
#kaart img {
    float: left;
    position: absolute;
    overflow:auto;
}
#kaart .hover {
    opacity: 0;
}
#kaart #button-kaart {
    opacity: 0;
}
#provincies {
    float: left;
    height: 499px;
    width: 50%;
}
#provincies .provincie {
    clear: both;
    float: left;
    height: 499px;
    overflow:auto;
}
#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;
}
.container_auto_width {
    width: auto !important;
}
.container {
    width: 50%;
}

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();
            }
        });

    });

});