JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<!-- INSERT THE PICTURE -->
<img name="garfio" id="garfio" src="http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/base.png" width="655" height="338" border="0"  usemap="#m_garfio" alt="" />

<!-- CREATE THE MAP -->
<map name="m_garfio" id="m_garfio">

    <area shape="rect" id="fuente" coords="570,323,649,338" 
    href="" alt="" />
    
    <area shape="rect" id="garfio4" coords="592,268,623,300" 
    onMouseOver="garfio4H()" onMouseOut="original()" href="" alt="" />
    
    <area shape="rect"  id="garfio3" coords="561,268,592,300" 
    onMouseOver="garfio3H()" onMouseOut="original()" href="" alt="" />
    
    <area shape="rect"  id="garfio2" coords="529,268,560,300" 
    onMouseOver="garfio2H()" onMouseOut="original()" href="" alt="" />
    
    <area shape="rect"  id="garfio2" coords="496,268,527,300" 
    onMouseOver="garfio1H()" onMouseOut="original()" href="" alt="" />

    <area shape="poly" id="left" coords="190,0,190,338,0,338,0,207,7,207,7,211,8,214,9,217,11,219,13,222,16,224,20,226,24,228,29,230,34,232,40,234,44,235,49,237,53,237,67,238,86,237,95,238,101,236,109,235,116,232,122,230,129,227,135,223,140,219,143,213,144,209,144,204,144,200,140,197,136,193,132,191,138,181,138,177,136,176,133,176,129,176,115,183,114,185,111,183,104,180,97,179,90,179,83,178,73,178,60,178,54,179,45,180,41,180,34,182,27,185,21,188,17,191,14,194,8,201,8,206,0,208,0,169,6,169,6,173,8,175,9,179,10,181,14,185,17,187,19,188,21,188,27,185,34,183,40,180,46,180,49,179,50,177,52,173,52,170,52,165,52,161,50,157,48,154,44,150,41,148,37,146,32,144,28,144,24,144,20,145,17,147,14,149,11,153,8,158,7,161,6,165,6,169,0,169,0,0,190,0" 
    onMouseOver="leftH()" onMouseOut="original()" alt="" />

    <area shape="poly" id="bocadilla"...

JavaScript

//PRELOAD THE SOURCEIMAGE
base = new Image(655, 338);
base.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/base.png";


//PRELOAD THE IMAGES FOR MOUSEOVER
left = new Image(655, 338)
left.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/base_iz.png";

right = new Image(655, 338)
right.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/base_de.png";

left_with_yellow_cloud = new Image(655, 338)
left_with_yellow_cloud.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/cloud_left.png";

right_with_yellow_cloud = new Image(655, 338)
right_with_yellow_cloud.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/cloud_right.png";

left = new Image(655, 338)
left.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/base_iz.png";

cuenta = new Image(655, 338)
cuenta.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/cuentame_h.png";

garfio1 = new Image(655, 338)
garfio1.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/garfio1_h.png";

garfio2 = new Image(655, 338)
garfio2.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/garfio2_h.png";

garfio3 = new Image(655, 338)
garfio3.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/garfio3_h.png";

garfio4 = new Image(655, 338)
garfio4.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/garfio4_h.png";


//PRELOAD IMAGES FOR CLICK
cuentaBoca = new Image(655, 338)
cuentaBoca.src = "http://www.fonag.org.ec/inicio/images/Slide/aprender_jugando/agua/cuentame_bocadilla.png";


//JS FUNCTION FOR MOUSEOVERFUNCTION H=HIGHLIGHT
function original() {
    document.getElementById('garfio').src = base.src;
    return true;
}

function leftH() {
    document.getElementById('garfio').src = left.src;
    return true;
}

function rightH() {
    document.getElementById('garfio').src = right.src;
    return...