JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
<div style="width:1110px;"> 
<div style="border: 1px solid black; float:left; height:700px; width:140px;">
    <br><a href="#" id="mf1">Manufacturer #01</a>
    <br><a href="#" id="mf2">Manufacturer #2</a>
</div>
        <div style="float:right;">
<h1>The United States of America</h1>
            <p>This map generated from <a href="http://en.wikipedia.org/wiki/Image:Map_of_USA_with_state_names.svg">"Map of USA with state names.svg"</a>.<br>jQuery plugin and map example from <a href="http://davidlynch.org/projects/maphilight/docs/demo_usa.html">http://davidlynch.org/projects/maphilight/docs/demo_usa.html</a></p>
<img class="map" fillColor='FFFFFF' src="http://davidlynch.org/projects/maphilight/docs/demo_usa.png" width="960" height="593" usemap="#usa">
<map name="usa">
<area href="#" title="SC" shape="poly" coords="735,418, 734,419, 731,418, 731,416, 729,413, 727,411, 725,410, 723,405, 720,399, 716,398, 714,396, 713,393, 711,391, 709,390, 707,387, 704,385, 699,383, 699,382, 697,379, 696,378, 693,373, 690,373, 686,371, 684,369, 684,368, 685,366, 687,365, 687,363, 693,360, 701,356, 708,355, 724,355, 727,356, 728,360, 732,359, 745,358, 747,358, 760,366, 769,374, 764,379, 762,385, 761,391, 759,392, 758,394, 756,395, 754,398, 751,401, 749,404, 748,405, 744,408, 741,409, 742,412, 737,417, 735,418">
<area href="#" title="HI" shape="poly" coords="225,521, 227,518, 229,517, 229,518, 227,521, 225,521">
<area href="#" title="HI" shape="poly" coords="235,518, 241,520, 243,520, 244,516, 244,513, 240,512, 236,514, 235,518">
<area href="#" title="HI" shape="poly" coords="265,527, 268,533, 270,532, 272,532, 273,533, 277,533, 277,531, 275,530, 273,526, 271,523, 265,526, 265,527">
<area href="#" title="HI" shape="poly" coords="284,536, 285,534, 290,535, 290,534, 296,535, 296,536, 294,538, 289,537, 284,536">
<area href="#" title="HI" shape="poly" coords="289,541, 291,545, 294,543, 294,542,...

JavaScript

$.fn.maphilight.defaults = {
	fill: true,
	fillColor: false,
	fillOpacity: 0.5,
	stroke: true,
	strokeColor: '000000',
	strokeOpacity: 1,
	strokeWidth: 1,
	fade: true,
	alwaysOn: false,
	neverOn: false,
	groupBy: false,
	wrapClass: true,
	shadow: false,
	shadowX: 0,
	shadowY: 0,
	shadowRadius: 6,
	shadowColor: '000000',
	shadowOpacity: 0.8,
	shadowPosition: 'outside',
	shadowFrom: false
}

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

// mf1: Indiana, Michigan, Ohio
$('#mf1').mouseover(function(){
    $('area[title="IN"],area[title="MI"],area[title="OH"]').mouseover();
}).mouseout(function(){
    $('area[title="IN"],area[title="MI"],area[title="OH"]').mouseout();
}).click(function(e) { e.preventDefault(); });

// mf2: Indiana, Kentucky, Ohio (just to use a different example)
$('#mf2').mouseover(function(){
    $('area[title="IN"],area[title="KY"],area[title="OH"]').mouseover();
}).mouseout(function(){
    $('area[title="IN"],area[title="KY"],area[title="OH"]').mouseout();
}).click(function(e) { e.preventDefault(); });