Sujets similaires

Code:: #mon-pa{
position:relative;
}
#monimageinfobulle1{
display:none;
position:absolute;
left:650px;
top:100px;
}

oui mais pourtant je l'ai mis :/

D'après ce que je vois sur ton forum test, ça marche bien pour l'image1 mais pas pour l'image2. À elle aussi, faut que tu lui donnes son propre CSS ^^

Code:: #monimageinfobulle2{
display:none;
position:absolute;
left:???px;
top:???px;
}

Kiwi

ah oui merde, j'ai zappé de le faire pour la 2eme, désolé ^^

et sinon pour mettre du texte, et des propriété CSS dans l'infobulle, on peut introduire sa dans le code de chaque infobulle ? (genre en dessous de top, left etc ...)

Pour mettre des propriétés CSS, en effet, rien ne t'empêche d'en mettre en dessous de top, letf, etc.
Pour mettre du texte, au lieu d'une image, faudra mettre des div....

Code:: <div id="moninfobulle3">Blabla</div>

Par contre, comme je l'ai dit au début, les liens fonctionneront pas en l'état, faudrait que je fasse quelques tests, mais vraiment pas le temps ^^

Kiwi

Merci encore pour ton tuto Smile

j'ai ajouter quelque propriété a mes infobulles

Désolé du DP, mais j'ai remarqué que en faite les coordonnés associé au placement des infobulles prenaient en compte les cotés et le haut de l'écran et que du coup leur placement sur le forum dépendaient de la taille de l'écran /:
N'y aurait-il pas un moyen de les "lier" a un placement définit par rapport à la map elle même ? :/

Salut!

Je t'avais fait mettre ceci :

Code:: #mon-pa{
position:relative;
}

Sur une div entourant l'ensemble de ton panneau d'accueil. Tu devrais le remettre =)

En effet, le positionnement absolute positionne les éléments en fonction du plus proche parent positionné, donc si tu positionnes l'ensemble de ton pa en relative, ça ne devrait rien changer à l'apparence du PA, par contre, les infobulles s'afficheront à partir du coin en haut à gauche de ton PA. En revanche, si tu ne mets pas ça, le plus proche parent positionné sera le body, donc l'ensemble de ta page internet.

Bonne journée,
Kiwi

Merci de la réponse Smile

et du coup je fait comment pour le remettre dans le code de mon PA ? :/
désolé je suis pas très doué n_n

Tu mets des balises body, html, meta et tout dans ton PA? Mais pour quoi faire?

euh ba j'ai suivi un tuto ou faut copier un code donné par photoshop ^^
donc voila, mais sinon j'ai 3 Map découpé dans mon PA en faite, c'est pour permettre d'avoir les partenaires défilants dans le PA

et du coup je voudrai juste savoir je doit mettre quelle balise et ou pour la position relative :/

Je vois.

En fait, ton code est pas terrible terrible. Je suis un peu fatiguée, donc j'y jetterai plutôt un oeil dans la journée de demain, pour voir si je peux t'aider à l'améliorer, sauf si quelqu'un s'en occupe avant.

Bonne soirée...
Kiwi qui need du sommeil... mais qui doit programmer un widget en JavaScript pour pas avoir une sale note, vive la programmation objet... o/

pas de soucis, bonne soirée et merci encore de porter de l'attention a tous mes problèmes ^^

mais si sa peut t'aider voila le rendu de mon code : http://foliforum.forumgratuit.org/
(en 16/9e les infosbulles sont bien positionnés)

Bonsoir!

Bon, j'ai pas pu vraiment mieux dormir la nuit dernière, alors j'espère ne pas avoir fait trop de fautes...

Essaye de mettre ça, dans ton PA.

