JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carte1"></div>
<div id="carte2"></div>

<div id="tel">v</div>
<div id="fax">v</div>
<div id="mail">v</div>
<div id="adr">v</div>
<div id="hor">v</div>

CSS

#carte1 {
    background-image: url('http://demogeoks.fr/leclercvdef/wp-content/uploads/2015/01/france.jpg');
    width:433px;
    height:438px;
    display: inline-block;
    float: left;
}
#carte2 {
    background-image: url('http://demogeoks.fr/leclercvdef/wp-content/uploads/2015/01/npdc.jpg');
    width:527px;
    height:438px;
    display: inline-block;
}
.agence {
    background-image: url('http://demogeoks.fr/leclercvdef/wp-content/uploads/2015/01/icon-agence3.png');
    cursor: pointer;
    background-position: bottom;
    width: 35px;
    height: 41px;
}
.sel {
    background-position: top;
}
#tel, #fax, #mail, #adr, #hor {
    display: inline-block;
    width: 35px;
    height 41px;
    border: solid 1px silver;
}
.ville1 {
	cursor: pointer;
}
.ville1 .curseur {
	display:block;
	position: absolute;
	width: 35px;
	height: 41px;
	background-image: url('http://demogeoks.fr/leclercvdef/wp-content/uploads/2015/01/icon-agence3.png');
	background-position: bottom;
}
.ville1 p {
	background-color: white;
    border: 2px solid #005d92;
    color: #005d92;
    display: inline-block;
    font-size: 15px;
	margin: 5px 0 0 18px;
    padding: 0 10px 0 20px;
    text-transform: uppercase;
}
.ville2 {
	cursor: pointer;
}
.ville2 .curseur {
	display:block;
	position: absolute;
	width: 35px;
	height: 41px;
	background-image: url('http://demogeoks.fr/leclercvdef/wp-content/uploads/2015/01/icon-agence3.png');
	background-position: top;
}
.ville2 p {
	background-color: #005d92;
    border: 2px solid #005d92;
    color: white;
    display: inline-block;
    font-size: 15px;
	margin: 5px 0 0 18px;
    padding: 0 10px 0 20px;
    text-transform: uppercase;
}

JavaScript

$(function () {
    var monJSON = {
        "Paris": {
            "tel": "tel paris",
                "fax": "fax Paris",
                "mail": "mail Paris",
                "adr": "Adr Paris",
                "hor": " Horaires Paris",
                "coordx": "218",
                "coordy": "85",
                "coordr": "10"
        },
            "Lille": {
            "tel": "tel Lille",
                "fax": "fax Lille",
                "mail": "mail Lille",
                "adr": "Adr Lille",
                "hor": " Horaires Lille",
                "coordx": "237",
                "coordy": "5",
                "coordr": "10"
        },
            "Amiens": {
            "tel": "tel Amiens",
                "fax": "fax Amiens",
                "mail": "mail Amiens",
                "adr": "Adr Amiens",
                "hor": " Horiares Amiens",
                "coordx": "218",
                "coordy": "46",
                "coordr": "10"
        },
            "Cannes": {
            "tel": "tel Cannes",
                "fax": "fax Cannes",
                "mail": "mail Cannes",
                "adr": "Adr Cannes",
                "hor": " Horiares Cannes",
                "coordx": "362",
                "coordy": "325",
                "coordr": "10"
        }
    };

    var monJSON2={
        "Arras": {
            "tel": "tel Arras",
                "fax": "fax Arras",
                "mail": "mail Arras",
                "adr": "Adr Arras",
                "hor": " Horiares Arras",
                "coordx": "660",
                "coordy": "295",
                "coordr": "10"
        },
            "Valenciennes": {
            "tel": "tel Valenciennes",
                "fax": "fax Valenciennes",
                "mail": "mail Valenciennes",
                "adr": "Adr Valenciennes",
                "hor": " Horiares Valenciennes",
                "coordx": "840",
                "coordy": "270",
                "coordr": "10"
        },
   ...