Header
Partagez | 

Faire des infobulles

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Faire des infobulles   Sam 21 Sep - 11:05

Il y a 2 types d'infobulles :
-> les infobulles "basiques" liées au navigateur, qu'on code en ajoutant simplement un attribut "title" à nos élements, par exemple /!\
Code:
<span title="warning">/!\</span>
ou encore
Code:
<img src="http://r15.imgfast.net/users/1512/42/25/33/smiles/314950.gif" title="c'mon image !" />
Idea survolez les 2 élements pour afficher l'infobulle ^^

-> les infobulles qu'on utilise pour présenter le staff par exemple. C'est ce second point que nous allons apprendre à faire dans ce tuto Smile

Préparons le terrain


Commençons par le html :)Le code va se présenter sous cette forme :

Code:
<a href="#" class="info_bulle">Survole-moi<span>Le contenu de mon infobulle</span></a>
Donc, en gros, on a un lien qui s'appelle "info_bulle", c'est lui qui va être l'élement déclancheur de notre bulle quand on le survolle. Celui-ci est représenté par le texte "Survole-moi" qui, quand on lui passera dessus, affichera tout le contenu du groupe "span".  

Pour le moment, ça ne ressemble pas à grand chose


On va donc nous attaquer au CSS de base pour y mettre de la forme Smile

1/ On va cacher le contenu de l'infobulle (autrement dit, le texte "le contenue de mon infobulle"). Pour cela on va utiliser la propriété css "display: none;" sur le groupe (span) du lien "info_bulle". Ce qui donnera ça :

Code:
.info_bulle span{
 display:none;
}

2/ Maintenant, on va faire en sorte que notre texte s'affiche quand on passe sur le "survole moi". On va donc indiquer le css qui doit être pris en compte quand on passe sur le lien info_bulle" (.info_bulle:hover) et qui doit s'appliquer sur le span de cette classe. Cette fois, pour l'afficher, on va utiliser "display: inline;"

Code:
.info_bulle:hover span{
 display:inline;
}

On embellit tout ça !


On continue donc. On va essayer de mettre un peu de forme la dedans Smile

Déjà, on va donner une taille (largeur et hauteur) à notre span, ainsi qu'une couleur de fond.

Code:
.info_bulle:hover span{
 display:inline;
 width:400px;
 height:200px;
 background-color:#b7abcb;
}
Et on va lui donner une position par rapport à notre lien. Tout d'abord, on doit lui indiquer que la position de la div va se faire en fonction de la position du lien "info_bulle". On va donc devoir indiquer 2 choses :

1/ On va se baser sur la position de "info_bulle". On va donc indiquer dans le css de cette classe : position:relative;

2/ Et on va imposer une position au span. Là on va indiquer "position:absolute".

Ce qui nous donne :

Code:
.info_bulle{
 position:relative;
 }

.info_bulle span{
 display:none;
}

.info_bulle:hover span{
 display:inline;
 width:400px;
 height:200px;
 background-color:#b7abcb;
 
position: absolute;

}
Maintenant on va placer notre infobulle en prenant en compte le haut et le bord gauche de l'infobulle (top et left).

Code:
.info_bulle:hover span{
 display:inline;
 width:400px;
 height:200px;
 background-color:#b7abcb;
 
position: absolute;
 top: 12px;
left: 8px;
}

Si vous regardez bien, le texte dans l'infobulle est considéré comme un lien. Pour régler ce problème, nous allons le mettre dans un tableau. Le html va donc ressembler à ça :

Code:
<a href="#" class="info_bulle">Survole-moi<span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle</td></tr></table></span></a>
Ensuite, il ne reste plus qu'à travailler un peu la mise en page pour avoir quelque chose de jolie Smile


html:
 

css:
 




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire des infobulles" tel que je l'ai rédigé.
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: Faire des infobulles   Sam 21 Sep - 11:07

Questions Fréquentes


