Comment faire apparaître des bulles de texte au survol de la souris.

[exdiogene]

Ce tutoriel vous démontrera comment il est facile d'afficher des bulles de texte.

La méthode utilisée est une table avec différent arrière plan CSS et utilisant seulement 2 images. Voici un exemple de ce que vous pouvez faire pour afficher votre texte :

<iframe src="Tutoriels/Bulle.html" width="716" height="360"></iframe>

Voici les 2 images utilisée pour cet exemple :

<div style="background-color:#806000;width:700px; padding:8px;"><img src="Tutoriels/Bulle.gif" width="700">

<img src="Tutoriels/BulleCentre.gif" width="700"></div>

Le CSS contient ceci :

Code PHP :

.table_bulle{
  background-color : transparent;
  padding:0;
  margin:0;
  spacing:0;
  border: none;
}
.table_bulle_dessus_gauche{
  background : transparent url(Bulle.gif) no-repeat left top;
  padding-top: 32px;
  padding-left: 32px;
  padding-bottom: 8px;
  font-weight: bold;
}
.table_bulle_dessus_droit{
  background: transparent url(Bulle.gif) no-repeat right top;
  width: 40px;
}
.table_bulle_centre_gauche{
  background : transparent url(BulleCentre.gif) left top;
  padding-left: 32px;
  color:#0000ff;
}
.table_bulle_centre_droit{
  background : transparent url(BulleCentre.gif) right top;
  width: 40px;
}
.table_bulle_dessous_gauche{
  background : transparent url(Bulle.gif) no-repeat left bottom;
  height : 48px;
}
.table_bubble_dessous_droit{
  background: transparent url(Bulle.gif) no-repeat right bottom;
  width: 40px;
} 


Le HTML contient ceci :

Code PHP :

<table class="table_bulle" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bulle_dessus_gauche">Exemple bulle de texte #1</td>
  <td  class="table_bulle_dessus_droit"></td>
 </tr>
 <tr>
  <td  class="table_bulle_centre_gauche">
   Vous pouvez avoir une longue ligne de texte affichée sans interruption...
  </td>
  <td class="table_bulle_centre_droit"></td>
 </tr>
 <tr>
  <td class="table_bulle_dessous_gauche"></td>
  <td class="table_bulle_dessous_droit"></td>
 </tr>
</table>
<table class="table_bulle" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bulle_dessus_gauche">Exemple bulle de texte #2</td>
  <td  class="table_bulle_dessus_droit"></td>
 </tr>
 <tr>
  <td  class="table_bulle_centre_gauche">
  Ou vous pouvez<br / >
  avoir de multiples<br / >
  lignes les unes <br / >
  sur les autres...
  </td>
  <td class="table_bulle_centre_droit"></td>
 </tr>
 <tr>
  <td class="table_bulle_dessous_gauche"></td>
  <td class="table_bulle_dessous_droit"></td>
 </tr>
</table> 


Comme vous pouvez avoir remarqué il c'était assez simple simple à faire, le truc n'était que l'utilisation d'une table avec 2 colonnes et 3 rangées!

Maintenant, comment faire apparaître cette bulle par le survol de la souris...

Il faut simplement un peu plus de CSS et deux balises supplémentaires :

Voici le CSS à ajouter :

Code PHP :

a.info
{
    position:relative;
    z-index:24;
    border:none;
    color:#000;
    cursor: pointer;
    text-decoration : none;
}
a.info:hover {z-index:25; border:#fd0 1px solid}

a.info div{display: none}

a.info:hover div
{
    display:block;
    position:absolute;
    top:16px; left:16px; width:640px;
    border:1px solid #0cf;
    background-color:#ba8; color:#000;
    padding: 2px;
} 


Et la table sera maintenant enveloppée par ce code HTML :

Code PHP :

<a class="info" href="javascript:void(0);"><div>
... Contenu de la Bulle ici ...
</div>
.. contenu du texte ou la souris survolera pour faire apparaître la bulle...
</a> 


<iframe src="Tutoriels/Bulle2.html" width="716" height="240"></iframe>

Voilà maintenant la fin de ce tutoriel, avec un exemple de la bulle qui surgit lorsque vous passerez votre souris sur le texte dans la boîte ci-dessus.