avatar cachant une infobulle.

+3
Lii-aa
Forami
zako
7 participants

Page 1 sur 2 1, 2  Suivant

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

Résolu avatar cachant une infobulle.

Message par Lii-aa Lun 13 Sep 2010 - 21:24

Bonsoir,

J'ai eu une petite idée pour mon forum. Ca serait d'y mettre une infobulle, dans l'avatar.
C'est à dire, que quand la souris passera sur l'avatar, les informations du profil s'afficheront, dans une infobulle.

J'ai le code de l'infobulle, seulement, je n'arrive pas à l'installer. Ca me fait n'importe quoi.
Pourriez vous m'aider s'il vous plaît ?

Merci d'avance.
Lii-aa
Lii-aa

Lii-aa
***

Féminin
Messages : 110
Inscrit(e) le : 25/07/2009

http://www.ut-austin.org/
Lii-aa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par zako Lun 13 Sep 2010 - 21:42

euh moi aussi jai un problem jai essayer ce code d'infobulle mais il marche pas je lai essayer en tent que signature et maintenant je n'ai plus acces a mon coin signature.j'ai bien activer la feuille de style css mais sa marche pas.
voici mon code:
<aclass="imginfo">http://www.deambulum.net/public/images/quotidianus/jeux_hitman_bm_3.jpg
<span>Toujurs a votre service!</span>
</a>
avatar

zako
**

Masculin
Messages : 98
Inscrit(e) le : 12/12/2009

http://magicsystem.weshforum.com
zako a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Mar 14 Sep 2010 - 1:02

C'est gentil de donner le code html si tu ne donnes pas le code css qui va avec.

Lii-aa, on pourrait avoir le code entier que tu as ? (donc code html ET code Css )
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lii-aa Mer 15 Sep 2010 - 14:38

Voilà le template dans lequel je veux insérer l'infobulle.
Code:



<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}';
var multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>
      <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
      <!-- BEGIN insert_plus_menu -->
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
         <span class="gensmall bold">
            <script type="text/javascript">
            //<![CDATA[
               insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
         </span>
      </td>
      <!-- END insert_plus_menu -->
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr align="right">
      <td class="catHead" colspan="2" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint">&nbsp;</td>
               <td align="center" nowrap="nowrap" class="t-title"><h1 class="cattitle">&nbsp;<!-- google_ad_section_start -->{TOPIC_TITLE}<!-- google_ad_section_end --></h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <!-- BEGIN displayed -->
   <tr class="post">
   <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
      <div style="font-size:9px;">
  <div class="cadreava">
      <span class="name">
        <a name="{postrow.displayed.U_POST_ID}">
        </a>
      </span>
                <center> <font size=4> <SPAN style="FONT-FAMILY: futura hv"> {postrow.displayed.POSTER_NAME} </SPAN></font>
 <br> <font size=3><font color=#FFFFFF>••••••••••••••••••• </font> </font> <br>

           

<SPAN class=postbody><SPAN class=postbody><A class=imginfo>{postrow.displayed.RANK_IMAGE} <font color=#FFFFFF>{postrow.displayed.POSTER_RANK} </font></br></center> <br>
<div align="center"><span class="postdetails poster-profile">
                  {postrow.displayed.POSTER_AVATAR}</div> <FONT color=black>

</FONT><SPAN><FONT color=black>&nbsp; </FONT>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>WILLOW THOMPSON</FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><A class=imginfo><FONT color=black>
</FONT></A></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>
 <div class="profilentour"><span class="postdetails poster-class="profilentour"><span class="postdetails poster-profile">
 <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->  <center> {postrow.displayed.POSTER_RPG}</center> </span></div></div>



<BR></FONT></TD></TR>
<TR align=middle><FONT color=black></FONT></TR></TBODY></TABLE></SPAN></A>
 
<div align="top center">

            </div></div>
    <br><br>

           
 
 
        </span><br />
<br />        <img src="http://2img.net/i/fa/vide.gif" alt="" style="width: 150px; height: 1px;" />
      </td>      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>
            <tr>
               <td colspan="2" class="hr">
                  <hr />
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <span class="postbody">
                     <!-- google_ad_section_start -->
                     {postrow.displayed.MESSAGE}
                     <!-- google_ad_section_end -->
                     {postrow.displayed.SIGNATURE}
                  </span>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>
<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="2" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="2" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint">&nbsp;</td>
               <td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
   <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>
      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->
      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall">&nbsp;</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
            <input type="hidden" name="sid" value="{S_SID}" />
            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

