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

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

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

Message par Hemma le Sam 2 Avr 2011 - 22:02

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


Dernière édition par Hemma le Mar 5 Avr 2011 - 23:16, édité 1 fois

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une mini pop up qui s'ouvre au survol de la souris

Message par Skipper le Sam 2 Avr 2011 - 23:10

Bonsoir , ceci est un onglet


(Vous me parlez bien de


Les bras droits

Ordonateurs etc ... ?)


Cordialement.

Skipper
*****

Masculin
Messages : 506
Inscrit(e) le : 30/12/2010

http://no-limite.forumclan.com
Skipper a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une mini pop up qui s'ouvre au survol de la souris

Message par Hemma le Dim 3 Avr 2011 - 11:29

oui c'est ça

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Une mini pop up qui s'ouvre au survol de la souris

Message par Skipper le Lun 4 Avr 2011 - 19:58

Bonjour / Bonsoir.
Euh j'ai dénicher sa est-ce que sa vous plait?
@Tupac a écrit: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.

Skipper
*****

Masculin
Messages : 506
Inscrit(e) le : 30/12/2010

http://no-limite.forumclan.com
Skipper a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une mini pop up qui s'ouvre au survol de la souris

Message par Hemma le Mar 5 Avr 2011 - 23:17

merci Beaucoup

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma 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