JSFiddle - React, Tailwind, and code Playground

HTML

Instructions: Mouse over computer's monitor to see hidden DIV
<!--<img src="http://www.proprofs.com/quiz-school/upload/yuiupload/2014513384.jpg" width="400" height="400" />-->
<div id="imagemap">
    <img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" />
    <map name="Map">
        <area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" />
        <area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" />
        <area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" />
    </map>
    <p>
        <div id="myDiv">This DIV hidden unless hover over the computer's monitor</div>
    </p>
</div>
<!-- Yellow DIV ID numbers overlaid on top of computer components -->
<div id="num_cust1">1</div>
<div id="num_cust2">2</div>
<div id="num_cust3">3</div>

CSS

#num_cust1 {
    padding: 10px;
    background-color:yellow;
    position:absolute;
    top:60px;
    left:180px;
}
#num_cust2 {
    padding: 10px;
    background-color:yellow;
    position:absolute;
    top:60px;
    left:40px;
}
#num_cust3 {
    padding: 10px;
    background-color:yellow;
    position:absolute;
    top:160px;
    left:180px;
}
#myDiv {
    display:none;
    width:50%;
    height:50px;
    padding: 10px;
    background-color:skyblue;
}

JavaScript

function hovIn() {
    var areaID = $(this).attr('id');
    //alert('['+areaID+']');
    if (areaID == 'CUST_1') {
        $('#myDiv').show();
    }
}

function hovOut() {
    $('#myDiv').hide();
}

$('map area').hover(hovIn, hovOut);