Comment faire pour que l'infobulle soit au-dessus de toutes les images, et non pas "cachée" derrière les autres


Mewyn a écrit:
Il faut mettre
Code:
.infobulle span{
z-index:999; }
Dans le CSS Wink
Les z-index servent à savoir qui passe par-dessus qui, plus le nombre est grand, plus celui-ci passera au-dessus des autres
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: Faire des infobulles   Dim 3 Nov - 11:46

Les infobulles et les scrollbars


Quand on réalise une en-tête, on a parfois envie de mettre son staff dans un bloc avec un ascenseur. Le problème, c'est que si vous avez mis en place des infobulles sur ce bloc, celles-ci restent coincées dans l'ascenseur. Nous allons donc tenter de régler ce problème ensemble et à remplacer ceci :
Spoiler:
 
par ça
Spoiler:
 

Pour cela, nous allons avoir besoin d'un peu de javascript.

On va partir du principe que nous avons ce code de base :
-> CSS
Code:
/* Infobulle */

div#scrollbarContenu{
   width:300px;
   height:130px;
   margin:auto;
   border:1px solid #333333;
   background:#f3f3f3;
   overflow:auto;
   text-align:center;
}

.info_bulle{
   position:relative;
   text-decoration:none;
   font-variant:small-caps;
   color:#b3755a;
}

.info_bulle .avatar{
   width:50px;
   margin:5px;
}

.info_bulle:hover{
   color:#b3755a;
   border-bottom: 1px dotted #b3755a;
   letter-spacing:1px;
   font-weight:bold;
}

.info_bulle span{
   display:none;
   color:#2f2c2a;
   font-weight:normal;
   font-variant:normal;
   text-align:center;
   z-index:10;
}

.info_bulle:hover span{
   display:inline;
   width:400px;
   height:200px;
   background-color:#d3afa0;
   border:1px dashed #7d4c36;
   position: absolute;
   top: 12px;
   left: 8px;
}
-> html
Code:
<div id="scrollbarContenu">
   <a href="#" class="info_bulle"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #1" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #1 </td></tr></table></span></a>
   
   <a href="#" class="info_bulle"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #2" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #2</td></tr></table></span></a>
   
   <a href="#" class="info_bulle"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #3" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #3</td></tr></table></span></a>
   
   <a href="#" class="info_bulle"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #4" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #4</td></tr></table></span></a>
   
   <a href="#" class="info_bulle"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #5" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #5</td></tr></table></span></a>
</div>

Le HTML


Je ne reviendrai pas sur le code pour faire une infobulle, vous l'avez juste au dessus Smile Cependant, ici, on va devoir faire quelques ajustements ^^

Tout d'abord, on va sortir le contenu de chaque infobulle de l'infobulle elle-même et on va remplacer le "span" par une "div". Ce n'est pas clair, du coup, voici un exemple ^^
Code:
<a href="#" class="info_bulle"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #1" /></a>

<div><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle</td></tr></table></div>
On va ensuite donner un id unique à chaque infobulle
Code:
<a href="#" class="info_bulle" id="1"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #1" /></a>

<div><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #1</td></tr></table></div>
Puis, on va donner un nom de class au div qui contient le contenu de l'infobulle (on l'utilisera pour la mise en page) ainsi qu'un id qui contiendra le numéro de l'infobulle correspondante

Code:
<a href="#" class="info_bulle" id="1"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #1" /></a>

<div class="contenuIb" id="contenuInfobulle1"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #1</td></tr></table></div>
Enfin, on place cette div en dehors de la div ayant une scrollbar.
Code:
<div id="scrollbarContenu">
   <a href="#" class="info_bulle" id="1"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #1" /></a>
</div>

<!-- Contenu de mes infobulles -->
<div class="contenuIb" id="contenuInfobulle1"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #1 </td></tr></table></div>
<!-- /Contenu de mes infobulles -->
---------

On fait ceci pour toutes les infobulles.

