Infobulle avec active

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

Résolu Infobulle avec active

Message par Eiffel01 Mer 4 Nov 2015 - 16:19

Bonjour,
Je souhaiterais que mon infobulle reste à l'écran quand on lui clique dessus et qu'il faut recliquer pour qu'elle disparaisse. J'ai essayé (voici mon test code) mais sans succès :
code CSS :
Code:
  a.espace-personnel { position:relative; color:#000; text-decoration:none;  }
  a.espace-personnel:active { z-index:25; transition-duration: 2s  }
  a.espace-personnel span { display: none; }
  a.espace-personnel:active span { display:block; z-index: 23; position:absolute; top:99%; left:-10% ; width: 112%;
  border: 1px solid rgb(190,190,190); background: rgb(237,237,237);  color:#000; text-align: justify;
  font-weight:none;  padding:5px;  }

HTML :
Code:
<a class="espace-personnel">Espace personnel
            <span>Cette infobulle ne marche pas</span></a>

Quelqu'un peut-il m'aider ?
Cordialement


Dernière édition par Eiffel01 le Sam 7 Nov 2015 - 21:55, édité 1 fois
Eiffel01

Eiffel01
***

Masculin
Messages : 198
Inscrit(e) le : 10/03/2014

http://maths-laboisse.forumactif.org
Eiffel01 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec active

Message par Invité Mer 4 Nov 2015 - 17:28

Salut Eiffel01 ,

en supprimant des éléments inutiles et en laissant l'essentiel puis on passe par un Javascript :

Ta c.s.s essentielle:
Code:

a.espace-personnel {cursor:pointer; position:relative; color:#000; text-decoration:none;  }
a.espace-personnel span { display:none; z-index: 23; position:absolute; top:99%; left:-10% ; width: 112%;
          border: 1px solid rgb(190,190,190); background: rgb(237,237,237);  color:#000; text-align: justify;
          font-weight:none;  padding:5px;  }


Ton code html modifié:
Code:
   
<a class="espace-personnel"><span>Cette infobulle ne marche pas</span>Espace personnel</a>

Puis le script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coche l'endroit ou doit agir le script.

Déposes ceci:
Code:

$(function(){
$('.espace-personnel').click(function(){
$(this).find('span').fadeToggle();
});});


Penses à cliquer sur le boutonInfobulle avec active Boutonvalider

a++
Anonymous

Invité
Invité


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

Résolu Re: Infobulle avec active

Message par Eiffel01 Sam 7 Nov 2015 - 14:28

Vous êtes magnifique Very Happy

Merci beaucoup, pouvez-vous m'expliquer rapidement la partie Javascript ?
Bonne journée

Eiffel01

Eiffel01
***

Masculin
Messages : 198
Inscrit(e) le : 10/03/2014

http://maths-laboisse.forumactif.org
Eiffel01 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec active

Message par Invité Sam 7 Nov 2015 - 19:12

Salut Eiffel01,

je vais tâcher d'être le plus clair possible Very Happy .

Ton code html:
Code:

<a class="espace-personnel">
<span>Cette infobulle ne marche pas</span>
Espace personnel</a>

Le script:
Code:
       
$(function(){
$('.espace-personnel').click(function(){
 $(this).find('span').fadeToggle();
});});
       

La class
Code:
('.espace-personnel')
qui au click
Code:
.click(function()
puis a partir d'elle
Code:
(this)
recherche la suite:
Code:
.find
le span
Code:
('span')
puis on affiche ou on cache avec transition:
Code:
.fadeToggle();

Est ce suffisant car on se comprend toujours mais quand il faut le l'expliquer c'est autre chose Very Happy .

Exemple avec un autre code html

Code:

<a class="afficher">
<span>Infobulle jQuery</span>
Espace personnel</a>

Le script sera alors:
Code:
       
$(function(){
$('.afficher).click(function(){
 $(this).find('span').fadeToggle();
});});
       


a++




Anonymous

Invité
Invité


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

Résolu Re: Infobulle avec active

Message par Eiffel01 Sam 7 Nov 2015 - 21:54

Merci beaucoup pour ces renseignements qui me serviront une prochaine fois, j'en suis sûr !
Vous avez été très clair.

Bonne journée et encore merci
Eiffel01

Eiffel01
***

Masculin
Messages : 198
Inscrit(e) le : 10/03/2014

http://maths-laboisse.forumactif.org
Eiffel01 a été remercié(e) par l'auteur de ce sujet.

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