JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imagePanel">
    <img src="http://www.astralissolutions.com/images/triangle1.png" alt="" class="triangle1" />
    <img src="http://www.astralissolutions.com/images/triangle2.png" alt="" class="triangle2" />
    <img src="http://www.astralissolutions.com/images/blank.gif" alt="" class="imageMap" usemap="#mapOver"/>
    <map id="mapOver" name="mapOver">
        <area id="areaTriangle" shape="poly" coords="25,239,108,99,190,239" href="#" />
    </map>
</div>

CSS

div.imagePanel
{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: LightBlue;
}

div.imagePanel > img
{
    position: absolute;
}

img.triangle1
{
    left: 25px;
    top: 100px;
}

img.triangle2
{
    left: 75px;
    top: 75px;
    display: none;
}

img.imageMap
{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

JavaScript

$("#areaTriangle").hover(function() {
    $("img.triangle2").show();
}, function() {
    $("img.triangle2").hide();
});