Problème infobulle sous Chrome & IE

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème infobulle sous Chrome & IE

Message par Erwan Narcos le 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"><p class="titre_carte">Carte interactive de Gwendalavir :</p>


<img src="http://img822.imageshack.us/img822/3310/cartefinal.png" width="850" height="1338" border="0" usemap="#map" />


<map name="map">

<span class="infobulle">
<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" />
<span><h2>Île des Nimurdes</h2>
<b><u>Climat :</u></b> Nordique, toujours froid et venteux.
<br /><b><u>Flore :</u></b> Des amas rocheux et un paysage chaotique, en bordure d’Océan.
<br /><b><u>Faune :</u></b> Officiellement, petits rongeurs et autres mammifères.</span></span>


<span class="infobulle"><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" />
<span><h2>Septentrion des Géants</h2>
<b><u>Climat :</u></b> Nordique, froid et venteux.
<br /><b><u>Faune :</u></b> On dit que les Géants habitent cette région du continent…
<br /><b><u>Flore :</u></b> Roches et pins se mélangent avec ravissement le long des criques de la côte.

</span></span>

<span class="infobulle"><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" />
<span><h2>Royaume Raï</h2>
<b><u>Climat :</u></b> Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux.
<br /><b><u>Faune :</u></b> Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des Ts’liches.
<br /><b><u>Flore :</u></b> Variable – Montagnes au Nord, plaines dans le centre, marécages à l’Ouest.
</span></span>

<span class="infobulle"><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" />
<span><h2>Marais d'Ankaï</h2>
<b><u>Climat :</u></b> Equatorial - marécageux.
<br /><b><u>Faune :</u></b> Animaux sauvages ongulés, Trodds.
<br /><b><u>Flore :</u></b> Marécages et mangroves.
</span></span>

<span class="infobulle"><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" />
<span><h2>Kur N'Raï</h2>
" Capitale " des hordes Raïs.
</span></span>


<span class="infobulle"><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" />
<span><h2>Forêt Maison des Petits</h2>
<b><u>Climat :</u></b> Tropical.
<br /><b><u>Faune :</u></b> Petits animaux arboricoles. Trodds et Ours élastiques. Habitat des Petits.
<br /><b><u>Flore :</u></b> Immenses arbres centenaires dans une jungle majestueuse et étendue.

</span></span>

<span class="infobulle"><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" />
<span><h2>L'Oeil d'Otolep</h2>
<b><u>Climat :</u></b> Océanique.
<br /><b><u>Faune :</u></b> Petits animaux. Les animaux malveillants (Ts’Liches, Brûleurs et Goules) ne peuvent pas s’en approcher.
<br /><b><u>Flore :</u></b> Herbes rases à des kilomètres, sur des plaines qui l’entourent.
</span></span>

<span class="infobulle"><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" />
<span><h2>Chaîne du Poll</h2>
<b><u>Climat :</u></b> Montagneux.
<br /><b><u>Faune :</u></b> Animaux de la montagne
<br /><b><u>Flore :</u></b> Pas grand-chose, mis à part des pins rachitiques et une herbe rare.
.</span></span>

<span class="infobulle"><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" />
<span><h2>Citadelle des Frontaliers</h2>
<b><u>Climat :</u></b> Continental.
<br /><b><u>Faune :</u></b> Animaux du Continent. Parfois des Brûleurs s’y aventurent.
<br /><b><u>Flore :</u></b> Plaines à perte de vue, avec des collines et quelques monts. Petites forêts et bosquets fréquents.</span></span>

<span class="infobulle"><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" />
<span><h2>Les Marches du Nord</h2>
<b><u>Climat :</u></b> Nordique / Montagnard.
<br /><b><u>Faune :</u></b> Animaux du continent.
<br /><b><u>Flore :</u></b> Plaines encerclées de hautes montagnes. </span></span>

<span class="infobulle"><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" />
<span><h2>Plateaux d'Astariul</h2>
<b><u>Climat :</u></b> Continental, landais.
<br /><b><u>Faune :</u></b> Grands prédateurs ( tigres des prairies, ours…), Brûleurs, Goules, et autres petits mammifères.
<br /><b><u>Flore :</u></b> Plaines et collines aux broussailles multiples. Flore qui peut sembler agressive et aux couleurs beiges et claires.</span></span>