Arrow Voici donc le code html final
Code:
<div id="scrollbarContenu">
   <a href="#" class="info_bulle" id="1"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #1" /></a>
   
   <a href="#" class="info_bulle" id="2"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #2" /></a>
   
   <a href="#" class="info_bulle" id="3"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #3" /></a>
   
   <a href="#" class="info_bulle" id="4"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #4" /></a>
   
   <a href="#" class="info_bulle" id="5"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/avamiettes_zps8e338a6f.png" class="avatar" alt="image de l'infobulle #5" /></a>
</div>

<!-- Contenu de mes infobulles -->
<div class="contenuIb" id="contenuInfobulle1"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #1 </td></tr></table></div>

<div class="contenuIb" id="contenuInfobulle2"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #2 </td></tr></table></div>

<div class="contenuIb" id="contenuInfobulle3"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #3 </td></tr></table></div>

<div class="contenuIb" id="contenuInfobulle4"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #4 </td></tr></table></div>

<div class="contenuIb" id="contenuInfobulle5"><table cellspacing="1" cellpadding="1" border="0"><tr><td>Le contenu de mon infobulle #5 </td></tr></table></div>

<!-- /Contenu de mes infobulles -->

La CSS


On va maintenant s'attaquer à la CSS. Il y a des éléments de notre ancien CSS qui ne font plus être utile. On va donc pouvoir supprimer :
Code:

.info_bulle:hover{
   color:#b3755a;
   border-bottom: 1px dotted #b3755a;
   letter-spacing:1px;
   font-weight:bold;
}

.info_bulle span{
   display:none;
   color:#2f2c2a;
   font-weight:normal;
   font-variant:normal;
   text-align:center;
   z-index:10;
}

.info_bulle:hover span{
   display:inline;
   width:400px;
   height:200px;
   background-color:#d3afa0;
   border:1px dashed #7d4c36;
   position: absolute;
   top: 12px;
   left: 8px;
}
Evidemment, si on laisse comme ça, plus rien ne fonctionne et on voit le contenu des infobulles. On va donc régler ça en ajoutant un peu de style à nos blocs "contenuIb" et au tableau qu'il contient.
Code:
.contenuIb{
   display:none;
   position:absolute;
   z-index:3;
}

.contenuIb > table{
   width:400px;
   height:200px;
   background:#d3afa0;
   border:1px dashed #7d4c36;
}
Essayons de comprendre un peu.
-> pour le "contenuIb" : on le masque pour le moment. On lui indique aussi que sa position sera en absolue par rapport aux infobulles qui elles sont en relatives. On lui dit aussi que ce bloc se place sur une couche "3" (z-index). Par défaut, tous les éléments d'une page html sont sur une couche 0. Là on place volontairement ce bloc au dessus des autres (pour éviter que le contenu de l'infobulle passe sous l'image de celle-ci par exemple).

-> pour le tableau de "contenuIb". Tout d'abord, ceci
Code:
.contenuIb > table
signifie : le tableau qui suit directement la div ayant pour class "contenuIb". Si vous mettez quelques choses entre les 2, le style ne sera pas pris en compte.
Pour le style de cette partie, rien de compliquer : une largeur, une hauteur, une couleur de fond et une bordure.

Arrow Voici donc la CSS finale
Code:
/* Infobulle */

div#scrollbarContenu{
   width:300px;
   height:130px;
   margin:auto;
   border:1px solid #333333;
   background:#f3f3f3;
   overflow:auto;
   text-align:center;
}

.info_bulle{
   position:relative;
   text-decoration:none;
   font-variant:small-caps;
   color:#b3755a;
}

.info_bulle .avatar{
   width:50px;
   margin:5px;
}

.contenuIb{
   display:none;
   position:absolute;
   z-index:3;
}

.contenuIb > table{
   width:400px;
   height:200px;
   background:#d3afa0;
   border:1px dashed #7d4c36;
}

Le javascript


On passe maintenant au js Smile

