Code html trop long -> optimisation mais où ?
Fermé
Bonjour,
Voilà en tant qu'admin d'un forum j'aimerai faire une carte à partir de données récupérées sur notre forum et compilées dans excel. Je souhaite donc créer une carte avec des polygones qui viendront se colorer en fonction d'un nombre (depuis excel) et en cliquant sur le département de son choix, les noms des membres de ce département s'affichent.
J'ai réussi une belle étape du point de vue de mon niveau lol je créé ma carte avec mes polygones colorés et j'ai presque ma carte cliquable (enfin pour l'instant c'est dans une autre zone). Mon soucis ? le code html est déjà trop long pour mon éditeur et je n'ai pas encore fait ces infos bulles avec les noms des membres !
Est ce que quelqu'un pourrait m'aider à réduire drastiquement ce code de plus de 2700 lignes ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang=fr>
<head>
</head>
<Body bgcolor='#FFFFFF' onclick='CacheTousMenus()'>
<table cellspacing="0" cellpadding="0" width="750" align="center" border="0">
<tbody>
<tr>
<td colspan="2">
<p><font face="Verdana" size="2">Les noms des membres s'affichent en info bulle.</font></p>
</td>
</tr>
<tr>
<td width="508" bgcolor="#000000">
<table style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" cellspacing="0" cellpadding="0" width="508" border="0">
<tbody>
<tr>
<td>
<p align="right"><img height="1" alt="" width="508" border="0"></p>
<p><img height="434" alt="" width="428" usemap="#Map1" border="0"></p>
<p align="right"><img alt="" usemap="#Map2" border="0"></p>
<map name="Map1">
<area title="Département:Pyrénées-orientales
Région: Languedoc-roussillon" href="../../../../departements/pyrenees-orientales/" coords="243,403,256,405,259,418,258,423,243,428,232,424,220,427,212,420,233,412,234,405" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(243,403);
le_contexte.lineTo(256,405);
le_contexte.lineTo(259,418);
le_contexte.lineTo(258,423);
le_contexte.lineTo(243,428);
le_contexte.lineTo(232,424);
le_contexte.lineTo(220,427);
le_contexte.lineTo(212,420);
le_contexte.lineTo(233,412);
le_contexte.lineTo(234,405);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Aude
Région: Languedoc-roussillon" href="../../../../departements/aude/" coords="215,377,240,377,246,384,253,381,261,385,263,388,255,403,250,401,233,403,232,410,225,411,217,408,221,401,219,393,210,384" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(215,377);
le_contexte.lineTo(240,377);
le_contexte.lineTo(246,384);
le_contexte.lineTo(253,381);
le_contexte.lineTo(261,385);
le_contexte.lineTo(263,388);
le_contexte.lineTo(255,403);
le_contexte.lineTo(250,401);
le_contexte.lineTo(233,403);
le_contexte.lineTo(232,410);
le_contexte.lineTo(225,411);
le_contexte.lineTo(217,408);
le_contexte.lineTo(221,401);
le_contexte.lineTo(219,393);
le_contexte.lineTo(210,384);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Ariège
Région: Midi-pyrénées" href="../../../../departements/ariege/" coords="206,385,209,385,216,392,218,402,213,408,222,411,224,412,223,413,212,417,207,417,178,403,184,392" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(206,385);
le_contexte.lineTo(209,385);
le_contexte.lineTo(216,392);
le_contexte.lineTo(218,402);
le_contexte.lineTo(213,408);
le_contexte.lineTo(222,411);
le_contexte.lineTo(224,412);
le_contexte.lineTo(223,413);
le_contexte.lineTo(212,417);
le_contexte.lineTo(207,417);
le_contexte.lineTo(178,403);
le_contexte.lineTo(184,392);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Hautes-pyrénées
Région: Midi-pyrénées" href="../../../../departements/hautes-pyrenees/" coords="145,368,149,368,157,377,169,380,164,389,165,393,169,398,162,410,146,410,138,402,139,394,145,388,149,381,149,375" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(145,368);
le_contexte.lineTo(149,368);
le_contexte.lineTo(157,377);
le_contexte.lineTo(169,380);
le_contexte.lineTo(164,389);
le_contexte.lineTo(165,393);
le_contexte.lineTo(169,398);
le_contexte.lineTo(162,410);
le_contexte.lineTo(146,410);
le_contexte.lineTo(138,402);
le_contexte.lineTo(139,394);
le_contexte.lineTo(145,388);
le_contexte.lineTo(149,381);
le_contexte.lineTo(149,375);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Tarn
Région: Midi-pyrénées" href="../../../../departements/tarn/" coords="222,339,226,339,235,345,241,357,244,360,251,362,242,367,241,374,221,374,211,365,207,356,207,350,209,345" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(222,339);
le_contexte.lineTo(226,339);
le_contexte.lineTo(235,345);
le_contexte.lineTo(241,357);
le_contexte.lineTo(244,360);
le_contexte.lineTo(251,362);
le_contexte.lineTo(242,367);
le_contexte.lineTo(241,374);
le_contexte.lineTo(221,374);
le_contexte.lineTo(211,365);
le_contexte.lineTo(207,356);
le_contexte.lineTo(207,350);
le_contexte.lineTo(209,345);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Haute-garonne
Région: Midi-pyrénées" href="../../../../departements/haute-garonne/" coords="203,353,206,357,209,366,219,375,214,375,208,383,185,390,177,403,174,402,172,404,171,411,165,411,164,409,171,398,165,390,172,380,179,377,184,380,186,379,190,365,185,358" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(203,353);
le_contexte.lineTo(206,357);
le_contexte.lineTo(209,366);
le_contexte.lineTo(219,375);
le_contexte.lineTo(214,375);
le_contexte.lineTo(208,383);
le_contexte.lineTo(185,390);
le_contexte.lineTo(177,403);
le_contexte.lineTo(174,402);
le_contexte.lineTo(172,404);
le_contexte.lineTo(171,411);
le_contexte.lineTo(165,411);
le_contexte.lineTo(164,409);
le_contexte.lineTo(171,398);
le_contexte.lineTo(165,390);
le_contexte.lineTo(172,380);
le_contexte.lineTo(179,377);
le_contexte.lineTo(184,380);
le_contexte.lineTo(186,379);
le_contexte.lineTo(190,365);
le_contexte.lineTo(185,358);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Tarn-et-garonne
Région: Midi-pyrénées" href="../../../../departements/tarn-et-garonne/" coords="187,331,191,332,198,338,216,333,216,339,210,341,204,351,183,356,178,341,181,335" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(187,331);
le_contexte.lineTo(191,332);
le_contexte.lineTo(198,338);
le_contexte.lineTo(216,333);
le_contexte.lineTo(216,339);
le_contexte.lineTo(210,341);
le_contexte.lineTo(204,351);
le_contexte.lineTo(183,356);
le_contexte.lineTo(178,341);
le_contexte.lineTo(181,335);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Gers
Région: Midi-pyrénées" href="../../../../departements/gers/" coords="168,346,176,346,181,357,188,365,185,377,179,375,170,379,155,374,148,365,142,365,144,350" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(168,346);
le_contexte.lineTo(176,346);
le_contexte.lineTo(181,357);
le_contexte.lineTo(188,365);
le_contexte.lineTo(185,377);
le_contexte.lineTo(179,375);
le_contexte.lineTo(170,379);
le_contexte.lineTo(155,374);
le_contexte.lineTo(148,365);
le_contexte.lineTo(142,365);
le_contexte.lineTo(144,350);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Pyrénées-atlantiques
Région: Aquitaine" href="../../../../departements/pyrenees-atlantiques/" coords="96,367,106,369,142,367,146,372,147,382,137,395,136,401,119,397,111,394,87,376" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(96,367);
le_contexte.lineTo(106,369);
le_contexte.lineTo(142,367);
le_contexte.lineTo(146,372);
le_contexte.lineTo(147,382);
le_contexte.lineTo(137,395);
le_contexte.lineTo(136,401);
le_contexte.lineTo(119,397);
le_contexte.lineTo(111,394);
le_contexte.lineTo(87,376);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Landes
Région: Aquitaine" href="../../../../departements/landes/" coords="108,322,127,323,138,337,146,337,147,341,153,341,153,346,142,350,140,365,97,365" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(108,322);
le_contexte.lineTo(127,323);
le_contexte.lineTo(138,337);
le_contexte.lineTo(146,337);
le_contexte.lineTo(147,341);
le_contexte.lineTo(153,341);
le_contexte.lineTo(153,346);
le_contexte.lineTo(142,350);
le_contexte.lineTo(140,365);
le_contexte.lineTo(97,365);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Lot-et-garonne
Région: Aquitaine" href="../../../../departements/lot-et-garonne/" coords="159,311,168,316,183,316,187,319,185,322,186,330,180,333,175,343,156,345,154,340,148,338,147,334,152,327,155,315" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(159,311);
le_contexte.lineTo(168,316);
le_contexte.lineTo(183,316);
le_contexte.lineTo(187,319);
le_contexte.lineTo(185,322);
le_contexte.lineTo(186,330);
le_contexte.lineTo(180,333);
le_contexte.lineTo(175,343);
le_contexte.lineTo(156,345);
le_contexte.lineTo(154,340);
le_contexte.lineTo(148,338);
le_contexte.lineTo(147,334);
le_contexte.lineTo(152,327);
le_contexte.lineTo(155,315);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Gironde
Région: Aquitaine" href="../../../../departements/gironde/" coords="113,275,115,275,126,284,130,284,142,293,151,294,152,306,159,307,154,314,148,330,145,334,139,335,128,321,109,320" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(113,275);
le_contexte.lineTo(115,275);
le_contexte.lineTo(126,284);
le_contexte.lineTo(130,284);
le_contexte.lineTo(142,293);
le_contexte.lineTo(151,294);
le_contexte.lineTo(152,306);
le_contexte.lineTo(159,307);
le_contexte.lineTo(154,314);
le_contexte.lineTo(148,330);
le_contexte.lineTo(145,334);
le_contexte.lineTo(139,335);
le_contexte.lineTo(128,321);
le_contexte.lineTo(109,320);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Hérault
Région: Languedoc-roussillon" href="../../../../departements/herault/" coords="281,352,295,362,293,370,266,385,253,379,247,382,244,380,242,377,244,368,253,364,258,357,268,353,275,356" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(281,352);
le_contexte.lineTo(295,362);
le_contexte.lineTo(293,370);
le_contexte.lineTo(266,385);
le_contexte.lineTo(253,379);
le_contexte.lineTo(247,382);
le_contexte.lineTo(244,380);
le_contexte.lineTo(242,377);
le_contexte.lineTo(244,368);
le_contexte.lineTo(253,364);
le_contexte.lineTo(258,357);
le_contexte.lineTo(268,353);
le_contexte.lineTo(275,356);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Gard
Région: Languedoc-roussillon" href="../../../../departements/gard/" coords="290,329,299,336,305,332,313,335,317,343,317,352,312,360,305,365,302,373,296,370,298,363,282,350,275,354,270,352,267,342,288,341,290,339" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(290,329);
le_contexte.lineTo(299,336);
le_contexte.lineTo(305,332);
le_contexte.lineTo(313,335);
le_contexte.lineTo(317,343);
le_contexte.lineTo(317,352);
le_contexte.lineTo(312,360);
le_contexte.lineTo(305,365);
le_contexte.lineTo(302,373);
le_contexte.lineTo(296,370);
le_contexte.lineTo(298,363);
le_contexte.lineTo(282,350);
le_contexte.lineTo(275,354);
le_contexte.lineTo(270,352);
le_contexte.lineTo(267,342);
le_contexte.lineTo(288,341);
le_contexte.lineTo(290,339);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Bouches-du-rhône
Région: Provence-alpes-côte d'azur" href="../../../../departements/bouches-du-rhone/" coords="317,354,320,354,331,361,340,363,352,363,350,366,352,375,352,381,350,385,348,386,333,379,319,379,305,374,304,371,308,364,314,361" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(317,354);
le_contexte.lineTo(320,354);
le_contexte.lineTo(331,361);
le_contexte.lineTo(340,363);
le_contexte.lineTo(352,363);
le_contexte.lineTo(350,366);
le_contexte.lineTo(352,375);
le_contexte.lineTo(352,381);
le_contexte.lineTo(350,385);
le_contexte.lineTo(348,386);
le_contexte.lineTo(333,379);
le_contexte.lineTo(319,379);
le_contexte.lineTo(305,374);
le_contexte.lineTo(304,371);
le_contexte.lineTo(308,364);
le_contexte.lineTo(314,361);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Vaucluse
Région: Provence-alpes-côte d'azur" href="../../../../departements/vaucluse/" coords="315,334,317,334,320,337,329,335,342,342,345,354,353,360,341,361,332,359,319,352,319,343,315,337" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(315,334);
le_contexte.lineTo(317,334);
le_contexte.lineTo(320,337);
le_contexte.lineTo(329,335);
le_contexte.lineTo(342,342);
le_contexte.lineTo(345,354);
le_contexte.lineTo(353,360);
le_contexte.lineTo(341,361);
le_contexte.lineTo(332,359);
le_contexte.lineTo(319,352);
le_contexte.lineTo(319,343);
le_contexte.lineTo(315,337);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Var
Région: Provence-alpes-côte d'azur" href="../../../../departements/var/" coords="382,356,385,356,395,372,391,380,370,391,351,386,355,380,352,368,355,360" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(382,356);
le_contexte.lineTo(385,356);
le_contexte.lineTo(395,372);
le_contexte.lineTo(391,380);
le_contexte.lineTo(370,391);
le_contexte.lineTo(351,386);
le_contexte.lineTo(355,380);
le_contexte.lineTo(352,368);
le_contexte.lineTo(355,360);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Alpes-maritimes
Région: Provence-alpes-côte d'azur" href="../../../../departements/alpes-maritimes/" coords="393,329,408,339,419,337,416,354,405,360,397,372,387,356,394,348,387,338,387,336" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(393,329);
le_contexte.lineTo(408,339);
le_contexte.lineTo(419,337);
le_contexte.lineTo(416,354);
le_contexte.lineTo(405,360);
le_contexte.lineTo(397,372);
le_contexte.lineTo(387,356);
le_contexte.lineTo(394,348);
le_contexte.lineTo(387,338);
le_contexte.lineTo(387,336);
le_contexte.fill();
le_contexte.stroke();
</script>
comme ca pour tous les départements
</tr>
</tbody>
</table>
</td>
<td valign="top">
<p>
<table style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" cellspacing="1" cellpadding="1" width="220" align="center" bgcolor="#000000" border="0">
<tbody>
<tr>
<td width="15" bgcolor="#e90080"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Alsace</font></td>
</tr>
<tr>
<td bgcolor="#00ff00"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Aquitaine</font></td>
</tr>
<tr>
<td bgcolor="#772b1a"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Auvergne</font></td>
</tr>
<tr>
<td bgcolor="#fe00fe"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Basse-Normandie</font></td>
</tr>
<tr>
<td bgcolor="#00fefe"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Bourgogne</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</HTML>
Pour résumé, le but de ce projet :
- générer une carte en polygones
- remplir les départements avec une couleur définie dans excel
- afficher des infos bulles lors d'un clic dans un département
Voilà en tant qu'admin d'un forum j'aimerai faire une carte à partir de données récupérées sur notre forum et compilées dans excel. Je souhaite donc créer une carte avec des polygones qui viendront se colorer en fonction d'un nombre (depuis excel) et en cliquant sur le département de son choix, les noms des membres de ce département s'affichent.
J'ai réussi une belle étape du point de vue de mon niveau lol je créé ma carte avec mes polygones colorés et j'ai presque ma carte cliquable (enfin pour l'instant c'est dans une autre zone). Mon soucis ? le code html est déjà trop long pour mon éditeur et je n'ai pas encore fait ces infos bulles avec les noms des membres !
Est ce que quelqu'un pourrait m'aider à réduire drastiquement ce code de plus de 2700 lignes ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang=fr>
<head>
</head>
<Body bgcolor='#FFFFFF' onclick='CacheTousMenus()'>
<table cellspacing="0" cellpadding="0" width="750" align="center" border="0">
<tbody>
<tr>
<td colspan="2">
<p><font face="Verdana" size="2">Les noms des membres s'affichent en info bulle.</font></p>
</td>
</tr>
<tr>
<td width="508" bgcolor="#000000">
<table style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" cellspacing="0" cellpadding="0" width="508" border="0">
<tbody>
<tr>
<td>
<p align="right"><img height="1" alt="" width="508" border="0"></p>
<p><img height="434" alt="" width="428" usemap="#Map1" border="0"></p>
<p align="right"><img alt="" usemap="#Map2" border="0"></p>
<map name="Map1">
<area title="Département:Pyrénées-orientales
Région: Languedoc-roussillon" href="../../../../departements/pyrenees-orientales/" coords="243,403,256,405,259,418,258,423,243,428,232,424,220,427,212,420,233,412,234,405" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(243,403);
le_contexte.lineTo(256,405);
le_contexte.lineTo(259,418);
le_contexte.lineTo(258,423);
le_contexte.lineTo(243,428);
le_contexte.lineTo(232,424);
le_contexte.lineTo(220,427);
le_contexte.lineTo(212,420);
le_contexte.lineTo(233,412);
le_contexte.lineTo(234,405);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Aude
Région: Languedoc-roussillon" href="../../../../departements/aude/" coords="215,377,240,377,246,384,253,381,261,385,263,388,255,403,250,401,233,403,232,410,225,411,217,408,221,401,219,393,210,384" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(215,377);
le_contexte.lineTo(240,377);
le_contexte.lineTo(246,384);
le_contexte.lineTo(253,381);
le_contexte.lineTo(261,385);
le_contexte.lineTo(263,388);
le_contexte.lineTo(255,403);
le_contexte.lineTo(250,401);
le_contexte.lineTo(233,403);
le_contexte.lineTo(232,410);
le_contexte.lineTo(225,411);
le_contexte.lineTo(217,408);
le_contexte.lineTo(221,401);
le_contexte.lineTo(219,393);
le_contexte.lineTo(210,384);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Ariège
Région: Midi-pyrénées" href="../../../../departements/ariege/" coords="206,385,209,385,216,392,218,402,213,408,222,411,224,412,223,413,212,417,207,417,178,403,184,392" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(206,385);
le_contexte.lineTo(209,385);
le_contexte.lineTo(216,392);
le_contexte.lineTo(218,402);
le_contexte.lineTo(213,408);
le_contexte.lineTo(222,411);
le_contexte.lineTo(224,412);
le_contexte.lineTo(223,413);
le_contexte.lineTo(212,417);
le_contexte.lineTo(207,417);
le_contexte.lineTo(178,403);
le_contexte.lineTo(184,392);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Hautes-pyrénées
Région: Midi-pyrénées" href="../../../../departements/hautes-pyrenees/" coords="145,368,149,368,157,377,169,380,164,389,165,393,169,398,162,410,146,410,138,402,139,394,145,388,149,381,149,375" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(145,368);
le_contexte.lineTo(149,368);
le_contexte.lineTo(157,377);
le_contexte.lineTo(169,380);
le_contexte.lineTo(164,389);
le_contexte.lineTo(165,393);
le_contexte.lineTo(169,398);
le_contexte.lineTo(162,410);
le_contexte.lineTo(146,410);
le_contexte.lineTo(138,402);
le_contexte.lineTo(139,394);
le_contexte.lineTo(145,388);
le_contexte.lineTo(149,381);
le_contexte.lineTo(149,375);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Tarn
Région: Midi-pyrénées" href="../../../../departements/tarn/" coords="222,339,226,339,235,345,241,357,244,360,251,362,242,367,241,374,221,374,211,365,207,356,207,350,209,345" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(222,339);
le_contexte.lineTo(226,339);
le_contexte.lineTo(235,345);
le_contexte.lineTo(241,357);
le_contexte.lineTo(244,360);
le_contexte.lineTo(251,362);
le_contexte.lineTo(242,367);
le_contexte.lineTo(241,374);
le_contexte.lineTo(221,374);
le_contexte.lineTo(211,365);
le_contexte.lineTo(207,356);
le_contexte.lineTo(207,350);
le_contexte.lineTo(209,345);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Haute-garonne
Région: Midi-pyrénées" href="../../../../departements/haute-garonne/" coords="203,353,206,357,209,366,219,375,214,375,208,383,185,390,177,403,174,402,172,404,171,411,165,411,164,409,171,398,165,390,172,380,179,377,184,380,186,379,190,365,185,358" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(203,353);
le_contexte.lineTo(206,357);
le_contexte.lineTo(209,366);
le_contexte.lineTo(219,375);
le_contexte.lineTo(214,375);
le_contexte.lineTo(208,383);
le_contexte.lineTo(185,390);
le_contexte.lineTo(177,403);
le_contexte.lineTo(174,402);
le_contexte.lineTo(172,404);
le_contexte.lineTo(171,411);
le_contexte.lineTo(165,411);
le_contexte.lineTo(164,409);
le_contexte.lineTo(171,398);
le_contexte.lineTo(165,390);
le_contexte.lineTo(172,380);
le_contexte.lineTo(179,377);
le_contexte.lineTo(184,380);
le_contexte.lineTo(186,379);
le_contexte.lineTo(190,365);
le_contexte.lineTo(185,358);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Tarn-et-garonne
Région: Midi-pyrénées" href="../../../../departements/tarn-et-garonne/" coords="187,331,191,332,198,338,216,333,216,339,210,341,204,351,183,356,178,341,181,335" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(187,331);
le_contexte.lineTo(191,332);
le_contexte.lineTo(198,338);
le_contexte.lineTo(216,333);
le_contexte.lineTo(216,339);
le_contexte.lineTo(210,341);
le_contexte.lineTo(204,351);
le_contexte.lineTo(183,356);
le_contexte.lineTo(178,341);
le_contexte.lineTo(181,335);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Gers
Région: Midi-pyrénées" href="../../../../departements/gers/" coords="168,346,176,346,181,357,188,365,185,377,179,375,170,379,155,374,148,365,142,365,144,350" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(168,346);
le_contexte.lineTo(176,346);
le_contexte.lineTo(181,357);
le_contexte.lineTo(188,365);
le_contexte.lineTo(185,377);
le_contexte.lineTo(179,375);
le_contexte.lineTo(170,379);
le_contexte.lineTo(155,374);
le_contexte.lineTo(148,365);
le_contexte.lineTo(142,365);
le_contexte.lineTo(144,350);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Pyrénées-atlantiques
Région: Aquitaine" href="../../../../departements/pyrenees-atlantiques/" coords="96,367,106,369,142,367,146,372,147,382,137,395,136,401,119,397,111,394,87,376" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(96,367);
le_contexte.lineTo(106,369);
le_contexte.lineTo(142,367);
le_contexte.lineTo(146,372);
le_contexte.lineTo(147,382);
le_contexte.lineTo(137,395);
le_contexte.lineTo(136,401);
le_contexte.lineTo(119,397);
le_contexte.lineTo(111,394);
le_contexte.lineTo(87,376);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Landes
Région: Aquitaine" href="../../../../departements/landes/" coords="108,322,127,323,138,337,146,337,147,341,153,341,153,346,142,350,140,365,97,365" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(108,322);
le_contexte.lineTo(127,323);
le_contexte.lineTo(138,337);
le_contexte.lineTo(146,337);
le_contexte.lineTo(147,341);
le_contexte.lineTo(153,341);
le_contexte.lineTo(153,346);
le_contexte.lineTo(142,350);
le_contexte.lineTo(140,365);
le_contexte.lineTo(97,365);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Lot-et-garonne
Région: Aquitaine" href="../../../../departements/lot-et-garonne/" coords="159,311,168,316,183,316,187,319,185,322,186,330,180,333,175,343,156,345,154,340,148,338,147,334,152,327,155,315" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(159,311);
le_contexte.lineTo(168,316);
le_contexte.lineTo(183,316);
le_contexte.lineTo(187,319);
le_contexte.lineTo(185,322);
le_contexte.lineTo(186,330);
le_contexte.lineTo(180,333);
le_contexte.lineTo(175,343);
le_contexte.lineTo(156,345);
le_contexte.lineTo(154,340);
le_contexte.lineTo(148,338);
le_contexte.lineTo(147,334);
le_contexte.lineTo(152,327);
le_contexte.lineTo(155,315);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Gironde
Région: Aquitaine" href="../../../../departements/gironde/" coords="113,275,115,275,126,284,130,284,142,293,151,294,152,306,159,307,154,314,148,330,145,334,139,335,128,321,109,320" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(113,275);
le_contexte.lineTo(115,275);
le_contexte.lineTo(126,284);
le_contexte.lineTo(130,284);
le_contexte.lineTo(142,293);
le_contexte.lineTo(151,294);
le_contexte.lineTo(152,306);
le_contexte.lineTo(159,307);
le_contexte.lineTo(154,314);
le_contexte.lineTo(148,330);
le_contexte.lineTo(145,334);
le_contexte.lineTo(139,335);
le_contexte.lineTo(128,321);
le_contexte.lineTo(109,320);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Hérault
Région: Languedoc-roussillon" href="../../../../departements/herault/" coords="281,352,295,362,293,370,266,385,253,379,247,382,244,380,242,377,244,368,253,364,258,357,268,353,275,356" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(281,352);
le_contexte.lineTo(295,362);
le_contexte.lineTo(293,370);
le_contexte.lineTo(266,385);
le_contexte.lineTo(253,379);
le_contexte.lineTo(247,382);
le_contexte.lineTo(244,380);
le_contexte.lineTo(242,377);
le_contexte.lineTo(244,368);
le_contexte.lineTo(253,364);
le_contexte.lineTo(258,357);
le_contexte.lineTo(268,353);
le_contexte.lineTo(275,356);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Gard
Région: Languedoc-roussillon" href="../../../../departements/gard/" coords="290,329,299,336,305,332,313,335,317,343,317,352,312,360,305,365,302,373,296,370,298,363,282,350,275,354,270,352,267,342,288,341,290,339" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(290,329);
le_contexte.lineTo(299,336);
le_contexte.lineTo(305,332);
le_contexte.lineTo(313,335);
le_contexte.lineTo(317,343);
le_contexte.lineTo(317,352);
le_contexte.lineTo(312,360);
le_contexte.lineTo(305,365);
le_contexte.lineTo(302,373);
le_contexte.lineTo(296,370);
le_contexte.lineTo(298,363);
le_contexte.lineTo(282,350);
le_contexte.lineTo(275,354);
le_contexte.lineTo(270,352);
le_contexte.lineTo(267,342);
le_contexte.lineTo(288,341);
le_contexte.lineTo(290,339);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Bouches-du-rhône
Région: Provence-alpes-côte d'azur" href="../../../../departements/bouches-du-rhone/" coords="317,354,320,354,331,361,340,363,352,363,350,366,352,375,352,381,350,385,348,386,333,379,319,379,305,374,304,371,308,364,314,361" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(317,354);
le_contexte.lineTo(320,354);
le_contexte.lineTo(331,361);
le_contexte.lineTo(340,363);
le_contexte.lineTo(352,363);
le_contexte.lineTo(350,366);
le_contexte.lineTo(352,375);
le_contexte.lineTo(352,381);
le_contexte.lineTo(350,385);
le_contexte.lineTo(348,386);
le_contexte.lineTo(333,379);
le_contexte.lineTo(319,379);
le_contexte.lineTo(305,374);
le_contexte.lineTo(304,371);
le_contexte.lineTo(308,364);
le_contexte.lineTo(314,361);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Vaucluse
Région: Provence-alpes-côte d'azur" href="../../../../departements/vaucluse/" coords="315,334,317,334,320,337,329,335,342,342,345,354,353,360,341,361,332,359,319,352,319,343,315,337" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(315,334);
le_contexte.lineTo(317,334);
le_contexte.lineTo(320,337);
le_contexte.lineTo(329,335);
le_contexte.lineTo(342,342);
le_contexte.lineTo(345,354);
le_contexte.lineTo(353,360);
le_contexte.lineTo(341,361);
le_contexte.lineTo(332,359);
le_contexte.lineTo(319,352);
le_contexte.lineTo(319,343);
le_contexte.lineTo(315,337);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Var
Région: Provence-alpes-côte d'azur" href="../../../../departements/var/" coords="382,356,385,356,395,372,391,380,370,391,351,386,355,380,352,368,355,360" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(382,356);
le_contexte.lineTo(385,356);
le_contexte.lineTo(395,372);
le_contexte.lineTo(391,380);
le_contexte.lineTo(370,391);
le_contexte.lineTo(351,386);
le_contexte.lineTo(355,380);
le_contexte.lineTo(352,368);
le_contexte.lineTo(355,360);
le_contexte.fill();
le_contexte.stroke();
</script>
<area title="Département:Alpes-maritimes
Région: Provence-alpes-côte d'azur" href="../../../../departements/alpes-maritimes/" coords="393,329,408,339,419,337,416,354,405,360,397,372,387,356,394,348,387,338,387,336" shape="poly">
<canvas id="mon-canvas" width="800" height="800" style="background-color:#000">
Ce texte est affiché par votre navigateur ne supporte pas ce language.</canvas>
<script type="text/javascript">
var le_canvas = document.getElementById('mon-canvas');
var le_contexte = le_canvas.getContext('2d');
le_contexte.fillStyle = "rgba(
le_contexte.strokeStyle = "rgb(255,255,255)";
le_contexte.lineWidth = 1;
le_contexte.beginPath();
le_contexte.moveTo(393,329);
le_contexte.lineTo(408,339);
le_contexte.lineTo(419,337);
le_contexte.lineTo(416,354);
le_contexte.lineTo(405,360);
le_contexte.lineTo(397,372);
le_contexte.lineTo(387,356);
le_contexte.lineTo(394,348);
le_contexte.lineTo(387,338);
le_contexte.lineTo(387,336);
le_contexte.fill();
le_contexte.stroke();
</script>
comme ca pour tous les départements
</tr>
</tbody>
</table>
</td>
<td valign="top">
<p>
<table style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" cellspacing="1" cellpadding="1" width="220" align="center" bgcolor="#000000" border="0">
<tbody>
<tr>
<td width="15" bgcolor="#e90080"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Alsace</font></td>
</tr>
<tr>
<td bgcolor="#00ff00"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Aquitaine</font></td>
</tr>
<tr>
<td bgcolor="#772b1a"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Auvergne</font></td>
</tr>
<tr>
<td bgcolor="#fe00fe"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Basse-Normandie</font></td>
</tr>
<tr>
<td bgcolor="#00fefe"><font face="Verdana" size="1"> </font></td>
<td><font face="Verdana" size="1">Bourgogne</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</HTML>
Pour résumé, le but de ce projet :
- générer une carte en polygones
- remplir les départements avec une couleur définie dans excel
- afficher des infos bulles lors d'un clic dans un département
A voir également:
- Code html trop long -> optimisation mais où ?
- Optimisation pc - Guide
- Pc long a demarrer - Guide
- Code asci - Guide
- Editeur html - Télécharger - HTML
- Code puk bloqué - Guide
