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 :
Dans la console j'ai bien le code area complet, MAIS !
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 }); }); });
Je souhaiterais afficher un pays à l'aide du code ci-dessous :
Mais cela ne fonctionne pas.
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 }); });
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 :
Et bien cela fonctionne, le pays en question est coloré en rouge....
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 }); }); });
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...
Partager