Une mini pop up qui s'ouvre au survol de la souris

[Hemma]

Bonjour je voudrais mettre une pop up qui s'ouvre au survol de l'image comme ici tout en bas http://www.gurafikku.org/

[Skipper]

Bonsoir , ceci est un onglet


(Vous me parlez bien de


Les bras droits

Ordonateurs etc ... ?)


Cordialement.

[Hemma]

oui c'est ça

[Skipper]

Bonjour / Bonsoir.
Euh j'ai dénicher sa est-ce que sa vous plait?

Template index_body
[spoiler]

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" perms="{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>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
       
<a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
        <!-- END switch_delete_cookies -->
        </span>
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>

            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>

            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
              <!-- BEGIN switch_delete_cookies -->
             
<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" perms="{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 -->







<!-- DEBUT DU QUI EST EN LIGNE -->

<!-- BEGIN disable_viewonline -->
<center><TABLE BORDER WIDTH=800 style=" background: #0D0D0D; border: solid 2px #fff; ">
<tbody><tr>
<td style="horizontal-align: top" width: 750px; " >
<script type="text/javascript">
//<!--
      function change_onglet(name)
        {
            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
            document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
            document.getElementById('contenu_onglet_'+name).style.display = 'block';
            anc_onglet = name;
        }
//-->
</script>
<div class="onglets">
<center>
<span class="onglet_0 onglet" id="onglet_one" onmouseover="javascript:change_onglet('one');">Onglet 1</span>
<span class="onglet_0 onglet" id="onglet_two" onmouseover="javascript:change_onglet('two');">Onglet 2</span>
<span class="onglet_0 onglet" id="onglet_tree" onmouseover="javascript:change_onglet('tree');">Groupes</span>
<span class="onglet_0 onglet" id="onglet_four" onmouseover="javascript:change_onglet('four');">Statistiques</span>
</center>
</div><br>

<div class="contenu_onglets">
<center>
<div class="contenu_onglet"id="contenu_onglet_one"><b>Titre</b></div>

<div class="contenu_onglet"id="contenu_onglet_two"><b>Titre</b></div>

<div class="contenu_onglet" id="contenu_onglet_tree">
<center>
<table><tr>
<td style=" padding-right: 50px; ">
<span style=" color:#fff; "><div class="infobul">Groupe 1<span><i>Description</i><br>du groupe<br><a href="#">ici</a></div></span>
</td>
<td style=" padding-right: 50px; ">
<span style=" color:#00008f; "><div class="infobul">Groupe 2<span><i>Description</i><br>du groupe<br><a href="#">ici</a></div></span>
</td>
<td style=" padding-right: 50px; ">
<span style=" color:#d60000; "><div class="infobul">Groupe 3<span><i>Description</i><br>du groupe<br><a href="#">ici</a></div></span>
</td>
<td>
<span style=" color:#685; "><div class="infobul">Groupe 4<span><i>Description</i><br>du groupe<br><a href="#">ici</a></div></span>
</td>
</tr>
</table></center>
</div>

<div class="contenu_onglet" id="contenu_onglet_four">
<center>
<span id="matt"><font color=#fff size="2">{TOTAL_USERS}</font></span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Il y a");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById ('matt').innerHTML.replace(/membre enregistré/,"habitant à New York ");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById ('matt').innerHTML.replace(/membres enregistrés/,"habitants à New York ");</script><br>

<span id="bert"><font color=#fff size="2">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Nos New Yorkais ont posté");</script><script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"messages.");</script></span><br>

<span id="yosh">{NEWEST_USER}</span> <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," La dernière personne à avoir emménagé à New York est ");</script><br>
     
<span id="newest">{RECORD_USERS}</span><script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record du nombre de New Yorkais en ville est de");</script><br >

<span class="gensmall"><span id="delf"><font color=#fff size="2">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne en ville");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes en ville");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"New Yorkais");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"New Yorkais");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"homme invisible,");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"hommes invisibles,");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"étranger");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"étrangers");</script></span><br>

<span id="connectes">{LOGGED_IN_USER_LIST}</span><script type="text/javascript">document.getElementById('connectes').innerHTML=document.getElementById('connectes').innerHTML.replace(/Utilisateurs enregistrés/,"Qui est en balade");</script></span>
{L_CONNECTED_MEMBERS}<br>
 
<font color=#fff size="2">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br>

<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
</div></center>

<script type="text/javascript">
//<!--
var anc_onglet = 'one';change_onglet(anc_onglet);
//--></script>
<!-- fin onglets -->
</div>
</div>
</td></tr></table>

<!-- END disable_viewonline -->
<!-- FIN DU QUI EST EN LIGNE -->











{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
});
//]]>
</script>
<!-- END switch_fb_index_login -->[/spoiler]

Les deux codes suivant sont a placer dans la feuille de style.
Code pour les onglets et contenu
[spoiler]

Code:


.onglet{
display:inline-block;
margin-bottom: 0px;
margin-left: 10px;           
margin-right: 10px;
padding:0px;
height: 15px;            /* hauteur onglets */
width: 85px;            /* largeur onglets */
cursor:pointer;
font-size: 12px;         
font-family: Comic Sans MS, Verdana, Arial, serif;   
font-weight: bold;
padding: 2px;
}
.onglet_0{
background:#transparent;        /* couleur fond onglet inactif */
-moz-border-radius:20px 20px 20px 20px;        /* arrondi onglet inactif pour mozila */
-webkit-border-radius:20px 20px 20px 20px;    /* arrondi onglet inactif pour Safari  Chrome */
border-radius:20px 20px 20px 20px;                /* arrondi onglet inactif pour I.E */
border: solid 1px #4E3D28;        /* épaisseur et couleur onglet inactif */
}
.onglet_1{
font-size: 14px;              /* grossi lettre actif */
font-family: Comic Sans MS, Verdana, Arial, serif;        /* police onglet actif */
background:#transparent;          /* couleur fond onglet actif */
padding-bottom:4px;              /* marge du bas entre le texte onglet et le bord  */
border: solid 2px #fff;            /* bordure onglet actif */
-moz-border-radius:20px 20px 20px 20px;        /* arrondi onglet actif pour mozila */
-webkit-border-radius:20px 20px 20px 20px;    /* arrondi onglet actif pour Safari  Chrome */
border-radius:20px 20px 20px 20px;                /* arrondi onglet actif pour I.E */
-moz-box-shadow: 0px 0px 10px white;          /* ombre onglet actif et inactif */
-webkit-box-shadow: 0px 0px 10px white;
box-shadow: 0px 0px 10px white;                 
}
.contenu_onglet{           
color: #ffffff;           
font-size: 14px;
font-family: Comic Sans MS, Verdana, Arial, serif;      /* police dans le cadre */
background-color:#0D0D0D;          /* couleur de fond cadre */
margin-right: 4px;                   
padding:0px;
display:none;
height: 175px;                                 
width: 760px;                                 
}[/spoiler]

Code infobulle pour les groupes
[spoiler]

Code:


.infobul{position: relative;z-index: 0;}

.infobul:hover{background-color: transparent;z-index: 50;}

.infobul span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobul span img{border: 1px;padding: 5px;}

.infobul:hover span{
visibility: visible;
top: 17px;
left: -40px;
width: 150px ;
color:#FFFFFF;
text-align: center;
border: 1px outset #FFFFFF;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}[/spoiler]

Si tu as des questions n'hésite surtout pas.

[Hemma]

merci Beaucoup