Code:: <div id="mon-pa">
<table id="Tableau_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="2">
         <img src="http://security-domain.be/Upload/files/trancheprincipalmodi.png" width="487" height="315" alt="" usemap="#image1" />
      </td>
      <td rowspan="3">
         <img src="http://security-domain.be/Upload/files/trancheconcoursm-1295784370.png" width="313" height="400" alt="" usemap="#image2" />
      </td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="http://security-domain.be/Upload/files/pa403.png" width="265" height="85" alt="" usemap="#image3" *>
      </td>
      <td>
         <div class="partenaires">
            <marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115">
               <a class="postlink" href="www.creartion.ze-forum.com" target="_blank"><img border="0" alt="" src="http://img4.hostingpics.net/pics/876514liercra.gif" /></a>
               <a class="postlink" href="http://www.graff-hit-dream.com/" target="_blank"><img border="0" alt="" src="http://i62.servimg.com/u/f62/09/02/25/76/pub_8810.png" /></a>
               <a class="postlink" href="http://world-of-animations.forumactif.org/forum.htm" target="_blank"><img border="0" alt="" src="http://imageflock.com/img/1292167679.png" /></a>
               <a class="postlink" href="http://www.ladesproduction-forum.com" target="_blank"><img border="0" alt="" src="http://s2.noelshack.com/uploads/images/4742662486320_logo.png" /></a>
               <a class="postlink" href="http://conceptgraphik.xooit.fr/index.php" target="_blank"><img border="0" alt="" src="http://security-domain.be/Upload/files/logocgkcopieddecb6.png" /></a>
               <a class="postlink" href="http://www.forumgraphisme.com/forum.htm" target="_blank"><img border="0" alt="" src="http://security-domain.be/Upload/files/lgoc2059300.jpg" /></a>
               <a class="postlink" href="http://forum.devince.eu/index.php" target="_blank"><img border="0" alt="" src="http://security-domain.be/Upload/files/1263157802.gif" /></a>
               <a class="postlink" href="www.heavens-graph.com" target="_blank"><img border="0" alt="" src="http://i85.servimg.com/u/f85/11/15/47/50/templa10.gif" /></a>
            </marquee>
         </div>
      </td>
   </tr>
   <tr>
      <td>
         <img src="http://security-domain.be/Upload/files/pa405.png" width="222" height="47" alt="" />
      </td>
   </tr>
</table>
<map name="image1">
   <area shape="rect" alt="Folieust" coords="326,163,370,239" href="http://www.graphtheworld.net/privmsg?mode=post&u=234" onmouseover="affiche('monimageinfobulle6')" onmouseout="cache('monimageinfobulle6')" />
   <area shape="rect" alt="Tisam" coords="269,163,314,239" href="http://www.graphtheworld.net/msg.forum?mode=post&u=1" onmouseover="affiche('monimageinfobulle5')" onmouseout="cache('monimageinfobulle5')" />
   <area shape="rect" alt="Missaurelle" coords="383,163,428,239" href="http://www.graphtheworld.net/msg.forum?mode=post&u=146" onmouseover="affiche('monimageinfobulle4')" onmouseout="cache('monimageinfobulle4')" />
   <area shape="rect" alt="DarkStick" coords="438,163,485,239" href="http://www.graphtheworld.net/privmsg?mode=post&u=73" onmouseover="affiche('monimageinfobulle3')" onmouseout="cache('monimageinfobulle3')" />
   <area shape="rect" alt="presentation" coords="70,172,183,191" href="http://www.graphtheworld.net/f3-presentations" />
   <area shape="rect" alt="tutoriels" coords="88,212,162,230" href="http://www.graphtheworld.net/f9-tutoriels" />
   <area shape="rect" alt="ressources" coords="80,248,170,266" href="http://www.graphtheworld.net/f10-ressources" />
   <area shape="rect" alt="commandes" coords="77,285,174,303 " href="http://www.graphtheworld.net/f7-demande-de-creation" />
