[Illustrator/jQuery] Comment réaliser une carte interactive (2/2)

À la fin de la première partie de ce tutoriel (voir ici) nous avions:

  • un dossier images contenant la carte
  • un fichier HTML comprenant notre map HTML
  • notre fichier Illustrator

Partie 2: Rendre la carte interactive à l’aide de jQuery

Les zones de maps n’étant pas stylisables via CSS, nous sommes obligés de passer par jQuery (ou tout autre framework JavaScript).

Principe utilisé: la carte de France est l’image de fond d’une division, la map HTML est appliquée sur une image transparente, qui au survol d’une zone surligne la région correspondante.

<div id="map">
<img alt="carte de France" src="./images/map.gif" usemap="#carteMap" id="hovered" />
</div><!-- #map -->

Structure de la carte

La division « map » doit avoir les mêmes dimensions que les images utilisées.

Avant toute chose, il faut créer toutes les images des régions. Pour cela, dans Illustrator, vous devez, pour chaque région:

  1. changer le style de la zone
  2. enregistrer, dans le même dossier que la carte de France, l’image avec le nom correspondant à celui choisi au moment de la création de la map HTML

exemple d’image à obtenir

Il reste une dernière étape avant de passer à jQuery: ajouter des attributs id et title à chaque area:

<map id="carteMap">
<area alt="" coords="263,127, 263,135, 253,136, 247,146, 234,143, 230,135, 218,135, 205,122, 204,113, 202,110, 203,99, 210,97, 222,94, 228,98, 233,95, 238,101, 257,103, 257,99, 266,112, 268,123, 263,127" href="#idf" id="idf" shape="poly" title="Île-de-France">
<area alt="" coords="215,61, 208,56, 208,49, 208,42, 212,38, 217,40, 225,42, 232,48, 241,48, 240,52, 260,55, 264,61, 272,58, 278,60, 284,58, 290,63, 295,59, 294,69, 290,76, 287,88, 273,90, 276,98, 272,99, 272,109, 266,112, 257,99, 257,103, 238,101, 233,95, 228,98, 222,94, 210,97, 212,84, 214,81, 212,77, 215,70, 215,61" href="#pic" id="pic" shape="poly" title="Picardie">
<area alt="" coords="182,77, 168,74, 170,66, 177,62, 188,59, 201,55, 208,49, 208,56, 215,61, 215,70, 212,77, 214,81, 212,84, 210,97, 203,99, 202,110, 188,115, 180,102, 176,102, 176,87, 173,77, 182,77" href="#hnom" id="hnom" shape="poly" title="Haute-Normandie">
<area alt="" coords="117,110, 113,107, 115,83, 109,68, 111,64, 107,61, 110,58, 114,62, 124,63, 128,60, 132,67, 128,69, 131,77, 159,82, 173,77, 176,87, 176,102, 180,102, 188,115, 188,129, 183,130, 182,135, 172,131, 172,126, 169,124, 157,127, 157,121, 151,116, 136,121, 132,116, 128,116, 122,114, 118,119, 112,116, 112,110, 117,110" href="#bnom" id="bnom" shape="poly" title="Basse-Normandie">
<area alt="" coords="128,116, 122,114, 118,119, 112,116, 112,110, 107,111, 105,107, 102,107, 100,110, 96,109, 93,111, 93,105, 87,107, 79,111, 70,98, 70,92, 61,95, 54,95, 47,103, 43,98, 40,103, 36,98, 27,101, 23,98, 15,103, 12,103, 12,107, 9,107, 11,113, 20,113, 24,110, 23,114, 26,116, 20,118, 16,116, 13,118, 17,122, 20,121, 24,125, 20,127, 9,127, 18,135, 18,140, 26,144, 27,139, 32,139, 34,142, 43,144, 49,150, 52,150, 57,153, 56,160, 59,165, 60,157, 63,155, 70,155, 70,157, 65,158, 69,163, 81,163, 88,160, 90,152, 96,152, 100,150, 106,150, 111,146, 116,150, 122,144, 122,141, 128,141, 127,135, 124,129, 128,126, 128,116" href="#bret" id="bret" shape="poly" title="Bretagne">
<area alt="" coords="182,135, 172,131, 172,126, 169,124, 157,127, 157,121, 151,116, 136,121, 132,116, 128,116, 128,126, 124,129, 127,135, 128,141, 122,141, 122,144, 116,150, 111,146, 106,150, 100,150, 96,152, 90,152, 88,160, 81,163, 77,166, 76,170, 73,171, 83,174, 88,172, 99,174, 89,175, 85,179, 92,184, 87,188, 87,191, 84,193, 91,201, 95,211, 98,211, 106,220, 112,222, 123,220, 126,224, 132,220, 129,218, 128,208, 132,204, 123,197, 123,193, 115,186, 130,191, 134,186, 152,187, 156,184, 155,179, 160,175, 160,163, 176,163, 176,156, 182,152, 184,143, 188,143, 182,135" href="#ploire" id="ploire" shape="poly" title="Pays de la Loire">
<area alt="" coords="156,184, 155,179, 160,175, 160,163, 176,163, 176,156, 182,152, 184,143, 188,143, 182,135, 183,130, 188,129, 188,115, 202,110, 204,113, 205,122, 218,135, 230,135, 234,143, 247,146, 249,147, 249,158, 245,166, 249,171, 245,174, 245,180, 248,184, 247,198, 249,202, 249,208, 240,211, 232,213, 232,222, 221,226, 189,225, 183,213, 183,205, 178,204, 170,193, 162,196, 162,187, 156,184" href="#centre" id="centre" shape="poly" title="Centre">
<area alt="" coords="249,208, 249,202, 247,198, 248,184, 245,180, 245,174, 249,171, 245,166, 249,158, 249,147, 247,146, 253,136, 263,135, 267,139, 267,144, 273,144, 277,154, 286,155, 289,158, 304,151, 314,161, 314,168, 317,171, 327,172, 331,176, 327,181, 329,185, 328,190, 318,204, 324,211, 318,211, 322,217, 321,224, 308,224, 307,234, 304,237, 297,233, 289,240, 279,239, 274,236, 278,232, 278,223, 271,218, 267,212, 262,215, 250,212, 249,208" href="#bourg" id="bourg" shape="poly" title="Bourgogne">
<area alt="" coords="120,271, 111,257, 105,254, 103,251, 95,246, 95,241, 102,244, 107,247, 114,240, 112,236, 115,235, 108,226, 112,222, 123,220, 126,224, 132,220, 129,218, 128,208, 132,204, 123,197, 123,193, 115,186, 130,191, 134,186, 152,187, 156,184, 162,187, 162,196, 170,193, 178,204, 183,205, 183,213, 189,225, 180,229, 172,236, 177,246, 167,257, 161,259, 158,269, 152,269, 152,274, 144,279, 143,282, 139,285, 134,279, 129,279, 129,273, 126,271, 120,271" href="#poicha" id="poicha" shape="poly" title="Poitou-Charentes">
<area alt="" coords="167,257, 177,246, 172,236, 180,229, 189,225, 221,226, 222,233, 232,242, 232,250, 224,253, 227,257, 226,260, 230,265, 228,269, 227,276, 220,277, 219,283, 215,287, 215,291, 210,296, 189,296, 189,286, 182,280, 186,275, 186,270, 183,270, 174,258, 167,257" href="#lim" id="lim" shape="poly" title="Limousin">
<area alt="" coords="210,296, 215,291, 215,287, 219,283, 220,277, 227,276, 228,269, 230,265, 226,260, 227,257, 224,253, 232,250, 232,242, 222,233, 221,226, 232,222, 232,213, 240,211, 249,208, 250,212, 262,215, 267,212, 271,218, 278,223, 278,232, 274,236, 272,247, 267,252, 271,256, 270,260, 277,273, 275,280, 285,278, 287,282, 290,281, 293,288, 292,294, 289,294, 288,297, 286,298, 285,302, 271,307, 265,305, 265,302, 263,300, 261,306, 257,307, 256,301, 252,297, 246,302, 242,314, 241,307, 238,307, 233,297, 225,313, 212,311, 213,304, 209,302, 210,296" href="#auv" id="auv" shape="poly" title="Auvergne">
<area alt="" coords="121,285, 120,271, 126,271, 129,273, 129,279, 134,279, 139,285, 143,282, 144,279, 152,274, 152,269, 158,269, 161,259, 167,257, 174,258, 183,270, 186,270, 186,275, 182,280, 189,286, 189,296, 183,304, 182,310, 177,309, 177,313, 173,315, 174,322, 168,322, 171,327, 169,333, 164,335, 159,337, 153,335, 147,338, 140,336, 138,342, 136,339, 127,342, 127,354, 123,357, 133,357, 133,364, 136,365, 136,371, 127,378, 127,382, 123,382, 121,392, 110,392, 106,384, 91,378, 89,375, 85,379, 80,376, 85,368, 82,364, 78,367, 76,364, 71,363, 71,360, 80,357, 88,345, 96,320, 99,303, 106,302, 104,298, 100,300, 105,272, 105,261, 109,259, 111,264, 117,271, 121,285" href="#aqu" id="aqu" shape="poly" title="Aquitaine">
<area alt="" coords="179,406, 186,405, 189,407, 188,411, 193,413, 205,404, 203,401, 199,402, 195,397, 199,393, 199,386, 192,379, 192,372, 196,372, 197,369, 201,371, 204,369, 211,373, 212,369, 221,372, 226,369, 223,363, 228,361, 232,363, 238,359, 241,359, 244,352, 248,353, 251,350, 251,346, 256,342, 251,339, 254,336, 245,333, 245,319, 242,314, 241,307, 238,307, 233,297, 225,313, 212,311, 213,304, 209,302, 210,296, 189,296, 183,304, 182,310, 177,309, 177,313, 173,315, 174,322, 168,322, 171,327, 169,333, 164,335, 159,337, 153,335, 147,338, 140,336, 138,342, 136,339, 127,342, 127,354, 123,357, 133,357, 133,364, 136,365, 136,371, 127,378, 127,382, 123,382, 121,392, 129,397, 137,397, 141,401, 144,398, 148,398, 154,401, 155,393, 159,393, 171,400, 176,400, 179,406" href="#mid" id="mid" shape="poly" title="Midi-Pyrénées">
<area alt="" coords="193,413, 205,404, 203,401, 199,402, 195,397, 199,393, 199,386, 192,379, 192,372, 196,372, 197,369, 201,371, 204,369, 211,373, 212,369, 221,372, 226,369, 223,363, 228,361, 232,363, 238,359, 241,359, 244,352, 248,353, 251,350, 251,346, 256,342, 251,339, 254,336, 245,333, 245,319, 242,314, 246,302, 252,297, 256,301, 257,307, 261,306, 262,302, 263,300, 265,302, 265,305, 271,307, 275,323, 279,325, 279,329, 286,331, 288,328, 292,329, 292,331, 302,330, 299,335, 305,342, 305,348, 297,353, 296,361, 291,361, 291,365, 285,366, 285,371, 279,371, 277,366, 272,367, 263,376, 261,376, 253,380, 248,380, 242,385, 238,393, 238,410, 244,416, 241,419, 238,417, 228,417, 224,423, 221,418, 216,423, 207,416, 199,421, 193,413" href="#lang" id="lang" shape="poly" title="Languedoc-Roussillon">
<area alt="" coords="409,391, 415,391, 415,404, 416,408, 416,427, 411,431, 409,453, 404,458, 400,452, 392,451, 394,449, 391,446, 395,441, 387,439, 391,435, 386,434, 390,428, 385,427, 385,421, 387,420, 387,414, 393,406, 401,405, 404,402, 407,404, 409,391" href="#corse" id="corse" shape="poly" title="Corse">
<area alt="" coords="376,330, 389,339, 405,339, 407,345, 402,350, 398,360, 389,361, 383,369, 379,369, 374,376, 370,376, 366,379, 371,381, 366,386, 360,386, 358,390, 350,387, 350,391, 342,389, 342,391, 335,390, 331,385, 321,385, 318,382, 321,380, 317,377, 311,378, 306,373, 304,373, 302,378, 295,376, 291,371, 285,371, 285,366, 291,365, 291,361, 296,361, 297,353, 305,348, 305,342, 299,335, 302,330, 307,333, 317,329, 314,336, 318,333, 326,339, 329,337, 332,337, 335,335, 331,330, 324,325, 327,323, 334,323, 334,320, 330,317, 333,315, 337,315, 341,309, 352,305, 357,307, 357,301, 352,298, 352,294, 359,296, 368,293, 375,305, 381,305, 381,315, 378,315, 374,321, 378,326, 376,330" href="#paca" id="paca" shape="poly" title="Provence-Alpes-Côte d'Azur">
<area alt="" coords="368,293, 359,296, 352,294, 352,298, 357,301, 357,307, 352,305, 341,309, 337,315, 333,315, 330,317, 334,320, 334,323, 327,323, 324,325, 331,330, 335,335, 332,337, 329,337, 326,339, 318,333, 314,336, 317,329, 307,333, 302,330, 292,331, 292,329, 288,328, 286,331, 279,329, 279,325, 275,323, 271,307, 285,302, 286,298, 288,297, 289,294, 292,294, 293,288, 290,281, 287,282, 285,278, 275,280, 277,273, 270,260, 271,256, 267,252, 272,247, 274,236, 279,239, 289,240, 297,233, 304,237, 307,234, 308,224, 321,224, 323,228, 320,230, 326,237, 330,234, 335,237, 350,228, 353,236, 347,241, 349,244, 356,240, 357,233, 362,231, 376,230, 378,239, 373,240, 382,249, 381,256, 376,258, 375,263, 380,267, 382,275, 387,278, 385,281, 385,289, 380,289, 377,293, 368,293" href="#rhal" id="rhal" shape="poly" title="Rhône-Alpes">
<area alt="" coords="350,228, 335,237, 330,234, 326,237, 320,230, 323,228, 321,224, 322,217, 318,211, 324,211, 318,204, 328,190, 329,185, 327,181, 331,176, 327,172, 331,168, 334,170, 336,168, 336,163, 342,156, 351,154, 352,158, 360,157, 364,162, 366,157, 373,164, 379,168, 379,172, 382,174, 382,179, 378,182, 382,182, 383,188, 363,203, 361,210, 354,215, 354,222, 350,228" href="#frcomt" id="frcomt" shape="poly" title="Franche-Comté">
<area alt="" coords="420,108, 418,116, 412,119, 400,151, 402,155, 397,166, 399,173, 394,180, 391,180, 388,182, 382,179, 382,174, 379,172, 379,168, 373,164, 381,152, 381,145, 386,139, 383,138, 382,130, 388,124, 392,118, 389,116, 382,118, 379,112, 383,105, 390,112, 397,109, 399,103, 404,103, 420,108" href="#als" id="als" shape="poly" title="Alsace">
<area alt="" coords="341,80, 349,86, 358,83, 360,85, 365,85, 374,97, 378,94, 387,100, 392,97, 399,98, 399,103, 397,109, 390,112, 383,105, 379,112, 382,118, 389,116, 392,118, 388,124, 382,130, 383,138, 386,139, 381,145, 381,152, 373,164, 366,157, 364,162, 360,157, 352,158, 351,154, 342,156, 335,150, 338,147, 338,141, 330,139, 329,133, 314,123, 312,116, 316,116, 317,106, 314,104, 314,97, 321,81, 326,83, 327,81, 332,81, 341,80" href="#lor" id="lor" shape="poly" title="Lorraine">
<area alt="" coords="295,59, 294,69, 290,76, 287,88, 273,90, 276,98, 272,99, 272,109, 266,112, 268,123, 263,127, 263,135, 267,139, 267,144, 273,144, 277,155, 286,155, 289,158, 304,151, 314,161, 314,168, 317,171, 327,172, 331,168, 334,170, 336,168, 336,163, 342,156, 335,150, 338,147, 338,141, 330,139, 329,133, 314,123, 312,116, 316,116, 317,106, 314,104, 314,97, 321,81, 326,83, 327,81, 332,81, 318,68, 314,68, 314,51, 304,58, 295,59" href="#champ" id="champ" shape="poly" title="Champagne-Ardenne">
<area alt="" coords="215,16, 221,12, 246,8, 248,20, 254,24, 264,21, 269,34, 276,34, 279,43, 293,45, 295,59, 290,63, 284,58, 278,60, 272,58, 264,61, 260,55, 240,52, 241,48, 232,48, 225,42, 217,40, 212,38, 215,16" href="#npc" id="npc" shape="poly" title="Nord-Pas-de-Calais">
</map>

