JSFiddle - React, Tailwind, and code Playground

by SiCurious

HTML

<body>

<img src="http://findicons.com/files/icons/1035/human_o2/128/x_office_calendar.png" width="300" alt="calendar" USEMAP="#feb1050">
<map id="feb1050" name="feb1050">
  <area shape="rect" alt="" coords="80,110,100,130" HREF="http://findicons.com/files/icons/1035/human_o2/128/x_office_calendar.png" onMouseOver="pop(event);"  onMouseOut="pop(event);"/>
</map>

<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="http://findicons.com/files/icons/1620/crystal_project/32/agt_action_success.png" alt="calendar" /> 
<br />Click Here To RSVP!</div>
    
</body>

CSS

.popup {
        position:absolute;
        z-index:20000;
        top: 0px;
        left: 0px;
        display: none;
		background-color:#dd8;
		border: 1px solid;
}

JavaScript

function pop(e) { //function called by first hotspot

    Image.src = "http://findicons.com/files/icons/1620/crystal_project/32/agt_action_success.png" //event image
    document.popup1.src = Image.src; 
    var thing = document.getElementById("popup");

    thing.style.left = e.clientX + 'px';
    thing.style.top = e.clientY  + 'px';
    $("#popup").toggle();

    return true;
 }