</map>
<map name="image2">
   <area shape="rect" alt="COTM" coords="51,81,250,181" href="http://www.graphtheworld.net/f71-cotm" onmouseover="affiche('monimageinfobulle1')" onmouseout="cache('monimageinfobulle1')" />
   <area shape="rect" alt="SOTW" coords="51,263,251,360" href="http://www.graphtheworld.net/f70-sotw" onmouseover="affiche('monimageinfobulle2')" onmouseout="cache('monimageinfobulle2')" />
</map>
<img src="http://security-domain.be/Upload/files/noal10-1294784771.jpg" id="monimageinfobulle1" />
<img src="http://security-domain.be/Upload/files/mgs-1295784472.png" id="monimageinfobulle2" />
<img src="http://security-domain.be/Upload/files/darkcarte.png" id="monimageinfobulle3" />
<img src="http://security-domain.be/Upload/files/misscarte.png" id="monimageinfobulle4" />
<img src="http://security-domain.be/Upload/files/tisamcarte.png" id="monimageinfobulle5" />
<img src="http://security-domain.be/Upload/files/folicarte.png" id="monimageinfobulle6" />
<map name="image3">
   <area shape="rect" ALT="concours" coords="90,8,164,26" href="http://www.graphtheworld.net/f11-concours">
</map>

<script type="text/javascript">
   function affiche(infobulle){ document.getElementById(infobulle).style.display='block'; }
   function cache(infobulle){ document.getElementById(infobulle).style.display='none'; }
</script>
</div>

J'ai :
-Rajouté la div mon-pa qui englobe tout
-Retiré les balises html, body, meta, head, title qui servent à définir des pages HTML, et a priori, tu n'utilises pas d'iFrame, donc pas besoin (d'ailleurs une balise fin de script s baladait au milieu Very Happy

)
-Mis en minuscule tous les attributs et balises (MAP -> map, NAME->name, HREF->href, IMG-> img, A -> a, etc) = + correct, normalement, tout est toujours en minuscule
- Supprimé des balises en trop, comme un fin de td qui se promenait, ou éléments inutiles, comme la div infobulle qui ne servait à rien....
-Inséré un espace entre l'attribut alt et l'attribut usemap, il faut bien prendre l'habitude de les séparer
-Supprimé un colspan inutile (celui des partenaires)
-Fermé toutes les balises (balise marquee et certaines balises comme area et img qui se ferment à la fin)

Code:: <img src="" alt="" /> => fermée
<img src="" alt="" > => pas fermée

Sans toutes les modifications faites, ça marchait, c'est vrai. Mais l'ennui, ça n'est pas conforme aux normes, donc on ne peut pas être à l'abri qu'une version d'un navigateur ou un autre merdouille.... Mais ça n'est pas non plus extrêmement probable. Après, un oubli ici, peut causer des bugs un peu partout dans la page... Donc mieux vaut se méfier et tenter de faire au propre. Et puis, c'est plus agréable à regarder aussi et c'était l'occasion de te montrer la tête que devrait avoir un code à peu près propre, aussi =)

N'oublie pas de rajouter le css de mon-pa s'il n'y est plus, et n'oublie pas non plus que tes infobulles vont être décalées, n'hésite pas à remettre leurs positions (left/top) à 0 pour être sûr de pas les louper...

