Sujets similaires

Bonsoir, alors voilà, j'ai le même soucis qu'elle : https://css-actif.forumactif.org/resolu-f18/infobulle-sur-image-reactive-t5508.htm
donc, j'ai lu tout le sujet, et essayé certaines solutions, mais ça ne marche pas.

voici mon image de page d'accueil ; https://2img.net/r/hpimg7/pics/215400jjjj.png et le code :

Spoiler:

je voudrai créer des infobulles pour les images du staff =)

voilà thx I love you

Bonjour,

Je pense qu'il va falloir que tu recodes une bonne partie de ta page si tu veux mettre des infobulles. Comme expliqué dans le tuto : Ici; si tu veux faire une infobulle (ou toute autre chose nécessitant des codes html : défilement de textes/image; barre de défilement ...) il faut utiliser ce qu'on appelle des "tranches". Pour ton staff, si tu veux des infobulles; il va falloir trancher xD

Omg je vais mourir xD
J'crois que j'vais essayer de comprendre les tableaux plutôt uhuh x)

Ca peut décourager en effet. Comme il fallait que je teste ce code pour mon éventuel prochain design; j'ai essayé sur ton image. [Bon, t'es pas obligée d'utiliser mon code non plus xD]

En gros, j'ai découpé ton image ainsi : https://2img.net/r/ihimizer/img704/5804/testpc.png (en 7 parties donc; j'ai pas pu faire moins xD) Et j'ai recodé le tout en mettant les infobulles sur le Staff (faudra juste les remplir et changer le CSS xD)

J'ai essayé de rendre le code le plus simple possible à comprendre, en mettant des commentaires. En fait, ton image est coupée en 7 parties :

1. La navigation, les partenaires & le contexte
2. Les news
3. L'image de Joyce
4. L'image de Kiara
5. L'image de Mattew
6. Un espace vide à côté de Mattew
7. La zone mozilla & blog

