JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<img class="map" src="http://i54.fastpic.ru/big/2013/0228/11/73d7f26fd495e7631003cf6251af2d11.png" alt="" usemap="#mainmap" />
  <map name="mainmap">
      
    <area id="1room" data-areanum="room1" shape="poly"
coords="116, 93, 164, 94, 164, 131, 157, 131, 157, 157, 116, 157" title="1 комната"     data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
          
    <area id="2room" data-areanum="room2" shape="rect"
coords="197, 93, 264, 153" title="2 комната"      data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="3room" data-areanum="room3" shape="rect"
coords="270, 94, 365, 152" title="3 комната"
data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
          
    <area id="4room" data-areanum="room4" shape="rect"
coords="370, 93, 470, 153" title="4 комната"
data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
          
    <area id="5room" data-areanum="room5" shape="rect"
coords="474, 93, 537, 153" title="5 комната"
data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
             
    <area id="6room" data-areanum="room6" shape="poly"
coords="587, 154, 587, 126, 568, 126, 568, 94, 540, 94, 540, 142, 572, 142, 572, 154" title="6 комната"
data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="7room" data-areanum="room7" onclick="ahah_change_index(title)" shape="poly"
coords="629, 155, 629, 107, 623, 107, 623, 94, 572, 94, 572, 124, 591, 125, 591, 155"...

JavaScript

$(function() {
    $(".areas").buttonset();
});

$(function() {
    $('.map').maphilight();

    $('#1room, #2room, #3room, #4room, #5room, #6room, #7room').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var data = $this.mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $this.data('maphilight', data).trigger('alwaysOn.maphilight');
    });
});

$(function() {
    var $area = $('area');
    $area.click(function(){
        var $checkbox = $('#' + $(this).data("areanum"));
        $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });
    $('label').click(function () {
        $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
        return false;
    }); 
});