JSFiddle - React, Tailwind, and code Playground

HTML

<map name="FPMap0" id="FPMap0">
    <area href="#" shape="circle" coords="23, 34, 23" data-agence="Paris" />
    <area href="#" shape="rect" coords="58, 15, 128, 73" data-agence="Lille" />
    <area href="#" shape="rect" coords="137, 16, 207, 77" data-agence="Douai" />
</map>
<img src="http://www.developpez.net/template/images/logo.png" usemap="#FPMap0" width="216" height="90" />
<div id="tel_agence"></div>
<div id="fax_agence"></div>

JavaScript

var monJSON= {"Paris": {"tel":"tel paris",
               "fax":"fax Paris",
               "mail": "mail Paris",
               "adr":"Adr PAris",
                "hor":" Horaires Paris....."},    
"Lille": {"tel":"tel Lille",
               "fax":"fax Lille",
               "mail": "mail Lille",
               "adr":"Adr Lille",
                "hor":" Horaires Lille"},     
"Douai": {"tel":"tel Douai",
               "fax":"fax Douais",
               "mail": "mail Douais",
               "adr":"Adr Douais",
                "hor":" Horiares Douais"}
             }

$( function(){
    
    $('#FPMap0 area').on ('click', function(e){
        e.preventDefault();
        survol=$(this).data('agence');
        $('#tel_agence').html(monJSON[survol].tel);
        $('#fax_agence').html(monJSON[survol].tel);

    })
  
})