Problème infobulle sous Chrome & IE

par Erwan Narcos Sam 14 Jan 2012 - 12:09

Bonjour,

Alors voilà, je rencontre un petit soucis dans mon code.
A la suite d'une idée émise par l'un de mes membres, je voudrais faire une carte interactive en CSS / HTML, avec des infobulles qui s'afficheraient différemment selon où la souris pointe sur la carte.

J'y suis parvenu, et suis assez content de mon résultat...
Mais là, erreur fatale ! Je suis habituellement sous firefox, et cela fonctionne très bien. Mais quand je passe sous Chrome, plus aucune infobulle n'est visible... ni sous IE d'ailleurs !

Voici les dégats

Voici les codes que j'ai utilisés pour faire mes infobulles :

Page HTML :

Code:: <div id="carte_fond">Carte interactive de Gwendalavir : <img src="http://img822.imageshack.us/img822/3310/cartefinal.png" width="850" height="1338" border="0" usemap="#map" /> <map name="map"> <area shape="poly" coords="264,95,285,74,313,73,340,90,346,125,346,154,334,160,339,182,339,206,330,225,351,201,362,218,330,232,293,238,247,174,259,127,236,129,235,149,219,136,234,109,248,95,266,103" href="http://ecoledesmarchombres.1fr1.net/f127-ile-des-nimurdes" /> <h2>Île des Nimurdes</h2> Climat : Nordique, toujours froid et venteux. Flore : Des amas rocheux et un paysage chaotique, en bordure d’Océan. Faune : Officiellement, petits rongeurs et autres mammifères. <area shape="poly" coords="503,55,477,107,454,120,455,160,420,160,420,179,386,205,372,232,365,256,352,274,306,300,270,321,255,366,245,407,284,401,331,353,401,339,492,327,560,331,593,331,566,299,585,284,589,260,570,219,554,228,554,188,545,167,520,202,515,175,524,152,524,117,508,101,506,69" href="http://ecoledesmarchombres.1fr1.net/f128-septentrion-des-geants" /> <h2>Septentrion des Géants</h2> Climat : Nordique, froid et venteux. Faune : On dit que les Géants habitent cette région du continent… Flore : Roches et pins se mélangent avec ravissement le long des criques de la côte. <area shape="poly" coords="329,288,446,290,566,290,583,354,626,425,663,460,639,525,574,553,465,567,526,575,402,574,354,551,309,519,282,480,253,443,246,395,248,352,275,319" href="http://ecoledesmarchombres.1fr1.net/f121-royaume-rai" /> <h2>Royaume Raï</h2> Climat : Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux. Faune : Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des Ts’liches. Flore : Variable – Montagnes au Nord, plaines dans le centre, marécages à l’Ouest. <area shape="poly" coords="256,490,315,527,421,586,424,632,397,668,346,666,308,635,273,620,229,591,207,585,235,554" href="http://ecoledesmarchombres.1fr1.net/f123-marais-d-ankai" /> <h2>Marais d'Ankaï</h2> Climat : Equatorial - marécageux. Faune : Animaux sauvages ongulés, Trodds. Flore : Marécages et mangroves. <area shape="poly" coords="425,582,426,631,450,661,518,640,526,602,526,588,463,582" href="http://ecoledesmarchombres.1fr1.net/f122-kur-n-rai" /> <h2>Kur N'Raï</h2> " Capitale " des hordes Raïs. <area shape="poly" coords="173,633,224,615,293,640,322,656,323,682,290,697,249,710,211,721,181,686,164,650" href="http://ecoledesmarchombres.1fr1.net/f129-foret-maison-des-petits" /> <h2>Forêt Maison des Petits</h2> Climat : Tropical. Faune : Petits animaux arboricoles. Trodds et Ours élastiques. Habitat des Petits. Flore : Immenses arbres centenaires dans une jungle majestueuse et étendue. <area shape="poly" coords="589,579,669,547,701,575,728,605,728,637,706,641,683,658,673,697,657,734,640,769,599,788,609,749,590,708,566,695,580,605,583,588" href="http://ecoledesmarchombres.1fr1.net/f41-l-oeil-d-otolep" /> <h2>L'Oeil d'Otolep</h2> Climat : Océanique. Faune : Petits animaux. Les animaux malveillants (Ts’Liches, Brûleurs et Goules) ne peuvent pas s’en approcher. Flore : Herbes rases à des kilomètres, sur des plaines qui l’entourent. <area shape="poly" coords="264,722,329,696,423,682,520,677,548,715,446,736,363,749,284,729" href="http://ecoledesmarchombres.1fr1.net/f36-chaine-du-poll" /> <h2>Chaîne du Poll</h2> Climat : Montagneux. Faune : Animaux de la montagne Flore : Pas grand-chose, mis à part des pins rachitiques et une herbe rare. . <area shape="poly" coords="366,753,456,740,556,720,587,735,590,770,555,791,478,792,420,793,386,773" href="http://ecoledesmarchombres.1fr1.net/f37-citadelle-des-frontaliers" /> <h2>Citadelle des Frontaliers</h2> Climat : Continental. Faune : Animaux du Continent. Parfois des Brûleurs s’y aventurent. Flore : Plaines à perte de vue, avec des collines et quelques monts. Petites forêts et bosquets fréquents. <area shape="poly" coords="367,755,354,820,347,911,345,947,387,921,439,881,498,846,552,834,518,801,404,796,388,781" href="http://ecoledesmarchombres.1fr1.net/f160-les-marches-du-nord" /> <h2>Les Marches du Nord</h2> Climat : Nordique / Montagnard. Faune : Animaux du continent. Flore : Plaines encerclées de hautes montagnes. <area shape="poly" coords= "242,766,365,770,347,829,337,894,336,940,326,940,320,921,257,930,248,912,302,900,328,873,321,856,256,859,226,863,214,830,224,781" href="http://ecoledesmarchombres.1fr1.net/f39-plateaux-d-astariul" /> <h2>Plateaux d'Astariul</h2> Climat : Continental, landais. Faune : Grands prédateurs ( tigres des prairies, ours…), Brûleurs, Goules, et autres petits mammifères. Flore : Plaines et collines aux broussailles multiples. Flore qui peut sembler agressive et aux couleurs beiges et claires. <area shape="poly" coords="263,733,261,760,358,769,361,754,336,747,293,736" href="http://ecoledesmarchombres.1fr1.net/f33-al-poll" /> <h2>Al-Poll</h2> Climat : Nordique. Architecture : Ville souterraine. Architecture chaotique et plutôt baroque, imaginée par les Dessinateurs. Classement des plus grandes villes : 2ème <area shape="poly" coords="222,885,313,879,296,899,254,905,217,923,217,913" href="http://ecoledesmarchombres.1fr1.net/f31-al-far" /> <h2>Al-Far</h2> Climat : Continental. Architecture : Baroque et classique savamment mélangées. Classement des plus grandes villes : 4ème (1ère par le nombre de crimes) <area shape="poly" coords="234,865,278,860,315,862,325,876,240,879,234,878,233,878,243,871" href="http://ecoledesmarchombres.1fr1.net/f40-tintiane" /> <h2>Tintiane</h2> Confrérie de Rêveurs <area shape="poly" coords="211,808,156,906,135,970,147,1021,178,1048,178,1094,179,1147,184,1165,206,1073,229,1028,223,994,204,974,203,926,209,881,209,856" href="http://ecoledesmarchombres.1fr1.net/f43-foret-de-barail" /> <h2>Forêt de Baraïl</h2> Climat : Continental. Faune : Animaux sylvestres. Flore : Vivace et dense. Grands arbres, qui deviennent plus vieux vers les falaises menant au pays Faël. <area shape="poly" coords="119,674,207,736,207,789,190,834,150,914,122,986,151,1041,163,1074,169,1159,155,1109,125,1123,122,1166,126,1182,90,1136,61,1077,54,1003,57,933,63,891,73,822,97,817,123,810,108,748,106,712" href="http://ecoledesmarchombres.1fr1.net/f44-pays-fael" /> <h2>Pays Faël</h2> Climat : Méditerranéen. Faune : Peu connue car peu explorée. Habitat des Faëls. Flore : Peu connue car peu explorée. <area shape="poly" coords="232,954,285,932,324,929,308,976,307,1007,249,993,236,985" href="http://ecoledesmarchombres.1fr1.net/f42-foret-ombreuse" /> <h2>Forêt Ombreuse</h2> Climat : Continental. Faune : Grands prédateurs félins, Brûleurs, Goules et autres animaux plus communs. Flore : Diverse. <area shape="poly" coords="329,945,365,945,370,968,360,998,330,999,320,992,319,968" href="http://ecoledesmarchombres.1fr1.net/f50-lac-chen" /> <h2>Lac Chen</h2> Immense lac – ou mer intérieure, selon les sources – aux fonds insondables. Faune : Les Dames peuvent y remonter depuis l’Océan. <area shape="poly" coords="330,999,312,1055,308,1096,325,1112,330,1088,335,1037,346,1011,349,1005" href="http://ecoledesmarchombres.1fr1.net/f51-dentelles-vives" /> <h2>Dentelles Vives</h2> Climat : Montagnard. Faune : Animaux de la montagne et des hauteurs. Flore : Peu, quelques pins des hauteurs. <area shape="poly" coords="367,939,473,873,546,852,585,839,528,920,594,829,638,835,682,868,698,891,654,877,597,879,577,919,557,940,519,960,533,984,521,1018,506,996,457,986,434,968,383,956,361,944,363,942" href="http://ecoledesmarchombres.1fr1.net/f46-plateaux-et-montagnes-de-l-est" /> <h2>Plateaux et Montagnes de l'Est</h2> Climat : Continental. Faune : Céréales sauvages, plaines arides et montagnes rocheuses. Flore : Grands prédateurs félins, loups, et autres animaux communs. <area shape="poly" coords="372,956,368,982,424,983,429,973,386,962" href="http://ecoledesmarchombres.1fr1.net/f30-al-chen" /> <h2>Al-Chen</h2> Climat : Méditerranéen. Architecture : Baroque et classique savamment mélangées. Classement des plus grandes villes : 3ème <area shape="poly" coords="421,992,487,995,491,1015,477,1029,422,1011" href="http://ecoledesmarchombres.1fr1.net/f49-feriane" /> <h2>Fériane</h2> Confrérie de Rêveurs <area shape="poly" coords="424,1067,424,1091,478,1093,512,1080,503,1062,469,1062" href="http://ecoledesmarchombres.1fr1.net/f32-al-jeit" /> <h2>Al-Jeit</h2> Climat : Continental. Architecture : Innovante et multicolore ; créée entièrement par des Dessinateurs. Classement des plus grandes villes : 1ère - CAPITALE <area shape="poly" coords="542,959,628,954,589,973,586,990,634,972,685,974,721,974,681,1009,690,1039,690,1084,683,1111,670,1174,658,1186,586,1172,559,1129,507,1104,510,1086,523,1034,538,976" href="http://ecoledesmarchombres.1fr1.net/f53-desert-des-murmures" /> <h2>Désert des Murmures</h2> Climat : Désertique. Faune : Ijakhis et animaux vivants dans les déserts. Flore : Aucune. <area shape="poly" coords="696,899,641,954,602,975,669,967,734,967,776,962,774,939,767,912,729,902" href="http://ecoledesmarchombres.1fr1.net/f54-la-grande-faille" /> <h2>La Grande Faille</h2> Climat : Tropical. Faune : Poissons et petits animaux. Flore : Espèces végétales tropicales ; la Voleuse la traverse de part en part. <area shape="poly" coords="349,1007,357,1030,376,1046,394,1052,410,1041,411,1026,393,1006,364,989,375,989" href="http://ecoledesmarchombres.1fr1.net/f125-le-pollimage" /> <h2>Le Pollimage</h2> Fleuve le plus long et le plus large de l’Empire, beaucoup utilisé par la navigation. <area shape="poly" coords="378,1050,419,1043,465,1039,483,1056,437,1061,415,1065,416,1081,386,1082,371,1087,373,1067" href="http://ecoledesmarchombres.1fr1.net/f126-l-arche" /> <h2>L'Arche</h2> Immense pont de verre créé par les Dessinateurs au-dessus du Pollimage. <area shape="poly" coords="346,1016,340,1045,334,1093,336,1113,347,1131,347,1146,367,1128,381,1103,369,1088,371,1051,356,1036" href="http://ecoledesmarchombres.1fr1.net/f124-la-passe-de-la-goule" /> <h2>La Passe de la Goule</h2> Climat : Continental. Faune : Plaines plutôt arides. Flore : Goules et grands prédateurs félins, loups et autres animaux communs. <area shape="poly" coords="229,993,271,1002,308,1017,306,1050,289,1061,300,1074,302,1097,286,1113,276,1090,276,1077,264,1059,240,1056,226,1069,235,1033,234,1015" href="http://ecoledesmarchombres.1fr1.net/f47-collines-de-taj" /> <h2>Collines de Taj</h2> Climat : Aride. Faune : Grands prédateurs félins, Brûleurs, petits mammifères. Flore : Plaines et collines plutôt arides. <area shape="poly" coords="248,1063,217,1076,227,1096,261,1091,270,1087,274,1078,262,1065" href="http://ecoledesmarchombres.1fr1.net/f48-ondiane" /> <h2>Ondiane</h2> Confrérie de Rêveurs. <area shape="poly" coords="209,1091,204,1113,249,1112,281,1110,271,1094,241,1102,216,1093" href="http://ecoledesmarchombres.1fr1.net/f136-al-vor" /> <h2>Al-Vor</h2> Climat : Aride. Architecture : Baroque. Classement des plus grandes villes : 5ème. <area shape="poly" coords="201,1115,193,1149,187,1195,238,1234,328,1231,447,1234,480,1212,467,1176,437,1131,427,1096,388,1097,370,1143,331,1137,330,1122,307,1126,275,1119,259,1119" href="http://ecoledesmarchombres.1fr1.net/f215-les-grands-oceans" /> <h2>Grands Océans</h2> Climat : Océanique. Faune : Petits animaux vivant près des côtes. Flore : Pinèdes et landes. <area shape="poly" coords="470,1098,468,1131,480,1187,442,1253,403,1254,377,1324,557,1323,534,1252,524,1153,517,1118,506,1100" href="http://ecoledesmarchombres.1fr1.net/f52-archipel-alines" /> <h2>Archipels Alines</h2> Climat : Océanique. Faune : Variable. Flore : Petites îles dispersées dans l’Océan, aux écosystèmes variables. <area shape="poly" coords="670,884,617,876,593,907,554,940,528,958,569,958,640,945,690,900,681,897" href="http://ecoledesmarchombres.1fr1.net/f45-jungle-d-hulm" /> <h2>Jungle d'Hulm</h2> Climat : Tropical. Faune : Ours élastiques, autres animaux communs.. Flore : Espèces végétales tropicales. </map> </div>