Nous voilà maintenant au moment tant attendu du scriptage jQuery:

//Au survol d'une area
$('area').hover(function(){
//On récupère l'id de l'area survolée
var img = $(this).attr('id');
//Remplace l'image transparente par celle de la région
$('#hovered').attr('src','./images/'+img+'.png');
},
function(){
//Quand le pointeur quitte une area, on remet l'image transparente
$('#hovered').attr('src','./images/map.gif');
});

Et voilà !!!

2 réflexions au sujet de « [Illustrator/jQuery] Comment réaliser une carte interactive (2/2) »

  1. Bonjour,

    Désolé mais je ne pige pas bien l’histoire le l’image transparente. Quelle nom doit-elle porter ? Faut-il créer une « image_vide.png » aux dimensions de la carte ? Si oui comment la nommer ?
    À mon niveau, la carte apparaît et les zones cliquables également, mais aucun changement d’image ne s’opère lorsque je survole les zones…

    Merci par avance.

    • L’image transparente est la source par défaut de l’image ayant l’id « hovered », cette image doit être aux dimensions de la carte, et le nom n’a donc pas d’importance.
      La technique utilisée ici ne fonctionne pas sous Chrome, car je crois que Chrome n’autorise pas de changement de l’attribut src d’une image une fois la page complètement chargée.

Laisser un commentaire