JSFiddle - React, Tailwind, and code Playground

by Grigur

HTML

<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<input type="text" id="search">
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find">

<div id="content">
    <p><img id="imgmap" src="http://webfro.gs/south/kb2/images/bunny.jpg" width="663" height="663" usemap="#Map" border="0" />
      <map name="Map" id="Map">
        <area data-text="office" shape="circle" coords="504,124,94" href="#" />
        <area data-text="cubicle" shape="circle" coords="168,150,97" href="#" />
        <area data-text="fire exit" shape="circle" coords="326,326,22" href="#" />
        <area data-text="main exit" shape="circle" coords="378,589,48" href="#" />
      </map>
    </p>


	<div class="office">office</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="bathroom">bathroom</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="cubicle">cube</div>
    <div class="bathroom">bathroom</div>    
	<div class="office">office</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="fire-exit">fire exit</div>
    <div class="cubicle">cube</div>
	<div class="office">office</div>
    <div class="cubicle">cube</div>
    <div class="main-exit">main exit</div>
	<div class="office">office</div>
    <div class="cubicle">cube</div>

</div>

CSS

.office { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.cubicle { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.bathroom { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.main-exit { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.fire-exit { width: 50px; height: 50px; border: 1px solid black; position: relative; }

.highlight { background-color: yellow; }

JavaScript

function doSearch(text) {
    $('#content div').removeClass('highlight');
    $('#content div:contains(' + text + ')').addClass('highlight');
    
    $('#Map area').mouseout(); 
    $('#Map area[data-text*="' + text + '"]').mouseover(); 
}
$(function() {
    $('#imgmap').maphilight({ stroke: false, fillColor: "ffff00", fillOpacity: 0.6 });
});