Première étape : appeler la bibliothèque jQuery. En gros, c'est une sorte d'"ouvrage" qui contient des fonctions prédéfinies que l'on peut utiliser dans nos pages, comme par exemple des animations, comment récupérer des infos, etc... Pour cela, on va ajouter avant
Code:
</head>
la ligne suivante
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
Idea Si vous faites cette manip' sur vos forums, il est probable que la bibliothèque soit déjà appelée. Ne le refaîtes donc pas.

On va maintenant créer notre script Smile

Pour cet exemple, je vais tout mettre sur une page html. Du coup, on va commencer par dire à celle-ci : attention, je vais te donner du javascript
Code:
<script type="text/javascript" >
/* Notre code sera ici */
</script>
et on place ce code juste après l'appel de la bibliothèque.

Idea Pour les utilisateurs de FA, le script sera à placer dans les pages javascript sans ce morceau de code
Code:
<script type="text/javascript" >
/* Notre code sera ici */
</script>
Ensuite, on va dire que notre js s'applique une fois notre page chargée
Code:
<script type="text/javascript" >
   $(document).ready(function(){
      /* Notre code sera ici */
   });
</script>
##########

Avant d'aller plus loin, on va clairement définir ce qu'on veut :
-> On va survoler l'infobulle. Si on traduit en js, cela nous donne
Code:
$('.info_bulle').hover()
-> Quand on le fera, on devra récupérer son id pour savoir quel contenu afficher. On va donc stocker cette info dans une variable (c'est une sorte de "case mémoire" ^^)
Code:
var idIB = $(this).attr('id');
Remarques
this = l'infobulle que l'on survole
attr = attribut
Arrow en js on lit souvent à l'envers ^^ du coup, ça nous fait "on récupére l'attribut id de notre élément (this)"


On continue en récupérant d'autres infos de notre bloc "infobulle". On va donc récupérer sa position, en utilisant une fonction présente dans la bibliothèque jQuery et on stocke ça dans une nouvelle variable.
Code:
var ibPosition = $(this).position();
Grâce à ça, on va mettre dans 2 variables différentes la position horizontale (par rapport au bloc gauche) et la position verticale (par rapport au haut)
Code:
var posX = ibPosition.left ;
var posY = ibPosition.top ;   
##########

On a déjà pas mal d'infos utiles pour la suite. Maintenant, on va avoir 2 cas de figure :
-> soit l'infobulle est déjà visible
-> soit, elle n'est pas visible et dans ce cas, on va l'afficher.

Pour cela, on va devoir initialiser une variable concernant l'affichage avant la fonction "je survole l'infobulle". On aura donc dans le js :
Code:

<script type="text/javascript" >
  $(document).ready(function(){
      var ibHide = 0; /* Variable concernant l'affichage de l'infobulle */
      
      $('.info_bulle').hover(function(){ /* Quand je survole l'infobulle */
         var idIB = $(this).attr('id'); /* Je récupére l'id de l'infobulle */
         var ibPosition = $(this).position(); /* Je récupére la position de l'infobulle */
         var posX = ibPosition.left + 10 ;  /* Je stocke  la position horizontale de l'infobulle */
         var posY = ibPosition.top ;   /* Je stocke  la position verticale de l'infobulle */
         
         /* Mon code sera ici */
      });
  });
</script>
Remarque
En js, les commentaires s'écrivent de la même façon qu'en css, c'est à dire
Code:
/* Commentaires */


On va ensuite ajouter un test :
-> si l'infobulle est masquée
Code:
if (ibHide == 0)
-> ou, si elle est affichée
Code:
else
Ce qui donne dans notre code
Code:
<script type="text/javascript" >
  $(document).ready(function(){
      var ibHide = 0; /* Variable concernant l'affichage de l'infobulle */
      
      $('.info_bulle').hover(function(){ /* Quand je survole l'infobulle */
         var idIB = $(this).attr('id'); /* Je récupére l'id de l'infobulle */
         var ibPosition = $(this).position(); /* Je récupére la position de l'infobulle */
         var posX = ibPosition.left + 10 ;  /* Je stocke  la position horizontale de l'infobulle */
         var posY = ibPosition.top ;   /* Je stocke  la position verticale de l'infobulle */
         
         if (ibHide == 0){ /* Si l'infobulle est masquée */
            /* Mon code sera ici */
         }else{ /* Si l'infobulle est affichée */
            /* Mon code sera ici */
         }
      });
  });
</script>
Grâce à ces 2 tests, nous allons pourvoir gérer la partie "j'affiche ou non l'infobulle". Dans le cas où on l'affiche, c'est à dire si on survole .info_bulle et que l'infobulle est masquée, dans ce cas on va indiquer au contenu ayant pour id "contenuInfobulle + le numéro de l'infobulle à afficher" :
-> un display block
-> une position top par rapport à la souris
-> une position left par rapport à la souris
Code:
$('#ib'+idIB+'').css({display: 'block' , top: ''+posY+'px', left : ''+posX+'px'});
et on place la variable concernant l'affichage de l'infobulle à 1 car celle-ci est affichée
Code:
ibHide = 1; /* Je change la variable pour signaler que l'infobulle est affichée */
ça nous donne donc pour le moment :
Code:
<script type="text/javascript" >
$(document).ready(function(){
   var ibHide = 0; /* Variable concernant l'affichage de l'infobulle */
      
   $('.info_bulle').hover(function(){ /* Quand je survole l'infobulle */
      var idIB = $(this).attr('id'); /* Je récupére l'id de l'infobulle */
      var ibPosition = $(this).position(); /* Je récupére la position de l'infobulle */
      var posX = ibPosition.left + 10 ;  /* Je stocke  la position horizontale de l'infobulle */
      var posY = ibPosition.top ;   /* Je stocke  la position verticale de l'infobulle */
      if (ibHide == 0){ /* Si l'infobulle est masquée */
         $('#contenuInfobulle'+idIB+'').css({display: 'block' , top: ''+posY+'px', left : ''+posX+'px'});
         ibHide = 1; /* Je change la variable pour signaler que l'infobulle est affichée */
      }else{ /* Si l'infobulle est affichée */
         /* Un code sera ici */
      }
   });
   
});
</script>
Pour finir, il nous reste à gérer le cas : "je vais masquer l'infobulle". Pour cela, on va juste donner un display none au contenu ayant pour id "contenuInfobulle + le numéro de l'infobulle à afficher"
Code:
$('#ib'+idIB+'').css('display', 'none');
et on replace la variable concernant l'affichage de l'infobulle à 0.
Code:
ibHide = 0; /* Je change la variable pour signaler que l'infobulle est masquée */
Arrow Au final, on a donc tout ce js
Code:
<script type="text/javascript" >
$(document).ready(function(){
   var ibHide = 0; /* Variable concernant l'affichage de l'infobulle */
      
   $('.info_bulle').hover(function(){ /* Quand je survole l'infobulle */
      var idIB = $(this).attr('id'); /* Je récupére l'id de l'infobulle */
      var ibPosition = $(this).position(); /* Je récupére la position de l'infobulle */
      var posX = ibPosition.left + 10 ;  /* Je stocke  la position horizontale de l'infobulle */
      var posY = ibPosition.top ;   /* Je stocke  la position verticale de l'infobulle */
      if (ibHide == 0){ /* Si l'infobulle est masquée */
         $('#contenuInfobulle'+idIB+'').css({display: 'block' , top: ''+posY+'px', left : ''+posX+'px'});
         ibHide = 1; /* Je change la variable pour signaler que l'infobulle est affichée */
      }else{ /* Si l'infobulle est affichée */
         $('#contenuInfobulle'+idIB+'').css('display', 'none');
         ibHide = 0; /* Je change la variable pour signaler que l'infobulle est masquée */
      }
   });
   
});
</script>
Revenir en haut Aller en bas
Faire des infobulles
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+