(j'espère ne pas avoir fait de bêtise >_<)

Bonne soirée
Kiwi [Mode: Zombie]

Houla, un grand merci !
tout marche nikel Very Happy

Merci beaucoup d'avoir revu mon code c'est hyper sympa ^^
et du coup plus aucun problème pour les infobulles Smile

en plus les 2/3 infos que tu ma donné de ta correction vont surement m'aider à l'avenir *_*

Super, je suis contente d'avoir pu t'aider ainsi Very Happy

Bonne continuation ^-^
Kiwi

Bonjour,

J'aimerai savoir comment faire pour mettre plusieurs images cote à cote avec chacune différentes info-bulle. J'ai essayé ça ne marche pas...

Merci d'avance.

Cordialement,
Eli.

Bonjour,

Peux-tu me montrer le code que tu as essayé d'appliquer s'il te plaît? ^^

Kiwi

Merci de ta réponse rapide ! Et voici :

Code:: <div class="infobulle">

</div>
<div class="infobulle">
<img src="http://i72.servimg.com/u/f72/16/12/06/88/03_lil10.png" />
<div>
<img src="http://nsa19.casimages.com/img/2010/09/02/100902121900105262.gif">
<a href="LIEN">Lilly Amaro</a>
</div>
</div><div class="infobulle">
<img src="http://i72.servimg.com/u/f72/16/12/06/88/04_aly10.png">
<div>
<img src="http://nsa14.casimages.com/img/2010/04/16//100416080412253345.gif">
<a href="LIEN">Alysson Brooks</a>
</div>
</div><div class="infobulle">
<img src="http://i72.servimg.com/u/f72/16/12/06/88/05_ali10.png">
<div>
<img src="http://img207.imageshack.us/img207/3848/kristen2.gif">
<a href="LIEN">Alice Lopez Turner</a>
</div>
</div>

Hum, bizarrement, ça marche chez moi quand je copie ton HTML qui n'a pas l'air de présenter des problèmes particuliers... (remarque juste que tu as une div vide au début de ton code, et tu pourrais t'en passer, mais ça n'est pas important ^^)

Peux-tu me donner aussi ton CSS, et si possible un lien pour que je puisse mieux constater la nature du problème?

Merci ^^
Kiwi

Code:: div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #ebebeb; /* arrière-plan de l'infobulle */

color: black; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}

http://elanor.1fr1.net/t2-info-bulle#7

En fait je voudrai l'incorporer à d'autre image qui l'entourerai. Et du coup ça va pas...

Je crois que j'ai un peu de mal ce soir Very Happy

La fatigue sans doute.

En fait, ton problème, c'est que les trois images ne sont pas alignées sur une seule ligne?
Ou faire des infobulles dans les infobulles?

En fait j'ai fais une PA, je l'ai découper pour faire trois info bulle. et en effet je désire mettre mes trois image cote à cote

Bonjour !
Euh, j'ai rencontré le même problème que le membre ci-dessus. Mes infobulles sont impec, seulement je voulais en aligner trois horizontalement et au lieu de ça j'ai eu le même résultat qu'Elanor. J'ai essayé de les mettre dans un tableau (parce que moi y en a pas comprendre grand chose au CSS, donc je cherche des soluces intermédiaires), et me suis du coup retrouvée avec des espaces assez énormes entre chaque infobulle. Donc, laid.

Bonjour

Normalement avec ça cela devrait fonctionner.

Code:: <table>
<tr>
<td>
infobulle
</td>
<td>
infobulle
</td>
<td>
infobulle
</td></tr></table>

Merci pour l'aide, effectivement c'est tout de suite beaucoup mieux comme ça. (... j'avais laissé traîner une balise mal fermée ce qui expliquait pourquoi je disais que ça ne marchait pas même avec un tableau dans mon post précédent. Ahem)

Hum par contre maintenant que j'ai mes infobulles bien côte à côte, c'est Firefox qui fait des siennes. Autant sous Chrome j'ai un rendu pile comme je veux, autant sous firefox, l'infobulle de la première image apparaît en dessous de la seconde image. Euh, je m'embrouille dans mes explication, je vous montre ça sera mieux x')
=> Test infobulle
... En plus j'ai une scrollbar horizontale qui apparaît alors qu'avec Chrome j'avais rien scratch

c'est relativement moche, si quelqu'un sait comment remédier à ça... ?

Edit : Apparemment mon premier problème était juste un bug temporaire de Mozilla, là ça remarche on dirait. Mais mon souci avec la scrollbar persiste, quant à lui ._.

Faire une infobulle [améliorations] (messages)

Faire une infobulle [améliorations] (messages)

Sujets similaires

Sujets similaires

Partenaires Or