Bonjour à tous,
Je développe actuellement un site internet sur lequel se trouve une carte du monde avec différents pays clicables.
Lorsque l'on clic sur un pays, une petite info box s'affiche au dessus du pays et donne quelques informations (comme sur google map lorsqu'on clic sur un adresse).
Les zones clicables ont bien été définies, et mes info box sont bien placées.
Cela fonctionne très bien sur firefox, et sous IE (étonnant lol), mais sous chrome, toutes mes zones clicables sont décalées de quelques pixels et mes info box s'affichent avec ce même décalage.
J'aimerai savoir si quelqu'un aurait une idée de la cause de ce problème ?
Voici mon code: (par soucis de lisibilité, je n'ai mis que le code de deux des info box)
Edit: Précision: le site est un thème wordpress
Modifié par faf95c (06 Jun 2012 - 05:29)
Je développe actuellement un site internet sur lequel se trouve une carte du monde avec différents pays clicables.
Lorsque l'on clic sur un pays, une petite info box s'affiche au dessus du pays et donne quelques informations (comme sur google map lorsqu'on clic sur un adresse).
Les zones clicables ont bien été définies, et mes info box sont bien placées.
Cela fonctionne très bien sur firefox, et sous IE (étonnant lol), mais sous chrome, toutes mes zones clicables sont décalées de quelques pixels et mes info box s'affichent avec ce même décalage.
J'aimerai savoir si quelqu'un aurait une idée de la cause de ce problème ?
Voici mon code: (par soucis de lisibilité, je n'ai mis que le code de deux des info box)
<img id="mapworld" src="/wp-content/uploads/2012/06/countries3.png" alt="" width="100%" height="100%" usemap="#map" border="0" />
<div id="info_china" class="info"><img src="/wp-content/uploads/2012/05/pop_up.png" alt="" />
<table class="infobulle">
<tbody>
<tr class="line">
<td class="titles">Country</td>
<td class="right_column">: China</td>
</tr>
<tr class="line">
<td class="titles">Population</td>
<td class="right_column">: 1.3 billion</td>
</tr>
<tr class="line">
<td class="titles">GDP</td>
<td class="right_column">: $11.3 trillion</td>
</tr>
<tr class="line">
<td class="titles">Capital</td>
<td class="right_column">: Beijing</td>
</tr>
</tbody>
</table>
</div>
<div id="info_india" class="info"><img src="/wp-content/uploads/2012/05/pop_up.png" alt="" />
<table class="infobulle">
<tbody>
<tr class="line">
<td class="titles">Country</td>
<td class="right_column">: India</td>
</tr>
<tr class="line">
<td class="titles">Population</td>
<td class="right_column">: 1.2 billion</td>
</tr>
<tr class="line">
<td class="titles">GDP</td>
<td class="right_column">: $1.67 trillion</td>
</tr>
<tr class="line">
<td class="titles">Capital</td>
<td class="right_column">: New Delhi</td>
</tr>
</tbody>
</table>
</div>
<map name="map" id="my_map">
<!--countries names-->
<area shape="rect" coords="83,251,103,261" alt="Peru" href="#mapworld" onclick="showPeru();"/>
<area shape="rect" coords="334,183,369,190" alt="Pakistan" href="#mapworld" onclick="showPakistan();"/>
<area shape="rect" coords="353,222,388,229" alt="Sri Lanka" href="#mapworld" onclick="showSriLanka();" />
<area shape="rect" coords="429,222,463,228" alt="Malaysia" href="#mapworld" onclick="showMalaysia();" />
<area shape="rect" coords="381,199,416,206" alt="Myanmar" href="#mapworld" onclick="showMyanmar();" />
<area shape="rect" coords="439,209,469,216" alt="Vietnam" href="#mapworld" onclick="showVietnam();" />
<area shape="rect" coords="430,231,468,238" alt="Singapore" href="#mapworld" onclick="showSingapore();" />
<area shape="rect" coords="450,193,489,200" alt="Hong Kong" href="#mapworld" onclick="showHongKong();"/>
<area shape="rect" coords="390,229,424,236" alt="Indonesia" href="#mapworld" onclick="showIndonesia();"/>
<area shape="rect" coords="392,216,425,224" alt="Thailand" href="#mapworld" onclick="showThailand();"/>
<area shape="rect" coords="406,187,450,194" alt="Bangladesh" href="#mapworld" onclick="showBangladesh();"/>
<!--countries areas-->
<area shape="poly" coords="376,157,378,161,379,163,382,166,385,165,388,165,389,167,386,170,386,176,390,177,394,179,399,182,404,182,407,180,409,182,411,182,416,179,418,180,419,182,421,182,422,183,423,187,421,188,421,190,423,190,425,196,428,195,427,193,432,193,432,192,435,192,438,195,440,195,442,197,441,199,440,202,442,202,445,201,445,198,444,197,444,195,448,195,449,193,454,193,461,186,460,185,465,181,464,178,464,172,462,168,460,168,461,167,466,163,465,161,461,160,460,162,459,161,457,160,457,157,461,156,465,153,465,154,464,158,465,159,468,157,473,152,477,152,481,149,483,148,482,144,486,143,489,134,487,133,485,134,485,136,481,136,482,133,479,131,475,131,475,126,474,125,473,123,470,120,461,120,461,122,463,124,461,125,460,129,458,131,453,130,453,136,456,136,457,135,458,135,460,136,459,139,455,139,451,143,446,143,445,145,445,146,447,146,443,149,437,149,436,151,429,150,427,148,417,149,414,143,407,143,407,138,405,135,403,135,403,132,400,132,399,134,397,134,398,137,392,137,391,140,392,143,388,143,388,149,388,150,385,152,383,153,379,154,377,155,376,160,379,159,379,161" alt="China" href="#mapworld" onclick="showChina();"/>
<area shape="poly" coords="366,191,366,193,367,194,369,196,372,197,374,194,375,205,382,220,387,218,388,208,400,198,400,195,403,194,403,190,402,185,396,185,389,182,388,181,388,177,385,176,385,172,385,169,388,167,386,165,382,166,381,168,379,168,377,168,377,171,379,173,377,177,373,182,370,183,369,184,371,188" alt="India" href="#mapworld" onclick="showIndia();"/>
<area shape="poly" coords="378,163,382,166,381,168,378,168,376,167,377,172,378,173,377,177,373,183,369,183,368,184,368,186,370,188,370,190,366,191,362,188,354,189,354,186,356,185,356,181,354,181,354,179,362,178,363,175,365,175,365,174,368,174,368,171,370,171,369,169,372,168,372,164,374,163,376,163,378,163" alt="Pakistan" href="#mapworld" onclick="showPakistan();"/>
<area shape="poly" coords="459,232,459,235,459,237,458,239,459,239,459,241,459,241,459,243,461,243,461,239,462,238,463,240,464,242,466,243,466,241,465,240,465,239,463,237,464,236,465,236,465,236,467,236,467,235,467,234,464,234,462,236,461,236,461,234,462,233,465,233,467,233,468,233,470,230,469,230,468,230,468,231,465,231,464,230,462,230,462,231,460,231,460,232" alt="Indonesia" href="#mapworld" onclick="showIndonesia();"/>
<area shape="poly" coords="440,230,440,234,442,235,442,237,443,239,444,239,445,238,445,238,446,239,447,239,447,239,448,239,450,239,450,240,453,240,454,240,453,236,455,236,456,234,456,232,458,231,459,230,456,230,456,228,456,227,456,226,456,225,452,225,452,227,451,227,451,228,450,230,445,230,445,231,444,231,443,231,442,230,441,230" alt="Indonesia" href="#mapworld" onclick="showIndonesia();"/>
<area shape="poly" coords="476,227,475,228,475,229,473,229,473,231,473,233,473,236,475,237,476,236,476,234,476,233,476,231,476,230,476,230,476,229" alt="Indonesia" href="#mapworld" onclick="showIndonesia();" />
<area shape="poly" coords="468,236,470,236,471,236,471,237,469,237,468,237" alt="Indonesia" href="#mapworld" onclick="showIndonesia();"/>
<area shape="poly" coords="472,238,473,239,474,239,476,238,478,237,479,236,479,237,480,239,480,239,480,240,478,240,476,240,475,240,473,241,471,241,471,240,470,239,470,239,471,238" alt="Indonesia" href="#mapworld" onclick="showIndonesia();" />
<area shape="poly" coords="499,237,499,249,496,247,496,247,495,248,493,248,493,247,494,246,494,244,493,242,491,242,489,241,487,240,484,240,482,239,482,236,480,236,479,235,479,233,481,233,482,234,482,234,483,233,484,233,485,234,487,234,486,237,487,238,487,239,489,239,490,237,490,236,488,233,490,233,490,236,492,236,493,236,494,236,496,237,497,238" alt="Indonesia" href="#mapworld" onclick="showIndonesia();"/>
<area shape="poly" coords="321,157,321,162,323,162,324,165,325,166,324,170,324,171,326,173,328,174,328,176,329,178,331,177,331,179,332,179,334,181,335,183,338,184,341,185,343,185,345,185,345,186,345,187,349,187,351,188,354,188,354,186,356,185,356,181,353,181,353,178,353,175,352,174,352,171,352,168,353,166,353,164,351,163,349,162,347,161,345,159,342,160,340,161,339,161,339,163,336,163,334,163,333,162,331,161,330,160,330,159,330,158,328,157,327,157,326,159,326,158,324,158,323,157,323,156,321,157" alt="Iran" href="#mapworld" onclick="showIran();"/>
<area shape="poly" coords="102,233,102,236,101,238,99,239,98,239,97,239,96,240,96,241,95,242,94,241,94,239,92,241,92,244,95,246,96,247,97,250,98,253,100,256,101,258,101,259,103,262,105,262,106,263,108,264,111,266,114,266,114,264,114,264,114,263,114,263,114,262,114,261,114,260,115,255,114,255,114,253,111,253,111,250,111,250,109,251,108,250,108,250,107,249,106,248,105,247,106,245,108,244,107,243,108,242,108,241,110,241,112,241,113,239,113,238,111,238,111,237,109,237,105,236,103,233" alt="Peru" href="#mapworld" onclick="showPeru();"/>
<area shape="circle" coords="542,279,21" alt="Fiji" href="#mapworld" onclick="showFiji();"/>
<area shape="rect" coords="0,0,568,433" alt="world" href="#mapworld" onclick="closeInfo();"/>
</map>
Edit: Précision: le site est un thème wordpress
Modifié par faf95c (06 Jun 2012 - 05:29)