Ensuite voilà mon code infobulle (j'ai perdu le code vierge malheureusement)
Code:
<SPAN class=postbody><A class=imginfo><FONT color=black><IMG src="http://img11.imageshack.us/img11/4338/sanstitre4wu.png"></FONT><SPAN><FONT color=black>&nbsp; </FONT>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>WILLOW THOMPSON</FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><A class=imginfo><FONT color=black><IMG src="http://illiweb.com/fa/pbucket.gif"></FONT></A></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>Fondatrice &amp; Admin<BR></FONT></TD></TR>
<TR
align=middle><FONTcolor=black></FONT></TR></TBODY></TABLE></SPAN></A>

Ainsi que le CSS
Code:
/* INFOBULLES */
a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on 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: 30px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

Voilà ♥
Lii-aa

Lii-aa
***

Féminin
Messages : 110
Inscrit(e) le : 25/07/2009

http://www.ut-austin.org/
Lii-aa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Mer 15 Sep 2010 - 17:52

OKay,

Le premier code correspond à quel template ?

et ces codes-là tu les as trouvé où en fait ?? Il n'y a pas d'indications ?
Parce que je ne suis pas vraiment qualifiée en template, alors je ne saurai te dire où placer exactement le code à mettre dans le template. Mad
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lii-aa Sam 18 Sep 2010 - 14:33

Le 1er code, c'est mon template viewtopic_body

Quant aux deux autres codes, je les ai trouvé ici, mais il y a super super longtemps alors je ne saurai pas te dire dans quel topic.
Lii-aa

Lii-aa
***

Féminin
Messages : 110
Inscrit(e) le : 25/07/2009

http://www.ut-austin.org/
Lii-aa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Forami Dim 19 Sep 2010 - 21:17

Bonjour
Je pense que tu en fais tout un fromage!...Car une image cliquable avec un texte qui d'affiche fait cela
Forami

Forami
*****

Masculin
Messages : 587
Inscrit(e) le : 16/08/2008

http://forum-histo.forums-actifs.com
Forami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lii-aa Lun 20 Sep 2010 - 22:09

Oui, je sais tout celà, seulement, je ne sait pas du tout comment il faut faire pour que l'infobulle se déclenche au survol de l'avatar.
Lii-aa

Lii-aa
***

Féminin
Messages : 110
Inscrit(e) le : 25/07/2009

http://www.ut-austin.org/
Lii-aa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Lun 20 Sep 2010 - 22:31

En faire tout un fromage, certes, mais bon si tu as une autre solution beaucoup plus simple et beaucoup plus détaillée, ne te gêne pas.
Le problème résulte dans le fait, qu'on ne sait pas où placer les codes dans le template. Que ce soit une image cliquable avec une def ou pas, ça ne rendra pas le même effet en plus.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par -Tiffa- Mer 22 Sep 2010 - 3:13

Bonjour,

Moi aussi, je voudrais que lorsque la souris passe sur l'avatar, les infos s'affichent. Un peu comme dans ce forum: Pensionnat Naoko
-Tiffa-

-Tiffa-
**

Messages : 71
Inscrit(e) le : 28/03/2010

http://asianclan.asiat-world.com/
-Tiffa- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Jeu 23 Sep 2010 - 20:48

Je up comme je suis aussi intéressée.

*edit*

Bon ben j'ai une bonne nouvelle, j'ai réussi à mettre mon info bulle sur mon avatar.

Lii-aa si tu as eu un bugg c'est que ton code est bourré de fautes. Moi même n'y ayant rien compris j'ai pris un des miens, beaucoup plus simple. Si quelqu'un veut savoir comment on fait, je suis là. C'est très simple à faire en fait.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 8:30

Bonjour! Je suis intéressée pour savoir comment mettre une infos bulle sans se casser la tête! Bravo2

Merci d'avance en espérant que sa n'embête pas !
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par demeter1 Ven 24 Sep 2010 - 8:53

Vous avez un tutoriel sur le sujet sur un forum d'entre aide
http://www.atelier-forum.com
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 10:28

Alors d'une part on se rend dans le Panneau.

Affichage >> Images et couleurs >> Couleur >> CSS. On rentre ce code :

Code:
/*----- INFOBULLES ------*/



.lock  {
  position: relative;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 5px;
  padding-right : 5px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 50px;
    left: 200px;
  /* style du bloc qui apparait */
  border: 3px groove #C91010;
  border-radius: 5px;
  background-color: #ffffff;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
width: 150px;
height: 170px;
}
.lock:hover .lock-hidden {
  display: block;
}


Et on clique sur :enreg: .


Les champs que vous pouvez modifier sont (en rouge, mais ce qui apparait entre parenthèse sont mes indications, ne mettez pas ça dans votre code css, si vous voulez mettre vos commentaires dans le css pour vous rappelez de ce que c'est mettez ça : /*COMMENTAIRE/INDICATION*/) :


padding-left : 5px; (marge entre le bord gauche de l'info bulle et le contenu)
padding-right : 5px; (marge entre le bord droitde l'info bulle et le contenu)
padding-top : 2px; (marge entre le bord supérieur de l'info bulle et le contenu)
padding-bottom : 2px; (marge entre le bord inférieur de l'info bulle et le contenu)
top: [/color]50[/color]px; (position de l'info bulle en fonction du bord supérieur de l'info bulle et l'avatar)
left: [color]200[/color]px; (position de l'info bulle en fonction du bors gauche de l'info bulle et l'avatar)

border: 3px groove #C91010; (épaisseur du bord, style de la bordure (groove c'est un effet de relief), couleur de la bordure)
background-color: #ffffff; (couleur de fond de l'info bulle)
text-align: center; (position du contenu dans l'info bulle)
width: 150px; (largeur de l'info bulle)
height: 170px; (hauteur de l'info bulle)


Ensuite on va dans les templates :

Affichage >> templates >> général >> viewtopic_body : Affichage d'un sujet

On clique sur edit .

Dans le template on cherche
Code:
{postrow.displayed.POSTER_AVATAR}

(pour aller plus vite vous cliquer sur ctrl+f et vous rentrez la variable dans la zone de texte.

Ça, c'est la variable qui correspond à l'avatar.

Alors c'est simple, vous l'enlevez, et à la place vous mettez :

Code:
<table>
    <tr>
      <td> 
      <div class="lock"> {postrow.displayed.POSTER_AVATAR}<div class="lock-hidden">
CE QUI APPARAITRA AU PASSAGE DE LA SOURIS
</div></div>
      </td>
    </tr>
</table>

Donc en fait, j'ai juste entouré, ici le "{postrow.displayed.POSTER_AVATAR}" du code pour l'info bulle, qui est :

Code:
<table>
    <tr>
      <td> 
      <div class="lock"> CE QUE L'ON PASSE AVEC LA SOURIS<div class="lock-hidden">
CE QUI APPARAITRA AU PASSAGE DE LA SOURIS
</div></div>
      </td>
    </tr>
</table>



Ensuite on clique sur
:enreg:

Nous revoilà sur la page des tamplate, avec un petit Ajout à côté du template qu'on vient de modifier. Alors avant de l'enregistrer, faite un aperçu en cliquant sur la toute petite icone blanche juste à gauche de la croix verte. Vous allez dans vos sujets et vous testez en passant la souris sur l'avatar. (evidemment oubliez pas de remplir le contenu de l'info bull : "CE QUI APPARAITRA AU PASSAGE DE LA SOURIS" si vous voulez voir quelque chose. Very Happy

(si ça ne marche pas, actualisez en cliquant sur ctrl+f5 jusqu'à ce que vous voyez l'info bulle, ça m'arrive souvent sur mon fofo )

Et si c'est bon, vous allez tout de suite enregistrer en cliquant sur Ajout.



Voilà voilà.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Invité Ven 24 Sep 2010 - 11:34

Bonjour,

Et merci, ça marche du tonnerre!
En remplaçant
Code:
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span>
         <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />

Par
Code:
<table>
    <tr>
      <td>
    <span class="gensmall"> <div class="lock"> {postrow.displayed.POSTER_AVATAR}<span class="lock-hidden">
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}</span>
         <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
</div></span>
      </td>
    </tr>
</table>
J'ai pu mettre toutes le infos du profil et la feuille de personnage dans l'infobulle!
Merci beaucoup Very Happy
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 11:42

x) de rien.
Hey on va travailler ensemble toutes les deux, décidemment. MDR !

Et si on ne veut mettre que quelques points du profil, on fait comment ? Very Happy (genre, le nombre de message, les points)
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Invité Ven 24 Sep 2010 - 11:54

Re,

En fait comme j'ai déplacer ce qui gère les champs du profil en général, pour choisir ce que je veux afficher ou non, il me suffit de passer par
Panneau d'administration > Utilisateurs et groupes > Profil > champs du profil
et je coche oui à ceux que je veux voir affiché dans les messages.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 11:55

Vouais, mais comme je voulais certaines choses dans l'info bulle et certaines choses sous l'avatar... 3)
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 12:03

Pour ma part sa ne marche pas...
Sa m'affiche 4 fois le profil O_O

Sinon pouvez vous me faire un copier coller de votre template s'il vous plait?
Sa sera beaucoup plus rapide!

Sachant que j'aime bien l'info bulle de ton forum avec les levels! Very Happy


Dernière édition par kakale le Ven 24 Sep 2010 - 12:21, édité 1 fois
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 12:20

Le problème étant que je n'ai pas modifié mon template que pour ça, tu auras toutes mes autres modifications avec.

Le mieux ce serait que tu nous donnes tout ce que tu as enregistré pour les info bulles, qu'on puisse voir ce qui ne va pas.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 12:21

Hé bien, j'ai fais comme tu as dis ci-dessus, sauf que, des que je remplace le poster-avatar, j'ai profil qui se mette ^^'...


EDIT: sa marche par je ne sais qu'elle miracle... AH ! oui j'ai du remettre le template par défault ^^'

Sinon, connaissez vous un moyen de changez le style du calque et de l'écriture ^^?
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 12:25

T'es sûr que tu as fais exactement comme j'ai dit ? x) :

Code:
<table>
    <tr>
      <td>
      <div class="lock"> {postrow.displayed.POSTER_AVATAR}<div class="lock-hidden">
CE QUI APPARAITRA AU PASSAGE DE LA SOURIS
</div></div>
      </td>
    </tr>
</table>

Tu as rentré le code css ?
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 12:27

Oui j'ai rentré le code CSS mais maintenant, si tu regarde sur mon forum, sa fait horrible car on voit le profil + l'info bulle qui a un fond blanc et un cadre super moche ^^'
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 12:33

Pour le fond et le cadre j'ai expliqué ce qu'il fallait modifier. x)

Le problème, c'est que tu voit le profil en dessous ET dans l'info bulle, c'est ça ?
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 14:04

oui exact
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 14:22

Donc pour changer le style du cadre :
Dans le code css on change ça :
border: 3px groove #C91010;

EXPLICATION :

- 3 c'est l'épaisseur du cadre
- groove c'est un cadre en relief. Pour l'avoir un pointiller on met : dashed. Pour n'avoir qu'une ligne normal on met solid.
- #C91010 c'est la couleur. Là c'est en rouge.

Pour changer le style d'écriture on doit rajouter une ligne en dessous :
Code:
font-family: Bleeding Cowboys, Evanescent;

Je vous laisse choisir la police vous-même.


Ensuite, pour que le profil ne s'affiche QUE dans l'info bulle, il faut retourner dans le template.
A un endroit vous avez
Code:
{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}

<br><hr>
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
        </span>


Vous enlevez tout ça :

Code:
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->

Vous enregistrez, vous faite l'aperçu pour voir si c'est bon, et si c'est bon vous cliquez sur la petite croix verte.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 14:26

Je vous remercie de votre rapidité et de votre patience, cela fait des mois que je cherchai pour faire une infobulle.

Je vous remercie encore une fois et je test cela !


EDIT : même après effacement, on voit toujours cela, le template est bien toujours le même que tout à l'heure viewtopic_body Affichage d'un sujet ?

EDIT2 : Sinon , je n'arrive pas à mettre par exemple, dans l'infobulle les coordonnées du personnages In game, et dans les profils de la personne ( c'est à dire en dessous de l'avatar ) les coordonnées IRL : âge ect... Est-ce possible?


Dernière édition par kakale le Ven 24 Sep 2010 - 17:12, édité 1 fois (Raison : EDIT)
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 19:35

Séparer les données, je n'ai pas su faire, malheureusement.

Oui le topic reste le même. C'est dans viewtopic-body qu'il faut faire les manip.
Il faudrait, sinon, que vous mettiez les coordonner IRL dans le Profil, et les Coordonnées du jeu dans la Feuille de Personnage.
Ça, c'est possible de séparer.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par kakale Ven 24 Sep 2010 - 20:00

Hmm d'accord, je vous remercie ^^
kakale

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: avatar cachant une infobulle.

Message par Lixyr Ven 24 Sep 2010 - 20:03

Fais cela, et ensuite tu préviens que je te donne le code à rentrer. Il faudra juste que tu précises ce que tu veux sous l'avatar et ce que tu veux dans l'info bulle.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum