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

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

    Ah oui, il fonctionne chez toi ?

    Chez moi, les liens sont inactifs. Bon, je vais m’y remettre pour que ça marche. Il n’y a pas de raison !!:o

    #924335
    Flobogo
    Modérateur
    Maître WordPress
    16350 contributions

    @ R030388 :
    On peut insérer le code de la carte partout où on peut mettre du HTML, donc à priori dans un article ou une page, peu importe. En théorie, même dans un widget … sauf qu’il y aurait un pb de taille !

    C’est d’ailleurs le souci que vous évoquez : pour que vos “points” qui délimitent les zones cliquables correspondent à votre code, il faut en effet que l’image soit toujours à la même dimension qu’au départ 💡

    Quand vous insérez votre image dans l’article ou la page, dans la fenêtre de choix de l’image, choix du “title”, etc … vous avez la possibilité de modifier la taille d’insertion automatique, et de choisir “taille réelle”

    Mais évidemment, il faut que la taille indiquée soit compatible avec votre contenu : vous ne pourrez pas insérer une image de 1108 px de large si votre contenu ne fait que 900 px de large, par exemple 😋

    #924336
    r030388
    Membre
    Initié WordPress
    6 contributions

    @Flobogo :

    Merci pour tous ces précieux conseils ! =) Je vais essayer tout cela. Encore merci =)

    #924337
    r030388
    Membre
    Initié WordPress
    6 contributions

    @Petitecirce :

    En faîtes, tu as un petit bug dans ton code au niveau de l’écriture de ta première ligne :

    <img src="France-650.png" width="650" height="650" usemap="#map" />
    
    
          <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>

    Tu dois utiliser le “usemap” afin que ton image soit considéré comme une zone cliquable. Le # est obligatoire (c’est une “ancre”). Et ça fonctionne très bien ! =)

    #924338
    r030388
    Membre
    Initié WordPress
    6 contributions

    Heu pardon j’ai utiliser mon code ( j’ai télécharger l’image) pour toi ce sera :

    <img src="http://www.mesbasetmoi.com/wp-content/uploads/2013/11/France-650.png" width="650" height="650" usemap="#map" />
    
    
          <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>

    Existe t’il un bouton ” modifier son commentaire” ? Car je risque de spammer :s

    #924339
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    r030388,

    Merci de t’être penché sur “mon problème”. C’est adorable !

    J’essaie aujourd’hui !

    #924340
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Les liens de la carte fonctionnent !

    r030388, merci pour avoir corrigé le bug. J’avais ce pb, et un autre : en téléchargeant la carte depuis la bibliothèque, j’avais bien configuré les bonnes dimensions. Avec ta correction du bug, certaines parties de la carte avaient des liens actifs, mais les régions étaient décalées malgré la carte aux bonnes dimensions.

    Comme la carte est sur une page et non sur un post, j’ai changé de modèle et est sélectionné un modèle de page avec une colonne unique (au lieu d’un modèle par défaut en trois colonnes). Bingo !
    Les liens fonctionnent et les régions sont à leur place. Nickel.
    Merci !

    Le sujet est résolu ! ✅

    #924341
    Flobogo
    Modérateur
    Maître WordPress
    16350 contributions

    @ Petitecirce :

    Oui, c’est ce que je disais hier :

    il faut que la taille indiquée soit compatible avec votre contenu

    En fait, même si on indique des dimensions correctes pour l’image comme widht=”650″ et height=”650″ … ça ne passe pas, dans le cas où le template de page impose une largeur de 630 px seulement … Ce qui était ton cas, je pense : quand j’avais regardé ton site il me semblait bien que ta carte était un peu moins grande que la mienne mais je ne comprenais pas pourquoi !
    Tu m’as mise sur la voie en disant que l’image de R030388 ne pouvait pas passer car trop grande !

    Et bravo à R030388 qui a trouvé pourquoi ton code buggait : il y avait bien le usemap=”#map” mais il n’était pas placé au bon endroit : ton code comportait 2 liens image, un inactif par rapport à ton site, car “copié-collé” du code initial et l’autre actif avec l’image … mais sans le “usemap” à l’intérieur 😕

    Comme quoi, à plusieurs, on finit par s’en sortir : il y a plus d’idées dans plusieurs têtes que dans une seule 💡

    #924342
    petitecirce
    Membre
    Chevalier WordPress
    168 contributions

    Oui, ça m’a bien rendu service 👏

    #924343
    Comersis
    Participant
    Initié WordPress
    2 contributions

    Bonjour,

    pour celles et ceux que ça intéresse, Cmap (comersis.com) vient de sortir un plugin WP gratuit carte des régions de France style le bon coin.
    Cette carte cliquable est développée en Javascript, compatible tablettes & smartphones, paramétrable …
    Infos et téléchargement sur notre blog

    @ bientôt

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