Feuille de personnage masqué

[CryingToYourHeart]

Bonjour,

Je souhaiterais faire en sorte que ma feuille de personnage soit masqué, pas avec un bouton, mais qu'elle puisse se dérouler lorsqu'on passe la souris sur une image en bas du profil.

Ou alors pour ne pas faire trop chargé, j'aimerais savoir s'il était possible de faire le profil en onglet et ainsi de mettre la feuille de personnage en onglet elle aussi.

Merci d'avance

[Invité]

Bonsoir,

Réponse apportée ici : https://forum.forumactif.com/t310550-feuille-de-personnage

Cordialement.

[CryingToYourHeart]

Bonsoir,

Justement je ne veux pas cliquer sur le bouton pour qu'il se déroule mais passer la souris dessus.

[CryingToYourHeart]

UP

[CryingToYourHeart]

UP   

[CryingToYourHeart]

UP  
Personne ?

[CryingToYourHeart]

Quelqu'un pourrait m'aider ?

[CryingToYourHeart]

Personne ?

[MasDan]

Bonjour,

Il s'agit de modifier le déclencheur. Remplacer «onClick» par «onMouveOver».

[CryingToYourHeart]

Je ne peux plus ouvrir la feuille de personnage avec ce code et la modification effectué

Code:

<div onMouveOver="this.firstChild.value=(this.firstChild.value=='Oh my gosh !')?'Close':'Oh my gosh !';this.lastChild.style.display=(this.firstChild.value=='Oh my gosh !')?'none':'block';" style="text-align: center;">
        <input type="button" value="Oh my gosh !" style="background-color: #fcf2f6; color: #EBA0BA;-moz-border-radius:10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;" />
<div style="display: none; text-align: left;">
            {postrow.displayed.POSTER_RPG}</div>
        </div>

[MasDan]

Bonjour,

Remplacer le code fourni précédemment par ceci

Code:

 <div style="text-align: center;">
    <input type="button" value="Oh my gosh !"
       style="background-color: #fcf2f6; color: #EBA0BA;-moz-border-radius:10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;"
         onMouseOver="$(this).val('Close');$(this).parent().find(':last-child').attr('style','display:block');"
         onMouseOut="$(this).val('Oh my gosh !');$(this).parent().find(':last-child').attr('style','display:none');"/>
    <div style="display: none; text-align: left;">
      {postrow.displayed.POSTER_RPG}
    </div>
  </div>

J'ai placé le code sur le bouton seulement et non sur toute la DIV.

Question: Pourquoi un champ <input> et non un <span> qui me semble plus approprié ?

[CryingToYourHeart]

Merci beaucoup

Comment puis-je faire pour qu'il se déroule progressivement et pas d'un seul coup ?

Honnêtement je ne sais pas c'est ce qu'on m'avait donné il y a quelques temps de cela

[MasDan]

Bonjour,

Pour obtenir le déroulement progressif,

1) à ajouter à votre CSS.

Code:

.divBt span{
  display: block;
  width: 100px;
  color:#EBA0BA;  marging: 5px;
  background-color: #FCF2F6;
  padding: 2px;
  border: 2px solid #912424;
  border-radius: 15px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .75);
}

2) remplacer le code HTML fournit précédemment par ceci.

Code:

 <div style="text-align: center;">
 <center>
  <div class="divBt">
    <span
   onMouseOver="$(this).html('Close');$(this).parent().parent().parent().find('.dspRPG').animate({height:'toggle'},2000);"
        onMouseOut="$(this).html('Oh my gosh !');$(this).parent().parent().parent().find('.dspRPG').animate({height:'toggle'},500);">
  Oh my gosh !
  </span>
  </div>
 </center>
    <div style="display: none; text-align: left;" class="dspRPG">
      {postrow.displayed.POSTER_RPG}
    </div>
  </div>


Note:  j'ai aussi remplacé le champ <input> par un <div><span>, les coins arrondis ne fonctionnaient pas. Et de plus, la largeur du bouton, étant variable, causait un problème lors du survol aux extrémités.

J'ai mis des temps d'exécution différent pour le déroulement (2s  ref: 2000) et d'enroulement ( 0,5 sec  ref 500) que vous pouvez ajuster.

[CryingToYourHeart]

Merci beaucoup pour votre aide ça marche exactement comme je le voulais   

J'aimerais si possible faire en sorte qu'il n'y ait pas de bouton, enfin qu'il y ait juste le texte et pas l'ombre et le cadre, je dois modifier le CSS ou le code html ?

[MasDan]

Bonjour,

Il faut garder le bouton mais avec l'apparence d'un texte seulement.

Modifier le CSS donné précédemment par ceci

Code:

.divBt span {
  display: block;
  width: 100px;
  color:#EBA0BA;
}


[CryingToYourHeart]

Merci beaucoup c'est exactement comme je voulais