<span class="infobulle"><area shape="poly" coords="263,733,261,760,358,769,361,754,336,747,293,736" href="http://ecoledesmarchombres.1fr1.net/f33-al-poll" />
<span><h2>Al-Poll</h2>
<b><u>Climat :</u></b>  Nordique.
<br /><b><u>Architecture :</u></b> Ville souterraine. Architecture chaotique et plutôt baroque, imaginée par les Dessinateurs.
<br /><b><u>Classement des plus grandes villes :</u></b> 2ème</span></span>

<span class="infobulle"><area shape="poly" coords="222,885,313,879,296,899,254,905,217,923,217,913" href="http://ecoledesmarchombres.1fr1.net/f31-al-far" />
<span><h2>Al-Far</h2>
<b><u>Climat :</u></b>  Continental.
<br /><b><u>Architecture :</u></b> Baroque et classique savamment mélangées.
<br /><b><u>Classement des plus grandes villes :</u></b> 4ème (1ère par le nombre de crimes)</span></span>

<span class="infobulle"><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" />
<span><h2>Tintiane</h2>
Confrérie de Rêveurs</span></span>

<span class="infobulle"><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" />
<span><h2>Forêt de Baraïl</h2>
<b><u>Climat :</u></b> Continental.
<br /><b><u>Faune :</u></b> Animaux sylvestres.
<br /><b><u>Flore :</u></b> Vivace et dense. Grands arbres, qui deviennent plus vieux vers les falaises menant au pays Faël.</span></span>

<span class="infobulle"><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" />
<span><h2>Pays Faël</h2>
<b><u>Climat :</u></b> Méditerranéen.
<br /><b><u>Faune :</u></b> Peu connue car peu explorée. Habitat des Faëls.
<br /><b><u>Flore :</u></b> Peu connue car peu explorée. </span></span>

<span class="infobulle"><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" />
<span><h2>Forêt Ombreuse</h2>
<b><u>Climat :</u></b> Continental.
<br /><b><u>Faune :</u></b> Grands prédateurs félins, Brûleurs, Goules et autres animaux plus communs.
<br /><b><u>Flore :</u></b> Diverse.</span></span>

<span class="infobulle"><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" />
<span><h2>Lac Chen</h2>
Immense lac – ou mer intérieure, selon les sources – aux fonds insondables.
<br /><b><u>Faune :</u></b> Les Dames peuvent y remonter depuis l’Océan.
</span></span>

<span class="infobulle"><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" />
<span><h2>Dentelles Vives</h2>
<b><u>Climat :</u></b> Montagnard.
<br /><b><u>Faune :</u></b> Animaux de la montagne et des hauteurs.
<br /><b><u>Flore :</u></b> Peu, quelques pins des hauteurs.</span></span>

<span class="infobulle"><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" />
<span><h2>Plateaux et Montagnes de l'Est</h2>
<b><u>Climat :</u></b> Continental.
<br /><b><u>Faune :</u></b> Céréales sauvages, plaines arides et montagnes rocheuses.
<br /><b><u>Flore :</u></b> Grands prédateurs félins, loups, et autres animaux communs.</span></span>

<span class="infobulle"><area shape="poly" coords="372,956,368,982,424,983,429,973,386,962" href="http://ecoledesmarchombres.1fr1.net/f30-al-chen" />
<span><h2>Al-Chen</h2>
<b><u>Climat :</u></b> Méditerranéen.
<br /><b><u>Architecture :</u></b> Baroque et classique savamment mélangées.
<br /><b><u>Classement des plus grandes villes :</u></b> 3ème </span></span>

<span class="infobulle"><area shape="poly" coords="421,992,487,995,491,1015,477,1029,422,1011" href="http://ecoledesmarchombres.1fr1.net/f49-feriane" />
<span><h2>Fériane</h2>
Confrérie de Rêveurs</span></span>

<span class="infobulle"><area shape="poly" coords="424,1067,424,1091,478,1093,512,1080,503,1062,469,1062" href="http://ecoledesmarchombres.1fr1.net/f32-al-jeit" />
<span><h2>Al-Jeit</h2>
<b><u>Climat :</u></b> Continental.
<br /><b><u>Architecture :</u></b> Innovante et multicolore ; créée entièrement par des Dessinateurs.
<br /><b><u>Classement des plus grandes villes :</u></b> 1ère - CAPITALE</span></span>

<span class="infobulle"><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" />
<span><h2>Désert des Murmures</h2>
<b><u>Climat :</u></b> Désertique.
<br /><b><u>Faune :</u></b> Ijakhis et animaux vivants dans les déserts.
<br /><b><u>Flore :</u></b> Aucune.</span></span>

