JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div id="pic">
    
    <img id="hovered" src="" usemap="#Map" width="600" height="600" />
    <map id="map" name="Map">
        <area href="#" onmouseover="swapPic(2)" onmouseout="swapPic(0)" onClick="clickPic(5)" shape="polygon" coords="243,285,249,294,230,310,208,303,227,285"/>
        <area href="#" onmouseover="swapPic(3)" onmouseout="swapPic(0)" onClick="clickPic(5)" shape="polygon" coords="247,378,260,395,318,383,309,368"/>
        <area href="#" onmouseover="swapPic(4)" onmouseout="swapPic(0)" onClick="clickPic(5)" shape="polygon" coords="186,397,194,426,208,424,213,430,325,404,321,385,263,396,246,386,189,392"/>
    </map>
    
    <img id="staged" src="" usemap="#Map" width="600" height="600" />
</div>

CSS

img {
    border:0;
}

*:focus
{
    outline: none;
    outline-width: 0;
}

#pic {
    height: auto;
    width: auto;
    background-image: url('http://test.duude.fr/building/bg.png');
    background-repeat: no-repeat;
    position: relative;
}
#staged, #hovered {
    position: absolute;
}

JavaScript

function swapPic(nr){
    document.getElementById('hovered').src = 'http://test.duude.fr/building/'+nr+'.png';
}

clickPic(0);

function clickPic(nr){
    document.getElementById('staged').src = 'http://test.duude.fr/building/'+nr+'.png';
}

function clickOff(){
    insideImg = false;
    document.getElementById('hovered').src = '';
}