Bonjour à tous,
Dernière ligne droite pour la réussite de mon code, enfin je crois !
Suite aux échanges de NoSmoking et ASCIIDEFOND, que je remercie, j'ai de nouveau besoin d'aide pour ce bout de code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
           $("#MapWorld area").remove();
 
            $("#BtnRechCarte").click(function () {
 
                $("#MapWorld area").remove();
 
                if ($('#ChoixMois')[0].selectedIndex <= 0) { $("#MapWorld area").remove(); document.getElementById("ChoixMois").focus(); return false; }
                if ($('#ChoixTemp')[0].selectedIndex <= 0) { $("#MapWorld area").remove(); document.getElementById("ChoixTemp").focus(); return false; }
                var SelectMois = $('#ChoixMois option:selected').val();
                var SelectTemp = $('#ChoixTemp option:selected').val();
 
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("AffichageShape")',
                    async: false,
                    dataType: "json",
                    data: { Mois: SelectMois, Temp: SelectTemp },
                    success: function (data) {
                        var items = '';
                        $("#MapWorld area").remove();
                        $.each(data, function (i, item) {
 
                            $('#MapWorld').append(`<area shape="${item.ShapeDest}" coords="${item.CoordsDest}" href="#" alt="${item.Destination}" title="${item.Destination}" >`);
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(chr.responseText);
                    }
                });
 
                $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
 
 
            });
Dans la console j'ai bien le code area complet, MAIS !

Je souhaiterais afficher un pays à l'aide du code ci-dessous :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
               $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
Mais cela ne fonctionne pas.
Si je copie depuis la console le code Area ainsi obtenu et que je le colle directement dans la balise map comme ceci :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
            <div id="IdCarte">
                <div id="DivMapWorld">
                    <img id="IdWorld_Map" usemap="#MapWorld" width="10000" height="5280" title="Map monde en français" class="img-fluid map" src="~/Content/Images/World_Map.jpg" />
                    <map id="MapWorld" name="MapWorld">
 
                        <area shape="poly" coords="5088,3415,5108,3450,5099,3465,5101,3474,5133,3472,5137,3465,5161,3445,5166,3427,5182,3424,5191,3433,5212,3444,5239,3437,5248,3410,5264,3407,5273,3396,5279,3377,5283,3375,5297,3360,5317,3339,5335,3334,5346,3322,5379,3329,5388,3328,5402,3337,5409,3374,5415,3394,5416,3450,5417,3453,5416,3460,5418,3476,5425,3477,5438,3474,5430,3509,5422,3530,5394,3556,5376,3578,5359,3610,5344,3622,5331,3635,5312,3657,5264,3690,5253,3697,5233,3699,5222,3705,5205,3711,5171,3709,5167,3711,5151,3708,5134,3711,5126,3719,5104,3722,5072,3735,5065,3731,5055,3721,5044,3716,5036,3709,5032,3713,5030,3708,5034,3692,5021,3671,5022,3668,5028,3668,5035,3660,5032,3643,5012,3602,5002,3584,4996,3557,4984,3536,4993,3528,5000,3527,5017,3537,5029,3540,5045,3542,5056,3546,5080,3530,5088,3529,5088,3416" href="#" alt="Afrique du Sud" title="Afrique du Sud">
 
                    </map>
 
 
                </div>
            </div>

Et QUE je click sur le bouton à l'aide de ce code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        $("#Btnok").click(function () {
 
                          $(function () {
                    $('.map').maphilight({
                        alwaysOn: true,
                        strokeWidth: 2,
                        fillColor: "ff0000",
                        fillOpacity: 0,
                        singleSelect: true
 
                    });
                });
 
            });
Et bien cela fonctionne, le pays en question est coloré en rouge....

Avec mes mots à moi :

Comment faire pour prendre en compte le code html (area) réalisé avec Ajax (en virtuel ! si je puis dire !) ?

Il est existant dans la console, mais il n'est pas pris en compte par ($('.map').maphilight) ?

Avez-vous une idée ?

Par avance merci...