<span class="infobulle"><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" />
<span><h2>La Grande Faille</h2>
<b><u>Climat :</u></b> Tropical.
<br /><b><u>Faune :</u></b> Poissons et petits animaux.
<br /><b><u>Flore :</u></b> Espèces végétales tropicales ; la Voleuse la traverse de part en part.</span></span>

<span class="infobulle"><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" />
<span><h2>Le Pollimage</h2>
Fleuve le plus long et le plus large de l’Empire, beaucoup utilisé par la navigation.</span></span>

<span class="infobulle"><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" />
<span><h2>L'Arche</h2>
Immense pont de verre créé par les Dessinateurs au-dessus du Pollimage.</span></span>

<span class="infobulle"><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" />
<span><h2>La Passe de la Goule</h2>
<b><u>Climat :</u></b> Continental.
<br /><b><u>Faune :</u></b> Plaines plutôt arides.
<br /><b><u>Flore :</u></b> Goules et grands prédateurs félins, loups et autres animaux communs.</span></span>

<span class="infobulle"><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" />
<span><h2>Collines de Taj</h2>
<b><u>Climat :</u></b> Aride.
<br /><b><u>Faune :</u></b> Grands prédateurs félins, Brûleurs, petits mammifères.
<br /><b><u>Flore :</u></b> Plaines et collines plutôt arides.</span></span>

<span class="infobulle"><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" />
<span><h2>Ondiane</h2>
Confrérie de Rêveurs.</span></span>

<span class="infobulle"><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" />
<span><h2>Al-Vor</h2>
<b><u>Climat :</u></b> Aride.
<br /><b><u>Architecture :</u></b> Baroque.
<br /><b><u>Classement des plus grandes villes :</u></b> 5ème. </span></span>

<span class="infobulle"><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" />
<span><h2>Grands Océans</h2>
<b><u>Climat :</u></b> Océanique.
<br /><b><u>Faune :</u></b> Petits animaux vivant près des côtes.
<br /><b><u>Flore :</u></b> Pinèdes et landes.</span></span>

<span class="infobulle"><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" />
<span><h2>Archipels Alines</h2>
<b><u>Climat :</u></b> Océanique.
<br /><b><u>Faune :</u></b> Variable.
<br /><b><u>Flore :</u></b> Petites îles dispersées dans l’Océan, aux écosystèmes variables.</span></span>


<span class="infobulle"><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" />
<span><h2>Jungle d'Hulm</h2>
<b><u>Climat :</u></b>  Tropical.
<br /><b><u>Faune :</u></b> Ours élastiques, autres animaux communs..
<br /><b><u>Flore :</u></b> Espèces végétales tropicales.</span></span>

</map>


<br><br>
</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 ?


Dernière édition par Erwan Narcos le Mar 31 Jan 2012 - 13:19, édité 1 fois

Erwan Narcos
**

Messages : 61
Inscrit(e) le : 31/07/2009

http://ecoledesmarchombres.1fr1.net
Erwan Narcos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Final-Blonde le 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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Erwan Narcos le 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...

Erwan Narcos
**

Messages : 61
Inscrit(e) le : 31/07/2009

http://ecoledesmarchombres.1fr1.net
Erwan Narcos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Final-Blonde le 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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Zorro le Mar 17 Jan 2012 - 14:11

Bonjour,

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




Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe


Zorro
Dévactif
Dévactif

Masculin
Messages : 1945
Inscrit(e) le : 05/12/2006

https://fr.wikipedia.org/wiki/Guy_Williams_(acteur)
Zorro a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Erwan Narcos le 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;
}


Erwan Narcos
**

Messages : 61
Inscrit(e) le : 31/07/2009

http://ecoledesmarchombres.1fr1.net
Erwan Narcos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Erwan Narcos le Lun 23 Jan 2012 - 14:32

Up !

Erwan Narcos
**

Messages : 61
Inscrit(e) le : 31/07/2009