Chaque zone est donc séparée dans le code; et les zones 1, 2 et 7 ont des MAPS rattachées, que tu trouveras en bas du code. Par contre, comme ce sont donc 3 images indépendantes et non plus une seule; les coordonnées ont changé (puisqu'on prend les coordonnées d'une image découpée, et non plus de l'image entière. Difficile à suivre xD)
Par exemple, si tu veux rajouter une coordonnée pour un logo partenaire, tu devras ouvrir l'image 1 (soit celle là : cliiic) et chercher les coordonnées.

[Euh, je précise que j'ai hébergé les images sous Imageshack; mais que tu peux les réhéberger avec ton hébergeur habituel xD (pense à sauvegarder les morceaux, au cas où xD) Faudra juste penser à changer les liens dans le code; mais aussi dans la MAP pour les images 1, 2 et 7)

Code:: <table width="736" height="507" border="0" cellpadding="0" cellspacing="0">
<tr>
   
   <td colspan="5">
      <img src="http://img530.imageshack.us/img530/9503/215400jjjj01.png" width="736" height="344" usemap="#liens_partenaires_contexte">
   </td>
</tr>

<tr>
   
   <td>
      <img src="http://img42.imageshack.us/img42/658/215400jjjj02.png" width="509" height="76" usemap="#news">
   </td>

   
   <td>
      <div class="infobulle">
      <img src="http://img72.imageshack.us/img72/4805/215400jjjj03.png" width="54" height="76" alt="Joyce">
      <span>
      <font style="font-variant:small-caps;font-weight:bold; font-size: 12px;">Joyce</font><br>
      XxX<br>
      <div><a href="#">Contacter ?</a><br>
      <a href="#">Profil ?</a></div>
      </span>
      </div>
   </td>

   
   <td>
      <div class="infobulle">
      <img src="http://img820.imageshack.us/img820/5113/215400jjjj04.png" width="59" height="76" alt="Kiara">
      <span>
      <font style="font-variant:small-caps;font-weight:bold; font-size: 12px;">Kiara</font><br>
      XxX<br>
      <div><a href="#">Contacter ?</a><br>
      <a href="#">Profil ?</a></div>
      </span>
      </div>
   </td>

   
   <td>
      <div class="infobulle">
      <img src="http://img714.imageshack.us/img714/9991/215400jjjj05.png" width="61" height="76" alt="Mattew">
      <span>
      <font style="font-variant:small-caps;font-weight:bold; font-size: 12px;">Mattew</font><br>
      XxX<br>
      <div><a href="#">Contacter ?</a><br>
      <a href="#">Profil ?</a></div>
      </span>
      </div>
   </td>

   
   <td>
      <img src="http://img693.imageshack.us/img693/872/215400jjjj06.png" width="53" height="76" alt="">
   </td>
</tr>

<tr>
   
   <td colspan="5">
      <img src="http://img713.imageshack.us/img713/3498/215400jjjj07.png" width="736" height="87" usemap="#mozilla_blog">
   </td>
</tr>
</table>


<map name="liens_partenaires_contexte">
<area shape="rect" coords="168,56,240,72" href="http://chained-memories.1fr1.net/reglement-f1/rules-lecture-imperative-t3.htm" alt="reglement">
<area shape="rect" coords="172,78,237,91" href="http://chained-memories.1fr1.net/contexte-f3/" alt="contexte">
<area shape="rect" coords="154,103,256,114" href="http://chained-memories.1fr1.net/postes-vacants-f35/" alt="pvs">
<area shape="rect" coords="162,123,247,134" href="http://chained-memories.1fr1.net/partenariat-f46/" alt="partenariat">

<area shape="rect" coords="37,207,87,256" href="http://love-always-remains.superforum.fr/" alt="top">

<area shape="rect" coords="106,258,153,273" href="http://chained-memories.1fr1.net/partenariat-f46/nos-partenaires-t60.htm#305" alt="more">
<area shape="rect" coords="167,258,216,273" href="http://chained-memories.1fr1.net/partenariat-f46/demande-de-partenariat-t15.htm" alt="vous">

<area shape="rect" coords="490,260,584,271" href="http://chained-memories.1fr1.net/contexte-f3/a-chain-of-memories-contexte-t42.htm" alt="suite">
</map>

<map name="news">
<area shape="rect" coords="180,65,297,80" href="http://chained-memories.1fr1.net/bloc-notes-f5/mises-a-jours-t64.htm" alt="news">
</map>

<map name="mozilla_blog">
<area shape="rect" coords="88,37,281,74" href="http://www.mozilla-europe.org/fr/firefox/" alt="firefox">
<area shape="rect" coords="291,36,463,72" href="http://chainedmemories-rpg.skyrock.com/" alt="blog">
</map>

Le CSS des infobulles : (à personnaliser; bien sur xD)

Code:: div.infobulle
{position: relative;
color: #FFFFFF;
text-decoration: none;
font-size: 10px;
border-bottom: none;
text-align: center;}

div.infobulle span
{display: none;}

div.infobulle:hover
{background: none;
z-index: 999;
cursor: defaut;}

div.infobulle:hover span
{display: inline;
position: absolute;
white-space: nowrap;
top: 30px;
left: 25px;
background-color: #000000;
text-decoration: none;
color: #FFFFFF;
padding: 3px;
border: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;;
font-size: 10px;
min-width:135px;
text-align: center;}

Wow *-* merci de ces explications ! J'ai vaguement lu, mais je marque la page et j'essaierai !
Par contre le code il faut toujours le mettre dans généralités c'est ça? =)

Toujours oui xD
Et le CSS dans la feuille CSS (en le personnalisant bien sur ^^)
Si tu as besoin; dis le ^^

Merci beaucoup Smile

là j'vais essayer d'avancer la construction de mon nouveau forum et quand j'en serai à construire le message d'accueil je n'hésiterai pas à te demander de l'aide Very Happy

Dis, je sais que c'est pas l'endroit adéquat, mais j'avais posté quelques questions pour mon forum dans l'Aide et j'attends toujours des réponses TT Je sais que vous êtes tous overbookés, mais comme je vois que tu réponds assez vite je voulai te demander si tu pouvais m'aider Smile

Je laisse ouvert en attendant alors =)

https://css-actif.forumactif.org/aide-css-xhtml-f17/problemes-existentiels-ahah-t6151.htm#50030
Si tu parles de ce topic là; j'ai vu xD
Luna a répondu a une de tes questions d'ailleurs; ce serait bien que tu fasses un résumé de ce qu'il te reste à résoudre; qu'on en sache un peu plus xD