CSS :

Code:: #arrondi{ -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } span.infobulle{ position: absolute; z-index: 999; } span.infobulle:hover{ background-color: none; z-index: 999; } span.infobulle span{ z-index:50; position: fixed; background-color: #E3FFF9; //padding-top: 7px; padding-bottom: 15px; padding-left: 9px; padding-right: 9px; left: 100 px; visibility: hidden; color: #027A8F; font-size:0.7em; text-align : justify; } span.infobulle span img{ border: 1px; padding: 5px; z-index:50;} span.infobulle:hover span{ visibility: visible; z-index:50; top: 200px; left: 220px; width: 250px ; color:#027A8F; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;} #carte_fond{ margin-left: 10px; margin-right: 15px; //margin-top: 20px; margin-bottom: 30px; padding-right: 15px; padding-left : 15px; -moz-border-radius: 10px ; -webkit-border-radius: 10px; border-radius: 10px; background: #E3FFF9 ; border-style: solid; border: 1px #000224; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; } .titre_carte{ font-variant : small-caps; font-size : 2em; color : #000224; font-weight:bold; text-decoration:underline; }

Je n'arrive pas à comprendre pourquoi Chrome n'interprète pas correctement mon code. Peut-être que c'est moi qui ai mal codé, mais je ne vois pas en quoi...

Des idées ?

par kheino Dim 15 Jan 2012 - 20:03

Bonsoir Erwan Narcos,

Je suis sur ton sujet.
Déjà il y a quelques erreurs dans le CSS que certains navigateurs ne pardonnent pas (avec Opera je les vois aussi parce qu'il est plus souple que la rigueur d'autre et IE, quoique on en dise, est un bon baromètre car très rigoureux tant sur le CSS que le HTML), comme:
- des // avant deux propriétés
- des positionnement erronés

Je me demandais aussi à quoi est attribué cet identifiant : #arrondi

par Erwan Narcos Dim 15 Jan 2012 - 20:08

Pour les //, c'est pour les mettre en commentaire, donc pour moi elles n'avaient plus effet ainsi.

Quels sont les positionnements erronés ?

L'identifiant #arrondi permettait d'arrondir l'image en elle-même, je l'ai retiré du html sans le retirer du CSS...

par kheino Mar 17 Jan 2012 - 13:32

Erwan Narcos a écrit:Quels sont les positionnements erronés ?

Le positionnement absolut en parent est à éviter.
Même si la position relative est par défaut, on le précise à un élément parent afin d'attribuer un positionnement absolu à l'héritier, ce qui permet des restreindre la position absolue aux balises du parent.
Je ne sais pas si je me fais bien comprendre.

Mais là c'est la position fixed qui pose souci.
J'ai eu pas mal de travail, mais là je m'y remets.

Cela dit, n'oublie pas de faire des "up" avant que l'on te verrouille le sujet. Wink

par **bando** Mar 17 Jan 2012 - 14:11

Bonjour,

Les commentaires en CSS c'est /* ton commentaire */

par Erwan Narcos Mar 17 Jan 2012 - 20:31

J'ai donc changé la position : absolute et essayé plusieurs choses.

Le soucis vient principalement du fait que si je ne mets pas

Code:: span.infobulle:hover { position:fixed; }

mais un autre attribut de position ( absolute ou relative ), la bulle va se planquer en haut ou en bas de la page, et ne suis pas la souris en restant visible quand on scroll. J'ai essayé avec plusieurs combinaisons de positionnement, cela ne veut pas rester en place... ( sous firefox ).
Sous Chrome, il n'y a toujours pas de bulle, planquée ou non...

Pourquoi cela serait d'ailleurs fixed qui poserait problème ?

Voici donc le dernier CSS :

Code:: span.infobulle{ position: relative; z-index: 997; } span.infobulle:hover{ background-color: none; z-index: 998; position : absolute; } span.infobulle{ z-index: 999; position: absolute; background-color: #E3FFF9; padding-bottom: 15px; padding-left: 9px; padding-right: 9px; /*left: 100px;*/ visibility: hidden; color: #027A8F; font-size:0.7em; text-align : justify; } span.infobulle img{ border: 1px; padding: 5px; z-index:50;} span.infobulle:hover { visibility: visible; display:inline; position:fixed; z-index:50; top: 200px; left: 220px; width: 250px ; color:#027A8F; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;} #carte_fond{ margin-left: 10px; margin-right: 15px; //margin-top: 20px; margin-bottom: 30px; padding-right: 15px; padding-left : 15px; -moz-border-radius: 10px ; -webkit-border-radius: 10px; border-radius: 10px; background: #E3FFF9 ; border-style: solid; border: 1px #000224; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; } .titre_carte{ font-variant : small-caps; font-size : 2em; color : #000224; font-weight:bold; text-decoration:underline; }

par Erwan Narcos Lun 23 Jan 2012 - 14:32

par Ea Lun 30 Jan 2012 - 11:49

Bonjour,

Vous avez trouvé quelque part ces "infobulles" dans un balise map ?

Il me semblait qu'on ne pouvait mettre que des area, et ça me semble bien bien bizarre ce "fonctionnement" que vous lui donné.

Cela semble plus un coup de super chance que firefox fonctionnerait comme cela.

Il faudrait plutôt utiliser du javascript je pense pour cela, par exemple :

Code:: <script> function showtip(tag){ $("#tipshowed").removeAttr("id"); $(".tip"+tag).attr("id","tipshowed"); } </script> <div id="carte_fond"> Carte interactive de Gwendalavir : <h2>Île des Nimurdes</h2> Climat : Nordique, toujours froid et venteux. Flore : Des amas rocheux et un paysage chaotique, en bordure d’Océan. Faune : Officiellement, petits rongeurs et autres mammifères. <h2>Septentrion des Géants</h2> Climat : Nordique, froid et venteux. Faune : On dit que les Géants habitent cette région du continent… Flore : Roches et pins se mélangent avec ravissement le long des criques de la côte. <img src="http://img822.imageshack.us/img822/3310/cartefinal.png" width="850" height="1338" border="0" usemap="#map"/> <map name="map"> <area shape="poly" coords="264,95,285,74,313,73,340,90,346,125,346,154,334,160,339,182,339,206,330,225,351,201,362,218,330,232,293,238,247,174,259,127,236,129,235,149,219,136,234,109,248,95,266,103" href="http://ecoledesmarchombres.1fr1.net/f127-ile-des-nimurdes" onmouseover="showtip('nimurdes')" /> <area shape="poly" coords="503,55,477,107,454,120,455,160,420,160,420,179,386,205,372,232,365,256,352,274,306,300,270,321,255,366,245,407,284,401,331,353,401,339,492,327,560,331,593,331,566,299,585,284,589,260,570,219,554,228,554,188,545,167,520,202,515,175,524,152,524,117,508,101,506,69" href="http://ecoledesmarchombres.1fr1.net/f128-septentrion-des-geants" onmouseover="showtip('geants')" /> </map> </div>

Et plutôt que de mettre dans le CSS :

Code:: span.infobulle:hover span

Mettre :

Code:: #tipshowed

Cordialement.

par Erwan Narcos Lun 30 Jan 2012 - 23:54

J'ai réussi à bidouiller tout ça pour que ça marche à peu près...
A peu près, parce qu'il y a encore un soucis... ^^'

En effet, déjà, première chose que je n'arrive pas à résoudre : toutes les descriptions sont visibles en haut de page. Quand on passe la souris sur un lieu, cela passe sa description dans l'infobulle, donc ça fonctionne, mais je n'arrive pas à trouver une méthode qui me permettrait de mettre en caché par défaut les descriptions sans faire buguer l'infobulle dans sa globalité.
Et comme je n'y connais rien en JavaScript...

Voici mes codes :
HTML

Code:: <script> function showtip(tag){ $("#tipshowed").removeAttr("id"); $(".tip"+tag).attr("id","tipshowed"); } </script> <div id="carte_fond"> Carte interactive de Gwendalavir : <h2>Île des Nimurdes</h2> Climat : Nordique, toujours froid et venteux. Flore : Des amas rocheux et un paysage chaotique, en bordure d’Océan. Faune : Officiellement, petits rongeurs et autres mammifères. <h2>Septentrion des Géants</h2> Climat : Nordique, froid et venteux. Faune : On dit que les Géants habitent cette région du continent… Flore : Roches et pins se mélangent avec ravissement le long des criques de la côte. <h2>Royaume Raï</h2> Climat : Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux. Faune : Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des Ts’liches. Flore : Variable – Montagnes au Nord, plaines dans le centre, marécages à l’Ouest. <img src="http://img822.imageshack.us/img822/3310/cartefinal.png" width="850" height="1338" border="0" usemap="#map"/> <map name="map"> <area shape="poly" coords="264,95,285,74,313,73,340,90,346,125,346,154,334,160,339,182,339,206,330,225,351,201,362,218,330,232,293,238,247,174,259,127,236,129,235,149,219,136,234,109,248,95,266,103" href="http://ecoledesmarchombres.1fr1.net/f127-ile-des-nimurdes" onmouseover="showtip('nimurdes')" /> <area shape="poly" coords="503,55,477,107,454,120,455,160,420,160,420,179,386,205,372,232,365,256,352,274,306,300,270,321,255,366,245,407,284,401,331,353,401,339,492,327,560,331,593,331,566,299,585,284,589,260,570,219,554,228,554,188,545,167,520,202,515,175,524,152,524,117,508,101,506,69" href="http://ecoledesmarchombres.1fr1.net/f128-septentrion-des-geants" onmouseover="showtip('geants')" /> <area shape="poly" coords="329,288,446,290,566,290,583,354,626,425,663,460,639,525,574,553,465,567,526,575,402,574,354,551,309,519,282,480,253,443,246,395,248,352,275,319" href="http://ecoledesmarchombres.1fr1.net/f121-royaume-rai" onmouseover="showtip('royrai')" /> </map> </div>

CSS :

Code:: #tipshowed{ visibility: visible; display:inline; position:fixed; left: 400px; top: 250px; width: 350px; z-index: 999; background-color: #E3FFF9; color:#027A8F; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; padding-bottom: 15px; padding-left: 9px; padding-right: 9px; font-size:0.7em; text-align : justify; }

Vous pouvez voir ça ici...

par Ea Mar 31 Jan 2012 - 0:11

Vous pouvez avoir 2 classes en les séparant par un espace, et puis dans le CSS vous ne les affichez pas.

Donc :

Code:: <script> function showtip(tag){ $("#tipshowed").removeAttr("id"); $(".tip"+tag).attr("id","tipshowed"); } </script> <div id="carte_fond"> Carte interactive de Gwendalavir : <div class="tipitem tipnimurdes"> <h2>Île des Nimurdes</h2> Climat : Nordique, toujours froid et venteux. Flore : Des amas rocheux et un paysage chaotique, en bordure d’Océan. Faune : Officiellement, petits rongeurs et autres mammifères. </div> <div class="tipitem tipgeants"> <h2>Septentrion des Géants</h2> Climat : Nordique, froid et venteux. Faune : On dit que les Géants habitent cette région du continent… Flore : Roches et pins se mélangent avec ravissement le long des criques de la côte. </div> <div class="tipitem tiproyrai"> <h2>Royaume Raï</h2> Climat : Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux. Faune : Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des http://img822.imageshack.us/img822/3310/cartefinal.png"Ts’liches. Flore : Variable – Montagnes au Nord, plaines dans le centre, marécages à l’Ouest. </div> <img src="http://img822.imageshack.us/img822/3310/cartefinal.png" width="850" height="1338" border="0" usemap="#map"/> <map name="map"> <area shape="poly" coords="264,95,285,74,313,73,340,90,346,125,346,154,334,160,339,182,339,206,330,225,351,201,362,218,330,232,293,238,247,174,259,127,236,129,235,149,219,136,234,109,248,95,266,103" href="http://ecoledesmarchombres.1fr1.net/f127-ile-des-nimurdes" onmouseover="showtip('nimurdes')" /> <area shape="poly" coords="503,55,477,107,454,120,455,160,420,160,420,179,386,205,372,232,365,256,352,274,306,300,270,321,255,366,245,407,284,401,331,353,401,339,492,327,560,331,593,331,566,299,585,284,589,260,570,219,554,228,554,188,545,167,520,202,515,175,524,152,524,117,508,101,506,69" href="http://ecoledesmarchombres.1fr1.net/f128-septentrion-des-geants" onmouseover="showtip('geants')" /> <area shape="poly" coords="329,288,446,290,566,290,583,354,626,425,663,460,639,525,574,553,465,567,526,575,402,574,354,551,309,519,282,480,253,443,246,395,248,352,275,319" href="http://ecoledesmarchombres.1fr1.net/f121-royaume-rai" onmouseover="showtip('royrai')" /> </map> </div>

Et puis en CSS :

Code:: .tipitem { display: none; } #tipshowed{ display: block; position:fixed; left: 400px; top: 250px; width: 350px; z-index: 999; background-color: #E3FFF9; color:#027A8F; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; padding-bottom: 15px; padding-left: 9px; padding-right: 9px; font-size:0.7em; text-align : justify; }

J'ai remplacé les span par des div également ( car au final on veut l'attitude d'un bloc ( qui a une hauteur, largeur, un bord, ... ) il me semble et pas un élément inline ( qui fait partie d'une ligne de texte ) pour simplifier.