http://ecoledesmarchombres.1fr1.net
Erwan Narcos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Ea le 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">
   <p class="titre_carte">
      Carte interactive de Gwendalavir :
   </p>

   <span class="infobulle tipnimurde">
      <span>
      <h2>Île des Nimurdes</h2>
      <b><u>Climat :</u></b> Nordique, toujours froid et venteux. <br/><b><u>Flore :</u></b> Des amas rocheux et un paysage chaotique, en bordure d’Océan. <br/><b><u>Faune :</u></b> Officiellement, petits rongeurs et autres mammifères.</span>
   </span>

   <span class="infobulle tipgeants">
      <span>
      <h2>Septentrion des Géants</h2>
      <b><u>Climat :</u></b> Nordique, froid et venteux. <br/><b><u>Faune :</u></b> On dit que les Géants habitent cette région du continent… <br/><b><u>Flore :</u></b> Roches et pins se mélangent avec ravissement le long des criques de la côte. </span>
   </span>      

   <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.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Erwan Narcos le 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">
          <p class="titre_carte">
              Carte interactive de Gwendalavir :
          </p>
       
          <span class="tipnimurdes">
              <h2>Île des Nimurdes</h2>
              <b><u>Climat :</u></b> Nordique, toujours froid et venteux. <br/><b><u>Flore :</u></b> Des amas rocheux et un paysage chaotique, en bordure d’Océan. <br/><b><u>Faune :</u></b> Officiellement, petits rongeurs et autres mammifères.
          </span>
       
          <span class="tipgeants">
              <h2>Septentrion des Géants</h2>
              <b><u>Climat :</u></b> Nordique, froid et venteux. <br/><b><u>Faune :</u></b> On dit que les Géants habitent cette région du continent… <br/><b><u>Flore :</u></b> Roches et pins se mélangent avec ravissement le long des criques de la côte.
          </span> 

<span class="tiproyrai">
<h2>Royaume Raï</h2>
<b><u>Climat :</u></b> Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux.
<br /><b><u>Faune :</u></b> Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des Ts’liches.
<br /><b><u>Flore :</u></b> Variable – Montagnes au Nord, plaines dans le centre, marécages à l’Ouest.
</span>
       
          <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...

Erwan Narcos
**

Messages : 61
Inscrit(e) le : 31/07/2009

http://ecoledesmarchombres.1fr1.net
Erwan Narcos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Ea le 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">
          <p class="titre_carte">
              Carte interactive de Gwendalavir :
          </p>
     
          <div class="tipitem tipnimurdes">
              <h2>Île des Nimurdes</h2>
              <b><u>Climat :</u></b> Nordique, toujours froid et venteux. <br/><b><u>Flore :</u></b> Des amas rocheux et un paysage chaotique, en bordure d’Océan. <br/><b><u>Faune :</u></b> Officiellement, petits rongeurs et autres mammifères.
          </div>
     
          <div class="tipitem tipgeants">
              <h2>Septentrion des Géants</h2>
              <b><u>Climat :</u></b> Nordique, froid et venteux. <br/><b><u>Faune :</u></b> On dit que les Géants habitent cette région du continent… <br/><b><u>Flore :</u></b> 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>
<b><u>Climat :</u></b> Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux.
<br /><b><u>Faune :</u></b> Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des http://img822.imageshack.us/img822/3310/cartefinal.png"Ts’liches.
<br /><b><u>Flore :</u></b> 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.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Final-Blonde le 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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Erwan Narcos le 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">
          <p class="titre_carte">
              Carte interactive de Gwendalavir :
          </p>
       
          <div class="tipps tipnimurdes">
              <h2>Île des Nimurdes</h2>
              <b><u>Climat :</u></b> Nordique, toujours froid et venteux. <br/><b><u>Flore :</u></b> Des amas rocheux et un paysage chaotique, en bordure d’Océan. <br/><b><u>Faune :</u></b> Officiellement, petits rongeurs et autres mammifères.
          </div>
       
          <div class="tipps tipgeants">
              <h2>Septentrion des Géants</h2>
              <b><u>Climat :</u></b> Nordique, froid et venteux. <br/><b><u>Faune :</u></b> On dit que les Géants habitent cette région du continent… <br/><b><u>Flore :</u></b> 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>
<b><u>Climat :</u></b> Variable - Froid au Nord, assez continental autour du volcan et des plaines de Kur N’Raï, marécageux et limoneux.
<br /><b><u>Faune :</u></b> Animaux sauvages ongulés ; Hordes de Raï ; Soupçon d’habitat des Ts’liches.
<br /><b><u>Flore :</u></b> 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 !

Erwan Narcos
**

Messages : 61
Inscrit(e) le : 31/07/2009

http://ecoledesmarchombres.1fr1.net
Erwan Narcos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème infobulle sous Chrome & IE

Message par Ea le 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.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum