retarder l'apparition d'une infobulle

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

Résolu retarder l'apparition d'une infobulle

Message par MlleAlys le Jeu 9 Mai 2013 - 12:20

Bonjour (ou bonsoir xP) !

Je m'excuse si le sujet a déjà été abordé autre part, je n'ai pas trouvé. Voilà mon problème :

J'ai installé des infobulles sur des images (dans la description des forums, de façon à ce que la description de celui ci apparaisse au passage de la souris sur l'image), mais j'aimerais que l'infobulle en question n'apparaisse qu'après une seconde (par exemple).

J'ai cru comprendre après quelques recherche qu'il fallait utiliser setTimeout et clearTimeout dans du javascript, mais malheureusement, je n'y connais rien au javascript, et je suis incapable d'adapter ce que je trouve à ce que je veux ! Crying or Very sad

voilà le code mis en description d'un de mes forums :
Code:
<a class="infobulle" href="http://estrelane.forumactif.com/f7-questions-et-suggestions">
  <img src="http://i36.servimg.com/u/f36/12/56/43/35/demand11.gif">
  <span>Une remarque, un problème, une idée pour le forum ? C'est ici !</span>
</a>

et la partie css concernée pour la class "infobulle" :
Code:
/*INFOBULLE 1*/
a.infobulle{
    position: relative;
    padding:4px;
}
a.infobulle span {
    display: none;
}
a.infobulle:hover {
    background: none repeat scroll 0 0 transparent;
    z-index: 999;
}
a.infobulle:hover span {
    background-color: rgba(255,255,255,0.6);
    border: 1px solid #ffffff;
    color: #10191D;
    font-size: 10px;
    display: inline; /*pas toucher*/
    left: 30px; /*espace gauche par rapport au texte survolé*/
    top: -10px;/*espace haut par rapport au texte survolé*/
    right: 30px;
    width: auto;
    heigth: auto;
    padding: 3px; /*espace a l\'intérieur de la bulle par rapport aux bordures*/
    position: absolute; /*pas toucher*/
    text-align:center;
}
/*FIN INFOBULLE 1*/

(adresse du forum : http://estrelane.forumactif.com/ , le code plus haut est celui de "Questions et suggestions")

merci d'avance ! Smile


Dernière édition par MlleAlys le Mar 14 Mai 2013 - 14:21, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: retarder l'apparition d'une infobulle

Message par MlleAlys le Ven 10 Mai 2013 - 17:54

up ! ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: retarder l'apparition d'une infobulle

Message par mambo54321 le Sam 11 Mai 2013 - 2:41

Ce ne serait pas plutôt:
Code:

        <a href="http://estrelane.forumactif.com/f7-questions-et-suggestions">
          <img  title="Une remarque, un problème, une idée pour le forum ? C'est ici !" src="http://i36.servimg.com/u/f36/12/56/43/35/demand11.gif">
        </a>

mambo54321
*

Messages : 46
Inscrit(e) le : 15/11/2011

http://canard-jitsu.forum-servers.com
mambo54321 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: retarder l'apparition d'une infobulle

Message par MlleAlys le Sam 11 Mai 2013 - 2:45

hmmm non je ne pense pas, parce que le fait de définir moi même mon infobulle me permet de la positionner là où je veux et la mettre en forme comme je veux ^^

et à présent je cherche à retarder son apparition...

mais merci de la réponse ! =D

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: retarder l'apparition d'une infobulle

Message par Adam_sfp le Sam 11 Mai 2013 - 8:03

Bonjour

Vous pouvez essayer de rajouter et remplacer


Code:
  a.infobulle span {
            opacity: 0;
        }

et rajouter dans a.infobulle:hover span
Code:
 opacity: 1;
  transition-delay:1s;
webkit-transition-delay:1s;
-moz-transition-delay:1s;
-ms-transition-delay:1s;

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: retarder l'apparition d'une infobulle

Message par MlleAlys le Sam 11 Mai 2013 - 11:56

c'était une bonne idée, je n'y avais pas pensé ! =D
mais après quelques bidouillages, je peux dire que ça ne fonctionne pas, ou alors je n'y arrive pas : je ne sais pas pourquoi, mais aucun effet de transition n’apparaît sur l'infobulle, qu'importe le tupe que je mets T-T

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: retarder l'apparition d'une infobulle

Message par MlleAlys le Dim 12 Mai 2013 - 12:56

up

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: retarder l'apparition d'une infobulle

Message par MlleAlys le Lun 13 Mai 2013 - 21:12

up

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: retarder l'apparition d'une infobulle

Message par [Nihil] le Lun 13 Mai 2013 - 22:25

Salut MlleAlys Smile

Voici un code css qui marche :

Code:
           /*INFOBULLE 1*/
        a.infobulle{
            position: relative;
            padding:4px;
        }
        a.infobulle span {
            background-color: rgba(255,255,255,0.6);
            border: 1px solid #ffffff;
            color: #10191D;
            font-size: 10px;
            display: inline; /*pas toucher*/
            left: 30px; /*espace gauche par rapport au texte survolé*/
            top: -10px;/*espace haut par rapport au texte survolé*/
            right: 30px;
            width: auto;
            heigth: auto;
            padding: 3px; /*espace a l\'intérieur de la bulle par rapport aux bordures*/
            position: absolute; /*pas toucher*/
            text-align:center;
         
         /* Une fois qu'on a réglé l'apparence de l'infobulle, on la masque*/
         opacity:0;
         /* On règle ici la transition */
         -webkit-transition: all 1s ;
         -moz-transition: all 1s ;
         -ms-transition: all 1s ;
         -o-transition: all 1s ;
         transition: all 1s ;
        }
        a.infobulle:hover {
              background: none repeat scroll 0 0 transparent;
            z-index: 999;
        }
        a.infobulle:hover span {
         /* Au survol, l'opacité passe à 1, on peut donc voir l'infobulle !*/
          opacity:1;

        }
        /*FIN INFOBULLE 1*/

Je l'ai testé sur mon ordinateur, cela fonctionnait sans problème. Néanmoins, n'hésite pas à me dire si ce n'est pas l'effet que tu cherchais, ou bien si cela ne marche pas.

Bonne soirée (:

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: retarder l'apparition d'une infobulle

Message par MlleAlys le Mar 14 Mai 2013 - 14:19

oui ça fonctionne, et je vais l'arranger à ma sauce pour avoir ce que je veux, merci beaucoup !! =D
(j'ai dû faire une erreur en essayant au dessus alors ><")

merci encore, je mets en résolu ! =D

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys 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