Voir la description d'un groupe au survol de la souris.

[supergogetass4]

J'ai suivis ces 2 topics, j'ai réussi mais on ne voit pas le nom du groupe  
Code CSS :

Code:

       .infobulle{
        position: relative;
        z-index: 0;}
        
       .infobulle:hover{
        background-color: transparent;
        z-index: 50;}
        
       .infobulle span{
        position: absolute;
        background-color: #000000;
        padding: 5px;
        left: -1000px;
        visibility: hidden;
        color: #FFFFFF;}
        
       .infobulle span img{
        border: 2px;
        padding: 5px;}
        
       .infobulle:hover span{
        visibility: visible;
        top: 70px;
        left: 35px;
        width: 200px ;
        color:#FF0000;
        border: 2px solid #0000FF;}

Code template :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect_no -->

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle" align="right">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 <!-- END switch_delete_cookies -->
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </span>
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect_no -->

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

  <!-- BEGIN disable_viewonline -->
                <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
                  <tr>
                      <td class="catHead" colspan="2" height="28">
                      <!-- BEGIN switch_viewonline_link -->
                      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
                      <!-- END switch_viewonline_link -->
              
                      <!-- BEGIN switch_viewonline_nolink -->
                      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
                      <!-- END switch_viewonline_nolink -->
                      </td>
                  </tr>
        <tr>
          <td class="row1" width="100%"><table><tr><td><img src="http://image.noelshack.com/fichiers/2013/19/1368373831-1.png"/></td><td style="padding: 10px;"><span class="gensmall">
        {TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}<br />
        {LOGGED_IN_USER_LIST}<br /></span>
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g2-diable"><br /><span>Diable</span></div>
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g6-fossoyeur-du-diable"><br /><span>Fossoyeur du Diable</span></div>            
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g5-moderateur"><br /><span>Modérateur</span></div>            
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g8-designer"><br /><span>Designer</span></div>            
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g7-membre-leader"><br /><span>Membre leader</span></div>
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g4-membre"><br /><span>Membre</span></div>
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g9-apprenti"><br /><span>Apprenti</span></div>
<div class="infobulle"><img src="http://lga-v5.forumactif.com/g10-mortel"><br /><span>Mortel</span></div>
            <table>{L_CONNECTED_MEMBERS}</table></td></tr></table></td></tr>
                  
<tr><td class="catHead" colspan="2" height="28"><span class="cattitle">Anniversaires</span></td></tr>
                  
<tr><td class="row1"><table><tr><td><img src="http://i81.servimg.com/u/f81/18/00/51/45/7410.png"/></td><td style="padding: 10px;"><table>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</table></td></tr></table></td></tr>
                  
<tr><td class="catHead" colspan="2" height="28"><span class="cattitle">Statistiques</span></td></tr>
                  
                  <tr><td class="row1"><table><tr><td><img src="http://image.noelshack.com/fichiers/2013/19/1368374031-4.png"/></td><td style="padding: 10px;"><span class="gensmall">{TOTAL_POSTS}<p>{TOTAL_USERS}</p>{NEWEST_USER}</span></td></tr></table></td></tr>
            
                  
              
                  <!-- BEGIN switch_chatbox_activate -->
                  <tr>
<tr><td class="catHead" colspan="2" height="28"><span class="cattitle">Chatbox</span></td></tr>
                    <td class="row1"><table><tr><td><img src="http://image.noelshack.com/fichiers/2013/19/1368374080-2.png"/></td><td style="padding: 10px;"><span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                            <!-- BEGIN switch_chatbox_popup -->
                            <div id="chatbox_popup"></div>
                            <script type="text/javascript">
                            //<![CDATA[
                            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                            //]]>
                            </script></span></td></tr></table></td>
                            <!-- END switch_chatbox_popup -->
                        </span>
                      </td>
                  </tr>
                  <!-- END switch_chatbox_activate -->
                </table>
                <!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
 <tr>
 <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NEW_POSTS}</span></td>
 <td></td>
 <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
 <td>  </td>
 <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
 <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
 </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->


https://forum.forumactif.com/t291783-comment-faire-une-infobulle
https://forum.forumactif.com/t351366-infobulle-pour-les-groupes

Merci

[supergogetass4]

Up.

[supergogetass4]

Up.

[supergogetass4]

Up.

[supergogetass4]

Up.

[supergogetass4]

Up (il y a <img src= ..) je pense qu'il faut mettre un autre code, si ça peut vous aider .

[MlleAlys]

je ne comprends pas bien, par "le nom du groupes", vous parlez de l'image qui ne s'affiche pas ? <img sr="URL DE L'IMAGE" /> code bien pour une image, o les adresses que vous avez entré dans la balise sont des liens vers la page du groupe, et non l'url d'une image...

je ne comprends pas bien ce que vous voulez, alors je vais essayer une autre hypothèse, désolée si c'est pas ça ^^" :
Vous souhaitez non pas mettre une image mais juste le nom du groupe, puis sa description dans l'infobulle à la place du nom, justement, et un simple lien vers la page du groupe.

dans ce cas, il faut faire comme ceci je pense :
vous avez fait comme cela :

Code:

<div class="infobulle">
    <img src="LIEN DE LA PAGE" />
    <br />
    <span>
        NOM DU GROUPE
    </span>
</div>

essayez de remplacer par quelque chose comme ça :

Code:

<div class="infobulle">
    <a href="LIEN DE LA PAGE">
        NOM DU GROUPE
        <span>
            INTERIEUR INFOBULLE
        </span>
    </a>
</div>

[supergogetass4]

Merci, ça marche parfaitement

Mon ancienne Légende : http://www.noelshack.com/2013-27-1372704958-12.png
Ma Légende actuelle : http://www.noelshack.com/2013-27-1372704959-11.png

Ce n'est pas possible d'avoir mon ancienne Légende mais garder les infobulles?
Merci,

[MlleAlys]

vous voulez dire remettre sur une même ligne et ajouter les couleurs ?

[supergogetass4]

J'ai essayer en faisant qu'une ligne mais sans résultat

[MlleAlys]

Les retours à la ligne sont provoqués par la balise "div", celle avec la class infobulle : avec une balise div, il y a toujours automatiquement un retour à la ligne.
Pour éviter ce retour à la ligne, vous pouvez remplacer les balises div par des balises span :

Code:

 [ <span class="infobulle">
    <a href="LIEN DE LA PAGE">
        <font color="COULEUR">
            NOM DU GROUPE
        </font>
        <span>
            INTERIEUR INFOBULLE
        </span>
    </a>
</span> ]

J'ai également ajouter la balise font, dans laquelle vous pouvez modifier la couleur du groupe, ainsi que les crochets au début et à la fin, comme sur l'ancienne légende, si vous n'en voulez pas vous pouvez les retirer et mettre juste une virgule à la fin par exemple ^^

[supergogetass4]

Merci beaucoup .
Voici le résultat : http://www.noelshack.com/2013-27-1372714387-12.png
Comment faire pour avoir la même taille, avoir un espace entre les crochet pour avoir ] [, et comment faire pour que le nom du groupe ne soit plus souligné?
Merci,

[MlleAlys]

- pour le soulignement, tu peux ajouter dans ton css :

Code:

.infobulle a {
    text-decoration: none;
}

- L'espace en html c'est ce code là : & nbsp;  (sans l'espace entre le & et le nbsp; , mais si je l'enlève, même entre des balises codes, il me le transforme direct en espace lors de l'envoi du message ! ><") que tu mets directement entre les crochets
- Pour avoir la même taille, tu peux encadrer le tout avec des balises <span class="gensmall"> tes groupes </span>
gensmall, c'est la class utilisée pour les petites tailles de police un peu partout sur le forum, comme dans le qeel ^^

[supergogetass4]

Le code CSS marche.
Pour l'espace, ça marche.
Quand je mets <span class="gensmall">Groupe</span>, le groupe disparait mais ça a marché pour la taille des crochets.

Code:

<span class="gensmall"> Légende : [ </span><span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g2-diable">
        <font color="#A30000">Diable</font>
        <span>
            Administrateurs du forum.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g6-fossoyeur-du-diable">
        <font color="#F58105">Fossoyeur du Diable</font>
        <span>
            Personnes extérieur au clan aidant le Diable.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g5-moderateur">
        <font color="#1F1F1F">Modérateur</font>
        <span>
            Modérateurs du forum.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g8-designer">
        <font color="#00C2C2">Designer</font>
        <span>
            Graphiste du clan.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g7-membre-leader">
        <font color="#1828DB">Membre leader</font>
        <span>
            Membres pouvant délibérer.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g4-membre">
        <font color="#423803">Membre</font>
        <span>
            Groupe réservé aux membres.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g9-apprenti">
        <font color="#75008C">Apprenti</font>
        <span>
            Groupe d'apprentis du forum.
        </span>
    </a>
</span> <span class="gensmall">]</span>
<span class="gensmall">[</span> <span class="infobulle">
    <a href="http://lga-v5.forumactif.com/g10-mortel">
        <font color="#993300">Mortel</font>
        <span>
            Groupe d'invités.
        </span>

Merci,

[MlleAlys]

pour les balises gensmall, tu peux n'en mettre qu'une au début et fermer tout à la fin :

Code:

<!-- DEBUT DES GROUPES -->
<span class="gensmall">
    Légende :
    [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g2-diable">
            <font color="#A30000">Diable</font>
            <span>
                Administrateurs du forum.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g6-fossoyeur-du-diable">
            <font color="#F58105">Fossoyeur du Diable</font>
            <span>
                Personnes extérieur au clan aidant le Diable.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g5-moderateur">
            <font color="#1F1F1F">Modérateur</font>
            <span>
                Modérateurs du forum.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g8-designer">
            <font color="#00C2C2">Designer</font>
            <span>
                Graphiste du clan.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g7-membre-leader">
            <font color="#1828DB">Membre leader</font>
            <span>
                Membres pouvant délibérer.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g4-membre">
            <font color="#423803">Membre</font>
            <span>
                Groupe réservé aux membres.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g9-apprenti">
            <font color="#75008C">Apprenti</font>
            <span>
                Groupe d'apprentis du forum.
            </span>
        </a>
    </span>
    ] [
    <span class="infobulle">
        <a href="http://lga-v5.forumactif.com/g10-mortel">
            <font color="#993300">Mortel</font>
            <span>
                Groupe d'invités.
            </span>
        </a>
    </span>
</span>
<!-- FIN DES GROUPES -->

pour l'espace... là comme ça je ne sais pas trop autre chose que & n b s p ;    

[supergogetass4]

Merci beaucoup, c'est enfin fini, j'ai rajouté <strong> </strong> pour mettre en gras, problème résolu .

[MlleAlys]

de rien, et tant mieux alors, bravo ! \o/

[supergogetass4]

Encore merci pour ton aide.