En mettant les 2 sur une page html ça à l'air d'aller :
http://pastehtml.com/view/bmiiswead.html

Mais il faudrait peut-être un mécanisme pour refermer l'infobulle, pour que ce soit en arrêtant de survoler la zone qu'on survolait, il faudrait ajouter à chaque <area /> :

Code:: onmouseout="killtip()"

Et remplacer le :

Code:: <script> function showtip(tag){ $("#tipshowed").removeAttr("id"); $(".tip"+tag).attr("id","tipshowed"); } </script>

Par :

Code:: <script> function showtip(tag){ killtip(); $(".tip"+tag).attr("id","tipshowed"); } function killtip() { $("#tipshowed").removeAttr("id"); } </script>

Cordialement.

par kheino Mar 31 Jan 2012 - 10:20

Bonjour à vous !

Ah, j'en étais arrivée à la même conclusion du script avant ma fièvre intempestive de cours.
Après moult recherches dans Google et sites, c'est effectivement la seule issue avec ces balises.
Merci Etana.
(Cela dit, je n'avais encore rien suggéré comme solution)

Bonne continuation Erwan Narcos, tu es entre de bonnes mains.

par Erwan Narcos Mar 31 Jan 2012 - 13:19

Merci beaucoup, j'ai donc réussi à faire ce que je souhaitais !
Je n'ai plus qu'à l'étendre sur toute la carte, et cela sera parfait pour moi.

Je donne donc les derniers codes pour ceux qui auraient le même soucis :

HTML

Code:: <script> function showtip(tag){ killtip(); $(".tip"+tag).attr("id","tipshowed"); } function killtip() { $("#tipshowed").removeAttr("id"); } </script> <div id="carte_fond"> Carte interactive de Gwendalavir : <div class="tipps tipnimurdes"> <h2>Île des Nimurdes</h2> Climat : Nordique, toujours froid et venteux. Flore : Des amas rocheux et un paysage chaotique, en bordure d’Océan. Faune : Officiellement, petits rongeurs et autres mammifères. </div> <div class="tipps tipgeants"> <h2>Septentrion des Géants</h2> Climat : Nordique, froid et venteux. Faune : On dit que les Géants habitent cette région du continent… Flore : Roches et pins se mélangent avec ravissement le long des criques de la côte. </div> <div class=" tipps tiproyrai"> <h2>Royaume Raï</h2> Climat : Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux. Faune : Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des Ts’liches. Flore : Variable – Montagnes au Nord, plaines dans le centre, marécages à l’Ouest. </div> <img src="http://img822.imageshack.us/img822/3310/cartefinal.png" width="850" height="1338" border="0" usemap="#map"/> <map name="map"> <area shape="poly" coords="264,95,285,74,313,73,340,90,346,125,346,154,334,160,339,182,339,206,330,225,351,201,362,218,330,232,293,238,247,174,259,127,236,129,235,149,219,136,234,109,248,95,266,103" href="http://ecoledesmarchombres.1fr1.net/f127-ile-des-nimurdes" onmouseover="showtip('nimurdes')" onmouseout="killtip()" /> <area shape="poly" coords="503,55,477,107,454,120,455,160,420,160,420,179,386,205,372,232,365,256,352,274,306,300,270,321,255,366,245,407,284,401,331,353,401,339,492,327,560,331,593,331,566,299,585,284,589,260,570,219,554,228,554,188,545,167,520,202,515,175,524,152,524,117,508,101,506,69" href="http://ecoledesmarchombres.1fr1.net/f128-septentrion-des-geants" onmouseover="showtip('geants')" onmouseout="killtip()" /> <area shape="poly" coords="329,288,446,290,566,290,583,354,626,425,663,460,639,525,574,553,465,567,526,575,402,574,354,551,309,519,282,480,253,443,246,395,248,352,275,319" href="http://ecoledesmarchombres.1fr1.net/f121-royaume-rai" onmouseover="showtip('royrai')" onmouseout="killtip()" /> </map> </div>

CSS :

Code:: #tipshowed{ visibility: visible; display:inline; position:fixed; left: 300px; top: 250px; width: 300px; z-index: 999; background-color: #E3FFF9; color:#027A8F; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; padding-bottom: 15px; padding-left: 9px; padding-right: 9px; font-size:0.7em; text-align : justify; } .tipps{ display:none; }

Merci encore !

par Ea Mar 31 Jan 2012 - 14:37

Sinon là pour le CSS, cela fonctionne car :

Code:: .tipps

Cela a une priorité de sélecteur de 0010 et :

Code:: #tipshowed

Cela a une priorité de sélecteur css de 0100, donc le #tipshowed qui se trouve avant l'emporte tout de même en priorité sur le .tipps ( si ils avaient eu la même priorité, c'est le dernier sur la feuille qui l'aurait emporté, donc le .tipps et donc les infobulles auraient toujours été non-affiché ).

Enfin donc cela marche comme cela mais ça m'a l'air d'être plus de la chance que du voulu =P

( là on explique la priorité assez complètement : http://openweb.eu.org/articles/cascade_css ( agent utilisateur ça signifie user-agent, donc les styles par défaut dans le navigateur ) )

Cordialement.

Problème infobulle sous Chrome & IE

Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE

Re: Problème infobulle sous Chrome & IE