19-04-2013, 17:16
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 :
Le HTML contient ceci :
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 :
Et la table sera maintenant enveloppée par ce code HTML :
<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.
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.