Carte interactive avec liens qui ne fonctionnent pas (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 25)
  • Auteur
    Messages
  • #530894
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 3.7.1
    – Version de PHP/MySQL : 5
    – Thème utilisé : Thème enfant Graphène
    – Extensions en place : SEO by YAST, Contact Forme, Akismet, Simple Popup Manager, Subscribe 2, Akismet, Captcha
    – Nom de l’hebergeur : ovh
    – Adresse du site : mesbasetmoi.com

    Problème(s) rencontré(s) : Bonjour,

    Sur mon site, je souhaite créer un annuaire sur dont la “porte d’entrée” serait une carte interactive. J’ai téléchargé une carte gratuite sur cmap et ai installé la carte sur ma page en collant le code fourni dans la page.
    J’en suis à une phase de test et justement pour tester, j’ai inséré dans le code fourni, un lien hypertexte pour voir si cela marche.

    Résultat : non ça ne marche pas, malgré l’ajout d’un lien sur la région Paris et Haute Normandie, la carte n’est pas interactive. Elle est Carte interactive.

    Voici le code de la page fourni par c-map et où j’ai inséré les liens hypertextes :

    <img class="alignleft size-full wp-image-965" alt="France-650" src="http://www.mesbasetmoi.com/wp-content/uploads/2013/11/France-650.png" width="650" height="650" /></a>
    
    Carte de France régions cliquables html
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style><!--
    body {
    background-color: #9999CC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    
    }
    td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 22px;
    
    }
    --></style> 
    
     
    <table width="100%" border="0" cellspacing="0" cellpadding="4 ">
    <tbody>
    <tr>
    <td width="650"><img title="Carte des régions" alt="" src="France-650.png" usemap="#Map" width="650" height="650" border="0" />
    
    <map name="Map"> <area title="Carte interactive gratuite" coords="570,10,570,40,640,40,640,10" shape="poly" href="http://cmap.comersis.com/" target="_blank" /> <area title="Bretagne" coords="192,160,181,164,175,155,140,152,130,159,112,136,46,150,45,182,61,197,135,221,152,214,172,205,185,201,195,193" shape="poly" href="http://www.mesbasetmoi.com/les-pharmacies-orthopediques-paris/" target="_self" /> <area title="Pays de la Loire" coords="196,163,196,194,134,221,145,262,173,292,192,297,211,294,200,257,238,245,248,219,273,186,252,169,228,165" shape="poly" href="#" target="_self" /> <area title="Basse Normandie" coords="178,154,165,89,191,91,197,110,233,118,251,109,257,141,277,172,269,181,251,166,230,161,195,163" shape="poly" href="#" target="_self" /> <area title="Poitou Charentes" coords="201,257,213,292,205,298,188,299,177,316,183,333,204,358,230,371,245,359,245,352,273,322,270,316,270,304,285,292,275,281,261,259,249,259,239,247" shape="poly" href="#" target="_self" /> <area title="Aquitaine" coords="185,345,178,400,151,476,164,494,213,511,227,476,218,465,220,444,268,432,293,380,281,353,260,338,246,352,231,372,223,375" shape="poly" href="#" target="_self" /> <area coords="217,513" shape="poly" href="#" /> <area title="Midi Pyrénées" coords="296,381,321,384,326,405,340,405,349,388,369,424,381,440,349,463,346,476,312,479,299,488,320,522,309,531,260,512,257,520,217,513,230,474,223,466,224,450,268,435" shape="poly" href="#" target="_self" /> <area title="Corse" coords="574,469,575,487,550,499,545,521,557,558,576,568,583,553,588,519,583,492,579,469" shape="poly" href="#" target="_self" /> <area title="Languedoc Roussillon" coords="379,384,365,402,380,432,383,440,352,466,346,480,313,482,303,490,322,521,313,536,344,543,369,534,366,506,386,485,413,467,417,473,444,440,436,427,414,424,399,396" shape="poly" href="#" target="_self" /> <area title="Provence Alpes Côte d'Azur" coords="439,423,448,441,423,474,489,494,514,493,530,482,561,450,573,430,568,427,554,428,535,416,540,394,538,385,521,372,506,374,511,387,476,413,485,425,474,433,459,424" shape="poly" href="#" target="_self" /> <area title="Rhône Alpes" coords="400,307,395,330,408,356,429,366,404,396,417,422,457,422,474,429,480,426,468,416,507,386,503,371,540,361,529,332,532,316,522,294,491,308,494,294,481,301,467,299,459,289,446,289,439,309" shape="poly" href="#" target="_self" /> <area title="Auvergne" coords="332,294,344,301,347,323,340,331,343,338,344,356,325,384,330,401,340,400,351,382,362,396,377,381,401,392,424,366,404,355,392,331,399,292,388,277,369,279,363,273,348,281" shape="poly" href="#" target="_self" /> <area title="Limousin" coords="286,297,330,293,345,322,338,328,340,355,323,380,298,379,284,353,266,338,274,323" shape="poly" href="#" target="_self" /> <area title="Franche Comté" coords="535,222,530,233,507,267,484,298,465,292,466,267,463,257,469,236,468,216,490,196,513,199,527,208" shape="poly" href="#" target="_self" /> <area title="Centre" coords="275,155,280,174,273,196,253,222,242,245,264,256,289,292,331,290,363,267,358,239,358,188,341,188,322,180,303,145" shape="poly" href="#" target="_self" /> <area title="Bourgogne" coords="361,186,366,270,391,276,403,303,438,304,445,287,464,287,463,219,442,216,436,196,400,201,382,175,365,176" shape="poly" href="#" target="_self" /> <area title="Alsace" coords="550,126,544,133,528,127,526,134,537,146,535,172,525,203,536,223,551,216,548,180,571,129" shape="poly" href="#" target="_self" /> <area title="Lorraine" coords="548,126,542,131,529,127,521,136,535,147,524,201,481,193,444,151,447,100,473,100,502,107" shape="poly" href="#" target="_self" /> <area title="Champagne Ardenne" coords="432,66,414,76,404,113,392,116,382,169,402,197,434,194,445,213,464,217,481,197,440,154,448,91,438,85" shape="poly" href="#" target="_self" /> <area title="Nord Pas-de-Calais" coords="307,20,340,10,356,28,367,27,383,47,388,52,407,59,408,72,365,69,341,60,305,52" shape="poly" href="http://www.mesbasetmoi.com/les-pharmacies-orthopediques-paris/" target="_self" /> <area title="Ile de France" coords="309,124,301,130,322,177,342,186,359,186,362,174,380,171,382,155,380,144,362,130,346,131,334,125" shape="poly" href="http://www.mesbasetmoi.com/les-pharmacies-orthopediques-paris";" target="_self" /> <area title="Haute Normandie" coords="245,105,253,107,269,153,301,145,297,132,309,118,311,87,297,70,268,83,251,91" shape="poly" href=" #" target="_self" /> <area title="Picardie" coords="306,53,299,70,312,89,312,122,335,124,365,130,383,143,390,114,403,110,412,77" shape="poly" href="#" target="_self" /> </map></td>
    <td>
    <h3>Configuration de la carte :</h3>
    Ouvrez cette page avec votre éditeur html ou avec le bloc-notes
    :
    
    Chaque régions est délimitée par les lignes <area
    shape=”… >
    
    Dans chacune de ces lignes, vous pouvez modifier :
    <ul>
    	<li>le lien (url) <span style="color: #ffffff;">href=”http://www.google.fr?q=région
    picardie”</span></li>
    	<li>le mode d’ouverture du lien : <span style="color: #ffffff;">target=”_self”</span></li>
    	<li>le titre : <span style="color: #ffffff;">title=”Picardie”</span></li>
    </ul>
    Cette carte convient aux sites statiques ou dynamiques.</td>
    </tr>
    </tbody>
    </table>
    <map name="allemagne"> </map>
    
     
    
     

    Quelqu’un pourrait avoir la gentillesse de m’aider ?

    En vous remerciant par avance

    #924320
    Flobogo
    Modérateur
    Maître WordPress
    16344 contributions

    Bonjour,

    Dans le code que tu as copié, tu mélanges plein de choses : le code de la carte cliquable, mais aussi les explications sur “comment faire” qui n’ont … rien à faire là !

    Donc, reprends uniquement le code pour l’image de la carte et le “maping” :
    (le code commence à <img title="Carte des régions" … et se termine après l'ensemble des coordonnées et )

    <img title="Carte des régions" alt="" src="France-650.png" usemap="#Map" width="650" height="650" border="0" /> 
     
    <map name="Map"> <area title="Carte interactive gratuite" coords="570,10,570,40,640,40,640,10" shape="poly" href="http://cmap.comersis.com/" target="_blank" /> <area title="Bretagne" coords="192,160,181,164,175,155,140,152,130,159,112,136,46,150,45,182,61,197,135,221,152,214,172,205,185,201,195,193" shape="poly" href="http://www.mesbasetmoi.com/les-pharmacies-orthopediques-paris/" target="_self" /> <area title="Pays de la Loire" coords="196,163,196,194,134,221,145,262,173,292,192,297,211,294,200,257,238,245,248,219,273,186,252,169,228,165" shape="poly" href="#" target="_self" /> <area title="Basse Normandie" coords="178,154,165,89,191,91,197,110,233,118,251,109,257,141,277,172,269,181,251,166,230,161,195,163" shape="poly" href="#" target="_self" /> <area title="Poitou Charentes" coords="201,257,213,292,205,298,188,299,177,316,183,333,204,358,230,371,245,359,245,352,273,322,270,316,270,304,285,292,275,281,261,259,249,259,239,247" shape="poly" href="#" target="_self" /> <area title="Aquitaine" coords="185,345,178,400,151,476,164,494,213,511,227,476,218,465,220,444,268,432,293,380,281,353,260,338,246,352,231,372,223,375" shape="poly" href="#" target="_self" /> <area coords="217,513" shape="poly" href="#" /> <area title="Midi Pyrénées" coords="296,381,321,384,326,405,340,405,349,388,369,424,381,440,349,463,346,476,312,479,299,488,320,522,309,531,260,512,257,520,217,513,230,474,223,466,224,450,268,435" shape="poly" href="#" target="_self" /> <area title="Corse" coords="574,469,575,487,550,499,545,521,557,558,576,568,583,553,588,519,583,492,579,469" shape="poly" href="#" target="_self" /> <area title="Languedoc Roussillon" coords="379,384,365,402,380,432,383,440,352,466,346,480,313,482,303,490,322,521,313,536,344,543,369,534,366,506,386,485,413,467,417,473,444,440,436,427,414,424,399,396" shape="poly" href="#" target="_self" /> <area title="Provence Alpes Côte d'Azur" coords="439,423,448,441,423,474,489,494,514,493,530,482,561,450,573,430,568,427,554,428,535,416,540,394,538,385,521,372,506,374,511,387,476,413,485,425,474,433,459,424" shape="poly" href="#" target="_self" /> <area title="Rhône Alpes" coords="400,307,395,330,408,356,429,366,404,396,417,422,457,422,474,429,480,426,468,416,507,386,503,371,540,361,529,332,532,316,522,294,491,308,494,294,481,301,467,299,459,289,446,289,439,309" shape="poly" href="#" target="_self" /> <area title="Auvergne" coords="332,294,344,301,347,323,340,331,343,338,344,356,325,384,330,401,340,400,351,382,362,396,377,381,401,392,424,366,404,355,392,331,399,292,388,277,369,279,363,273,348,281" shape="poly" href="#" target="_self" /> <area title="Limousin" coords="286,297,330,293,345,322,338,328,340,355,323,380,298,379,284,353,266,338,274,323" shape="poly" href="#" target="_self" /> <area title="Franche Comté" coords="535,222,530,233,507,267,484,298,465,292,466,267,463,257,469,236,468,216,490,196,513,199,527,208" shape="poly" href="#" target="_self" /> <area title="Centre" coords="275,155,280,174,273,196,253,222,242,245,264,256,289,292,331,290,363,267,358,239,358,188,341,188,322,180,303,145" shape="poly" href="#" target="_self" /> <area title="Bourgogne" coords="361,186,366,270,391,276,403,303,438,304,445,287,464,287,463,219,442,216,436,196,400,201,382,175,365,176" shape="poly" href="#" target="_self" /> <area title="Alsace" coords="550,126,544,133,528,127,526,134,537,146,535,172,525,203,536,223,551,216,548,180,571,129" shape="poly" href="#" target="_self" /> <area title="Lorraine" coords="548,126,542,131,529,127,521,136,535,147,524,201,481,193,444,151,447,100,473,100,502,107" shape="poly" href="#" target="_self" /> <area title="Champagne Ardenne" coords="432,66,414,76,404,113,392,116,382,169,402,197,434,194,445,213,464,217,481,197,440,154,448,91,438,85" shape="poly" href="#" target="_self" /> <area title="Nord Pas-de-Calais" coords="307,20,340,10,356,28,367,27,383,47,388,52,407,59,408,72,365,69,341,60,305,52" shape="poly" href="http://www.mesbasetmoi.com/les-pharmacies-orthopediques-paris/" target="_self" /> <area title="Ile de France" coords="309,124,301,130,322,177,342,186,359,186,362,174,380,171,382,155,380,144,362,130,346,131,334,125" shape="poly" /> <area title="Haute Normandie" coords="245,105,253,107,269,153,301,145,297,132,309,118,311,87,297,70,268,83,251,91" shape="poly" href=" #" target="_self" /> <area title="Picardie" coords="306,53,299,70,312,89,312,122,335,124,365,130,383,143,390,114,403,110,412,77" shape="poly" href="#" target="_self" /> </map>

    Attention aussi à bien insérer ta carte aux dimensions demandées, c’est à dire en 650 x 650 , sinon le code de délimitation des régions ne sera plus bon !!

    #924321
    Flobogo
    Modérateur
    Maître WordPress
    16344 contributions

    Bon, quelque chose m’échappe dans la colorisation du code ci-dessus, donc je remets le code ci-dessous :

    <img src="France-650.png" width="650" height="650" title="Carte des régions">
          <map name="Map">
            <area shape="poly" coords="570,10,570,40,640,40,640,10" href="http://cmap.comersis.com/" target="_blank" title="Carte interactive gratuite">
            <area shape="poly" coords="192,160,181,164,175,155,140,152,130,159,112,136,46,150,45,182,61,197,135,221,152,214,172,205,185,201,195,193" href="#" target="_self" title="Bretagne">
            <area shape="poly" coords="196,163,196,194,134,221,145,262,173,292,192,297,211,294,200,257,238,245,248,219,273,186,252,169,228,165" href="#" target="_self" title="Pays de la Loire">
            <area shape="poly" coords="178,154,165,89,191,91,197,110,233,118,251,109,257,141,277,172,269,181,251,166,230,161,195,163" href="#" target="_self" title="Basse Normandie">
            <area shape="poly" coords="201,257,213,292,205,298,188,299,177,316,183,333,204,358,230,371,245,359,245,352,273,322,270,316,270,304,285,292,275,281,261,259,249,259,239,247" href="#" target="_self" title="Poitou Charentes">
            <area shape="poly" coords="185,345,178,400,151,476,164,494,213,511,227,476,218,465,220,444,268,432,293,380,281,353,260,338,246,352,231,372,223,375" href="#" target="_self" title="Aquitaine">
            <area shape="poly" coords="217,513" href="#">
            <area shape="poly" coords="296,381,321,384,326,405,340,405,349,388,369,424,381,440,349,463,346,476,312,479,299,488,320,522,309,531,260,512,257,520,217,513,230,474,223,466,224,450,268,435" href="#" target="_self" title="Midi Pyrénées">
            <area shape="poly" coords="574,469,575,487,550,499,545,521,557,558,576,568,583,553,588,519,583,492,579,469" href="#" target="_self" title="Corse">
            <area shape="poly" coords="379,384,365,402,380,432,383,440,352,466,346,480,313,482,303,490,322,521,313,536,344,543,369,534,366,506,386,485,413,467,417,473,444,440,436,427,414,424,399,396" href="#" target="_self" title="Languedoc Roussillon">
            <area shape="poly" coords="439,423,448,441,423,474,489,494,514,493,530,482,561,450,573,430,568,427,554,428,535,416,540,394,538,385,521,372,506,374,511,387,476,413,485,425,474,433,459,424" href="#" target="_self" title="Provence Alpes Côte d'Azur">
            <area shape="poly" coords="400,307,395,330,408,356,429,366,404,396,417,422,457,422,474,429,480,426,468,416,507,386,503,371,540,361,529,332,532,316,522,294,491,308,494,294,481,301,467,299,459,289,446,289,439,309" href="#" target="_self" title="Rhône Alpes">
            <area shape="poly" coords="332,294,344,301,347,323,340,331,343,338,344,356,325,384,330,401,340,400,351,382,362,396,377,381,401,392,424,366,404,355,392,331,399,292,388,277,369,279,363,273,348,281" href="#" target="_self" title="Auvergne">
            <area shape="poly" coords="286,297,330,293,345,322,338,328,340,355,323,380,298,379,284,353,266,338,274,323" href="#" target="_self" title="Limousin">
            <area shape="poly" coords="535,222,530,233,507,267,484,298,465,292,466,267,463,257,469,236,468,216,490,196,513,199,527,208" href="#" target="_self" title="Franche Comté">
            <area shape="poly" coords="275,155,280,174,273,196,253,222,242,245,264,256,289,292,331,290,363,267,358,239,358,188,341,188,322,180,303,145" href="#" target="_self" title="Centre">
            <area shape="poly" coords="361,186,366,270,391,276,403,303,438,304,445,287,464,287,463,219,442,216,436,196,400,201,382,175,365,176" href="#" target="_self" title="Bourgogne">
            <area shape="poly" coords="550,126,544,133,528,127,526,134,537,146,535,172,525,203,536,223,551,216,548,180,571,129" href="#" target="_self" title="Alsace">
            <area shape="poly" coords="548,126,542,131,529,127,521,136,535,147,524,201,481,193,444,151,447,100,473,100,502,107" href="#" target="_self" title="Lorraine">
            <area shape="poly" coords="432,66,414,76,404,113,392,116,382,169,402,197,434,194,445,213,464,217,481,197,440,154,448,91,438,85" href="#" target="_self" title="Champagne Ardenne">
            <area shape="poly" coords="307,20,340,10,356,28,367,27,383,47,388,52,407,59,408,72,365,69,341,60,305,52" href="#" target="_self" title="Nord Pas-de-Calais">
            <area shape="poly" coords="309,124,301,130,322,177,342,186,359,186,362,174,380,171,382,155,380,144,362,130,346,131,334,125" href="#" target="_self" title="Ile de France">
            <area shape="poly" coords="245,105,253,107,269,153,301,145,297,132,309,118,311,87,297,70,268,83,251,91" href="#" target="_self" title="Haute Normandie">
            <area shape="poly" coords="306,53,299,70,312,89,312,122,335,124,365,130,383,143,390,114,403,110,412,77" href="#" target="_self" title="Picardie">
          </map>

    Reprenez le code que je viens de coller ici, et ajoutez vos liens à la place de # dans chaque href=”#” (ne pas oublier les guillemets)
    Et comme dit ci-dessus, insérez bien votre image en 650 x 650

    #924322
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Bonjour Flogobo et merci de ta réponse.

    Concernant le code que j’avais copié, il me semblait que les indications étaient simplement des commentaires et n’influençaient pas le code actif. Enfin bref, je les ai supprimés, c’est plus propre. Et j’avais bien inséré les liens à la place du #. La carte était à la bonne dimension.
    J’ai refait la manip en recopiant ton code et en réinsérant 2 liens hypertextes pour la Bretagne et Paris. Mais ils ne fonctionnent toujours pas.

    Voici le code

     
    
     
    <img class="alignleft size-full wp-image-965" alt="France-650" src="http://www.mesbasetmoi.com/wp-content/uploads/2013/11/France-650.png" width="650" height="650" />
    
    <img src="France-650.png" width="650" height="650" title="Carte des régions">
          <map name="Map">
            <area shape="poly" coords="570,10,570,40,640,40,640,10" href="http://cmap.comersis.com/" target="_blank" title="Carte interactive gratuite">
            <area shape="poly" coords="192,160,181,164,175,155,140,152,130,159,112,136,46,150,45,182,61,197,135,221,152,214,172,205,185,201,195,193" href="http://www.mesbasetmoi.com/tag/annuaire-pharmacie-orthopediste/" target="_self" title="Bretagne">
            <area shape="poly" coords="196,163,196,194,134,221,145,262,173,292,192,297,211,294,200,257,238,245,248,219,273,186,252,169,228,165" href="#" target="_self" title="Pays de la Loire">
            <area shape="poly" coords="178,154,165,89,191,91,197,110,233,118,251,109,257,141,277,172,269,181,251,166,230,161,195,163" href="#" target="_self" title="Basse Normandie">
            <area shape="poly" coords="201,257,213,292,205,298,188,299,177,316,183,333,204,358,230,371,245,359,245,352,273,322,270,316,270,304,285,292,275,281,261,259,249,259,239,247" href="#" target="_self" title="Poitou Charentes">
            <area shape="poly" coords="185,345,178,400,151,476,164,494,213,511,227,476,218,465,220,444,268,432,293,380,281,353,260,338,246,352,231,372,223,375" href="#" target="_self" title="Aquitaine">
            <area shape="poly" coords="217,513" href="#">
            <area shape="poly" coords="296,381,321,384,326,405,340,405,349,388,369,424,381,440,349,463,346,476,312,479,299,488,320,522,309,531,260,512,257,520,217,513,230,474,223,466,224,450,268,435" href="#" target="_self" title="Midi Pyrénées">
            <area shape="poly" coords="574,469,575,487,550,499,545,521,557,558,576,568,583,553,588,519,583,492,579,469" href="#" target="_self" title="Corse">
            <area shape="poly" coords="379,384,365,402,380,432,383,440,352,466,346,480,313,482,303,490,322,521,313,536,344,543,369,534,366,506,386,485,413,467,417,473,444,440,436,427,414,424,399,396" href="#" target="_self" title="Languedoc Roussillon">
            <area shape="poly" coords="439,423,448,441,423,474,489,494,514,493,530,482,561,450,573,430,568,427,554,428,535,416,540,394,538,385,521,372,506,374,511,387,476,413,485,425,474,433,459,424" href="#" target="_self" title="Provence Alpes Côte d'Azur">
            <area shape="poly" coords="400,307,395,330,408,356,429,366,404,396,417,422,457,422,474,429,480,426,468,416,507,386,503,371,540,361,529,332,532,316,522,294,491,308,494,294,481,301,467,299,459,289,446,289,439,309" href="#" target="_self" title="Rhône Alpes">
            <area shape="poly" coords="332,294,344,301,347,323,340,331,343,338,344,356,325,384,330,401,340,400,351,382,362,396,377,381,401,392,424,366,404,355,392,331,399,292,388,277,369,279,363,273,348,281" href="#" target="_self" title="Auvergne">
            <area shape="poly" coords="286,297,330,293,345,322,338,328,340,355,323,380,298,379,284,353,266,338,274,323" href="#" target="_self" title="Limousin">
            <area shape="poly" coords="535,222,530,233,507,267,484,298,465,292,466,267,463,257,469,236,468,216,490,196,513,199,527,208" href="#" target="_self" title="Franche Comté">
            <area shape="poly" coords="275,155,280,174,273,196,253,222,242,245,264,256,289,292,331,290,363,267,358,239,358,188,341,188,322,180,303,145" href="#" target="_self" title="Centre">
            <area shape="poly" coords="361,186,366,270,391,276,403,303,438,304,445,287,464,287,463,219,442,216,436,196,400,201,382,175,365,176" href="#" target="_self" title="Bourgogne">
            <area shape="poly" coords="550,126,544,133,528,127,526,134,537,146,535,172,525,203,536,223,551,216,548,180,571,129" href="#" target="_self" title="Alsace">
            <area shape="poly" coords="548,126,542,131,529,127,521,136,535,147,524,201,481,193,444,151,447,100,473,100,502,107" href="#" target="_self" title="Lorraine">
            <area shape="poly" coords="432,66,414,76,404,113,392,116,382,169,402,197,434,194,445,213,464,217,481,197,440,154,448,91,438,85" href="#" target="_self" title="Champagne Ardenne">
            <area shape="poly" coords="307,20,340,10,356,28,367,27,383,47,388,52,407,59,408,72,365,69,341,60,305,52" href="#" target="_self" title="Nord Pas-de-Calais">
            <area shape="poly" coords="309,124,301,130,322,177,342,186,359,186,362,174,380,171,382,155,380,144,362,130,346,131,334,125" href="http://www.mesbasetmoi.com/tag/annuaire-pharmacie-orthopediste/" target="_self" title="Ile de France">
            <area shape="poly" coords="245,105,253,107,269,153,301,145,297,132,309,118,311,87,297,70,268,83,251,91" href="#" target="_self" title="Haute Normandie">
            <area shape="poly" coords="306,53,299,70,312,89,312,122,335,124,365,130,383,143,390,114,403,110,412,77" href="#" target="_self" title="Picardie">
          </map>

    Il doit y avoir un “mini truc” qui bloque… mais je ne le vois pas…

    #924323
    Flobogo
    Modérateur
    Maître WordPress
    16344 contributions

    désolée, trop fatiguée hier soir …

    Mais là, je vois pas … Tu as bien inséré le code de la carte en mode HTML (= en cliquant sur l’onglet “text” dans ton éditeur visuel) ?

    Si ce n’est pas ça le souci, il faudra que je me penche sur le code ce WE.
    J’ai utilisé ce code de la carte de France du site C-map sur un petit site perso (site familial à accès privé), mais j’irais voir le code source et je reviendrais te le coller ici.

    #924324
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Oui, tout à fait, j’ai inséré le code dans le bon onglet… je ne vois pas du tout pourquoi ça ne marche pas.

    Si tu peux copier ton code, j’avoue que je suis “preneuse” car je pourrais comparer. Merci pour ton aide.🙂

    #924325
    Flobogo
    Modérateur
    Maître WordPress
    16344 contributions

    Je verrais ça dès que possible.

    #924326
    Flobogo
    Modérateur
    Maître WordPress
    16344 contributions

    En fait, j’ai retrouvé cette discussion : page avec bouton (cliquable)
    Tu peux la consulter, le principe est le même : celui qui demandait de l’aide avait une forme ronde, où il insérait 3 boutons rectangulaires, chaque “bouton” renvoyant vers une autre page du site.

    C’est exactement le même genre de code, sauf que pour lui, shape=”rect” (pour la forme rectangulaire du bouton cliquable), alors que toi, c’est shape=”poly”
    Le seul problème venait de la taille de son image (le cercle de départ) qui n’était pas bonne. Je me demande si ton image ne serait pas redimensionnée …

    Essaie peut-être de reprendre le code original fourni dans le dossier zippé de C-map, et de rajouter un seul lien, pour voir. (même vers une page quelconque ou une page-test)

    #924327
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Merci Flogobo.
    J’ai téléchargé la carte, vérifié les dimensions, inséré un lien et … toujours pareil, pas de réaction. Le lien est toujours inactif.
    Demain, j’essaie avec les liens de l’autre page que tu as mentionné.

    Je reviens pour dire si j’ai enfin réussi à faire cette carte interactive…

    #924328
    Flobogo
    Modérateur
    Maître WordPress
    16344 contributions

    OK. Tu remettras le lien de ta page de test, sauf si c’est le même que dans ton 1er post (“carte interactive”)

    #924329
    r030388
    Membre
    Initié WordPress
    6 contributions

    Bonjour,

    Je me permets de déterrer ce post car j’ai un problème concernant les cartes interactives.

    Quand j’utilise mon code dans un article, l’image et les liens cliquables ne sont pas correctement alignés. Quand j’utilise ce code directement avec mon navigateur cela fonctionne. Je pense qu’il s’agit d’un problème de taille d’image (elle est redimensionné quand je l’insère dans l’article) et la position “absolu” des points sur ma carte. Savez vous comment puis je rendre mes “map” / “area” proportionnel à la taille de mon image ? (je suis désolé d’utiliser autant d’approximation technique pour expose mon problème).

    Voici mon code :

    <a href="http://test.fr/wp-content/uploads/2013/12/MAp2.bmp"><img class="aligncenter size-medium wp-image-38" alt="MAp2" src="http://test.fr/wp-content/uploads/2013/12/MAp2.bmp" width="1" height="1" /></a>
    
    <img alt="" src="http://test.fr/wp-content/uploads/2013/12/MAp2.bmp" usemap="#map" width="1108" height="670" border="0" />
    
    <map name="map"> 
    
    <area coords="201,94,216,94,229,86,237,92,240,108,244,112,237,120,240,139,236,144,239,174,227,174,208,186,196,186,192,193,174,175,155,168,152,158,190,138" shape="poly" href="http://www.test.fr/beauvoir-sur-mer" target="Beauvoir" /> <area title="Beauvoir-sur-Mer" coords="155,167,174,175,193,193,197,205,219,202,263,226,271,233,276,232,285,240,270,241,271,249,263,250,255,246,252,249,253,257,240,258,232,240,226,241,222,234,212,238,215,249,223,256,218,261,200,260,186,244,176,250,139,217,136,173" shape="poly" href="http:/www.test.fr/saint-jean-de-Monts" /> <area title="Saint-jean-de-Monts" coords="243,112,255,113,256,123,271,138,291,137,298,147,293,155,331,157,336,187,332,193,332,209,311,213,314,220,302,225,302,235,296,240,284,240,277,232,271,233,262,226,220,203,197,205,192,191,196,186,209,187,226,174,239,174,236,144,239,139,237,118,244,112" shape="poly" href="http:/www.test.fr/challans" /> <area title="Challans" coords="302,234,313,247,307,253,311,266,307,277,325,290,345,286,349,301,337,301,308,320,306,328,317,328,308,345,283,368,264,365,263,355,239,328,241,324,222,298,214,299,210,293,208,280,177,249,187,245,200,260,218,261,224,257,214,248,213,238,224,235,226,241,233,241,240,259,253,257,253,248,256,244,262,250,271,249,271,241,297,240,302,235" shape="poly" href="http:/www.test.fr/Saint-gilles-croix-de-vie" /> <area title="Saint-gilles-croix-de-vie" coords="343,287,349,277,346,270,395,262,403,246,416,243,415,238,407,233,411,222,407,218,424,212,420,206,423,198,436,202,451,190,477,205,482,201,495,205,510,223,504,229,521,245,514,253,514,259,503,265,487,261,482,267,483,273,475,283,479,289,474,295,465,289,457,290,452,303,420,292,411,301,376,297,361,313,348,300,349,300" shape="poly" href="http:/www.test.fr/palluau" /> <area title="Palluau" coords="308,344,343,353,343,361,335,368,324,366,315,395,325,394,332,400,352,401,355,422,344,421,348,428,345,441,333,441,325,458,294,427,279,430,277,398,267,389,265,365,283,367" shape="poly" href="http:/www.test.fr/les-sables-d-olonne" /> <area title="les-sables-d-olonne" coords="306,328,308,320,338,301,349,301,361,313,376,296,397,300,387,318,389,325,401,321,415,334,419,345,417,357,437,381,444,405,435,408,379,392,362,394,352,402,330,400,325,395,315,395,324,366,334,368,344,360,343,353,310,345,310,344,316,329" shape="poly" href="http:/www.test.fr/la-mothe-achard" /> <area title="La Mothe Achard" coords="442,394,450,393,455,373,495,320,472,295,465,289,457,290,453,303,421,293,412,301,396,300,387,318,389,324,401,320,416,335,419,345,418,356,418,357,437,381" shape="poly" href="http:/www.test.fr/la-RSY-nord" /> <area title="La Roche sur Yon Nord" coords="324,458,334,441,345,440,348,428,344,421,355,422,353,401,363,393,378,392,431,407,424,417,439,437,441,449,453,447,460,455,466,455,470,448,475,453,476,463,465,470,462,503,450,501,444,503,447,517,435,517,407,491,396,495,359,487,352,478,354,472" shape="poly" href="http:/www.test.fr/talmont-saint-hilaire" /> <area title="talmont-saint-hilaire" coords="71,273,100,290,114,304,99,301,88,309,65,293,64,274,64,275,65,276" shape="poly" href="http:/www.test.fr/ile-d-yeu" /> <area title="ile-d-yeu" coords="131,168,139,161,138,127,107,113,106,107,112,102,113,92,101,83,76,82,76,95,71,103,78,107,93,126,105,121,130,144" shape="poly" href="http:/www.test.fr/noirmoutier" /> <area title="noirmoutier" coords="492,204,506,181,501,171,497,157,484,158,471,169,461,161,469,146,465,146,465,129,474,122,465,118,464,93,453,94,427,110,430,114,427,132,429,139,427,146,439,157,429,169,431,180,444,186,446,193,452,191,477,204,483,201" shape="poly" href="http:/www.test.fr/rocheservière" /> <area title="rocheservière" coords="501,157,516,140,505,129,515,99,544,104,544,93,552,90,552,80,561,71,594,85,598,100,629,108,625,111,621,117,627,126,619,137,606,134,603,138,613,152,603,157,612,165,617,165,609,179,583,179,574,170,567,180,540,184,524,165,501,158" shape="poly" href="http:/www.test.fr/montaigu" /> <area title="Montaigu" coords="473,294,494,320,560,309,565,322,576,325,599,310,617,314,618,324,636,318,643,321,643,311,630,302,628,293,617,292,623,253,617,251,604,249,591,253,575,246,573,236,566,235,564,241,553,241,541,252,520,245,514,252,514,259,503,264,487,262,483,268,483,272,476,282,479,290" shape="poly" href="http:/www.test.fr/les-essarts" /> <area title="Les Essarts" coords="604,249,606,233,617,227,621,208,627,206,613,194,623,186,629,172,619,166,609,180,585,178,574,170,565,180,540,185,524,166,498,158,502,176,506,182,494,204,510,224,504,229,521,244,542,252,553,241,565,240,566,235,573,236,575,247,592,253" shape="poly" href="http:/www.test.fr/Saint-fulgent" /> <area title="Saint Fulgent" coords="628,294,642,286,658,294,674,293,674,279,664,272,664,262,674,261,679,254,707,246,709,233,717,232,727,221,738,221,748,204,742,189,722,196,710,190,693,201,674,190,653,190,653,182,629,174,624,186,614,194,627,206,621,208,617,226,606,233,605,249,620,249,624,255,618,292" shape="poly" href="http:/www.test.fr/les-herbiers" /> <area title="Les Herbiers" coords="762,209,749,206,742,189,722,195,710,190,692,201,675,190,654,189,652,181,630,174,616,167,604,158,613,151,601,134,618,136,627,128,622,117,628,108,679,125,688,122,705,135,725,135,733,144,735,153,742,154,765,180,768,195" shape="poly" href="http:/www.test.fr/mortagne-sur-sèvre" /> <area title="Mortagne sur Sèvre" coords="763,210,748,207,738,221,727,222,718,232,708,234,707,245,682,253,676,260,693,273,693,288,699,292,692,333,738,336,745,328,755,328,762,336,790,328,790,321,779,315,788,306,797,309,808,301,808,273,821,263" shape="poly" href="http:/www.test.fr/pouzauges" /> <area title="Pouzauges" coords="458,369,481,401,479,414,508,411,520,406,524,398,510,389,520,383,531,389,553,376,565,383,573,376,568,368,574,360,567,335,579,333,576,324,565,322,560,309,494,320" shape="poly" href="http:/www.test.fr/la-RSY-sud" /> <area title="La Roche Sur Yon Sud" coords="575,362,568,335,579,333,577,325,600,310,618,315,618,325,636,318,643,321,642,311,631,303,627,294,642,286,657,293,674,293,673,278,666,273,664,273,664,261,676,260,694,274,693,288,698,292,691,334,681,336,686,341,683,357,672,368,663,368,646,360,632,368,641,379,630,393,616,395,604,374,594,376" shape="poly" href="http:/www.test.fr/Chantonnay" /> <area title="Chantonnay" coords="809,301,819,302,820,315,834,336,829,340,830,343,844,355,836,362,834,373,845,372,853,384,847,392,855,404,845,412,851,420,842,425,829,421,831,411,816,404,774,434,758,408,755,409,749,412,747,399,716,394,716,379,719,367,700,357,700,348,686,340,683,336,692,334,738,336,743,328,756,329,764,337,789,329,790,320,779,314,789,306,798,309" shape="poly" href="http:/www.test.fr/la-chataigneraie" /> <area title="La Châtaigneraie" coords="605,441,595,432,598,428,614,428,623,417,612,405,616,393,628,394,641,378,633,367,645,360,667,369,681,361,686,340,700,347,702,357,720,368,716,381,695,378,690,387,703,403,699,416,674,419,674,435,681,435,665,455,644,448,630,457,622,450,621,442,621,443" shape="poly" href="http:/www.test.fr/Saint-hermine" /> <area title="Saint-Hermine" coords="629,457,646,449,666,455,682,435,675,434,674,419,700,417,703,404,691,389,695,378,715,381,717,394,749,399,749,412,758,407,770,429,746,462,720,463,712,478,708,478,703,472,686,472,673,491,677,496,667,503,625,482,633,474" shape="poly" href="http:/www.test.fr/l-hermenault" /> <area title="L'Hermenault" coords="770,428,763,439,772,454,779,451,787,462,775,471,781,481,792,481,793,491,789,496,780,492,771,499,764,501,767,511,783,516,791,507,804,505,811,513,804,520,829,540,841,526,835,522,836,503,850,490,842,474,845,460,838,455,840,443,857,442,857,423,852,418,842,426,831,420,830,410,816,404,775,433" shape="poly" href="http:/www.test.fr/saint-Hilaire-des-Loges" /> <area title="Saint-Hilaire des Loges" coords="841,526,848,514,884,535,865,557,853,551,841,565,831,566,820,579,802,569,781,583,753,565,752,558,735,559,729,571,711,563,719,547,718,529,740,535,745,517,762,520,770,513,783,516,791,506,804,506,811,513,805,520,828,540" shape="poly" href="http:/www.test.fr/maillezais" /> <area title="Maillezais" coords="711,563,719,548,718,530,707,525,666,503,625,483,582,503,579,566,625,566,632,545,672,543,689,536,686,557,678,564,687,575,709,571" shape="poly" href="http:/www.test.fr/chaillé-les-marais" /> <area title="Chaillé les Marais" coords="509,412,522,406,522,397,508,390,514,385,532,388,552,376,564,384,573,375,567,368,575,360,593,376,604,374,616,395,612,406,623,417,614,428,596,428,596,433,603,441,589,452,558,450,550,463,527,464,520,460,528,430" shape="poly" href="http:/www.test.fr/mareuil-sur-lay" /> <area title="Mareuil Sur Lay" coords="579,566,582,503,624,482,632,473,629,457,621,448,621,443,603,441,588,451,557,450,550,462,527,464,517,494,512,495,501,493,482,508,484,537,505,539,503,547,522,578,527,571,532,575,532,588,551,596,562,596,562,586,570,578,566,573" shape="poly" href="http:/www.test.fr/luçon" /> <area title="Luçon" coords="522,578,515,582,496,555,484,546,450,546,434,535,435,517,449,516,444,503,450,502,463,503,465,470,476,463,475,453,470,448,466,455,461,456,453,446,442,449,439,437,425,418,430,407,439,409,444,404,442,394,450,392,458,371,481,400,480,411,509,411,527,430,520,460,527,464,516,494,500,493,483,507,484,537,505,539,503,548" shape="poly" href="http:/www.test.fr/moutiers-les-maufaits" /> <area title="moutiers-les-maufaits" coords="713,478,720,463,746,462,763,439,772,454,778,451,787,462,775,471,781,481,792,481,793,491,789,496,779,492,771,499,764,501,768,512,771,513,762,519,746,517,740,535,718,529,666,503,677,496,673,491,686,472,703,472,708,478" shape="poly" href="http:/www.test.fr/Fontenay-le-Compte" /> <area title="Fontenay-le-Compte" </map>

    #924330
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Si tu utilises la carte de C-map, il faut mettre les dimensions à la bonne taille (650×650 je crois). Dans ton code, les dimensions sont à 1108×670.

    Je n’ai pas solutionner mon pb, je m’y (re)penche début janvier.

    #924331
    r030388
    Membre
    Initié WordPress
    6 contributions

    Merci pour ta réponse.

    Existe t’il un autre moyen d’afficher une carte interactive que l’article (oui je sais quelle question de débutant ^^).

    Sinon as tu essayé sans c-map ? moi am carte fonctionne très bien sinon.

    #924332
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Tu peux mettre la carte dans une page… mais je ne sais pas si cela répond à ta question.

    Je vais tenter am carte si je ne m’en sors pas avec c-map. Merci pour cette ressource.

    #924333
    r030388
    Membre
    Initié WordPress
    6 contributions

    Oui cela répond à ma question. Concernant ton code, je l’ai testé et chez moi il fonctionne, quel est ton problème ? Merci.

15 sujets de 1 à 15 (sur un total de 25)
  • Vous devez être connecté pour répondre à ce sujet.