1. IMPORTANT : Nouvelles mesures de sécurité - 2. Règles pour obtenir de l'aide dans les forums de support - 3. Restrictions des droits pour le groupe "Support suspendu"

Il est obligatoire de respecter les Règles de MyBB.fr : Version abrégée ou Version complète pour obtenir du support sur nos forums.

Les membres ayant un site/forum contrevenant aux règles de MyBB.support seront placés dans le groupe "Support suspendu" et ne bénéficieront plus du support du staff. Nous recommandons aux autres membres d'agir de même. Il ne s'agit pas d'un bannissement, le membre retrouvera son statut "normal" dès que sa situation sera conforme aux règles.

Nouveau : un Wiki en français : plus de détails.
Avant de soumettre votre problème, consultez-le, ainsi que la FAQ, sans oublier le moteur de recherche interne.


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Comment faire apparaître des bulles de texte au survol de la souris.
Tags » faire, apparaître, bulles, texte, survol, souris
19-04-2013, 17:16, (This post was last modified: 19-04-2013, 18:16 by exdiogene.)
#1
Comment faire apparaître des bulles de texte au survol de la souris.
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 :


PHP Code:
.table_bulle{
  
background-color transparent;
  
padding:0;
  
margin:0;
  
spacing:0;
  
bordernone;
}
.
table_bulle_dessus_gauche{
  
background transparent url(Bulle.gifno-repeat left top;
  
padding-top32px;
  
padding-left32px;
  
padding-bottom8px;
  
font-weightbold;
}
.
table_bulle_dessus_droit{
  
backgroundtransparent url(Bulle.gifno-repeat right top;
  
width40px;
}
.
table_bulle_centre_gauche{
  
background transparent url(BulleCentre.gifleft top;
  
padding-left32px;
  
color:#0000ff;
}
.
table_bulle_centre_droit{
  
background transparent url(BulleCentre.gifright top;
  
width40px;
}
.
table_bulle_dessous_gauche{
  
background transparent url(Bulle.gifno-repeat left bottom;
  
height 48px;
}
.
table_bubble_dessous_droit{
  
backgroundtransparent url(Bulle.gifno-repeat right bottom;
  
width40px;


Le HTML contient ceci :

PHP Code:
<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 :

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

a.info div{displaynone}

a.info:hover div
{
    
display:block;
    
position:absolute;
    
top:16pxleft:16pxwidth:640px;
    
border:1px solid #0cf;
    
background-color:#ba8; color:#000;
    
padding2px;


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

PHP Code:
<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.

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Reply
19-04-2013, 18:25,
#2
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Un grand merci à toi Exdiogene Big Grin
Je vais tester de ce pas Smile

[Image: banniere.png]
Reply
19-04-2013, 18:30,
#3
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Moi ce n'est pas vraiment sa que je cherche, cette technique sert a mettre la bulle sur du texte voulus, ce que j'aimerais c'est changé toutes les bulles ou elles sont déja, en gros changé sont apparence, comme par exemple ici :

[Image: lNxY]

Et changé la bulle noir en une autre, et ceci pour tous ce qui à une description et qui ouvre une bulle au survol de la souris Wink
Reply
19-04-2013, 18:37,
#4
RE: Comment faire apparaître des bulles de texte au survol de la souris.
@TheDiamant953 :
Je tiens à mentionner que les intitulés "title" (tooltip) sont contrôlés par le navigateur lui-même, il est donc impossible de les modifier avec du CSS. Il faut donc faire appel soit à du Javascript ou à une méthode comme la mienne pour obtenir de tels résultats.

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Reply
19-04-2013, 18:43,
#5
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Je ne comprend pas comment "envelopper" tout le code, voici mon code :
Code:
<a class="info" href="javascript:void(0);"><div>Mybb</a>
<table class="table_bulle" cellpadding="0" cellspacing="0">
<tr>
  <td class="table_bulle_dessus_gauche">Mybb</td>
  <td  class="table_bulle_dessus_droit"></td>
</tr>
<tr>
  <td  class="table_bulle_centre_gauche">
   Nous tournons sur le moteur MyBB
  </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>
</div>

[Image: banniere.png]
Reply
19-04-2013, 18:52,
#6
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Ce serait plutot :
Code:
<a class="info" href="javascript:void(0);"><div>
<table class="table_bulle" cellpadding="0" cellspacing="0">
<tr>
  <td class="table_bulle_dessus_gauche">Mybb</td>
  <td  class="table_bulle_dessus_droit"></td>
</tr>
<tr>
  <td  class="table_bulle_centre_gauche">
   Nous tournons sur le moteur MyBB
  </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>
</div>Mybb</a>

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Reply
19-04-2013, 19:03,
#7
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Sa ne fonctionne pas :
http://puu.sh/2D4FT.png
la bulle reste activer !

[Image: banniere.png]
Reply
19-04-2013, 19:11,
#8
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Est-ce que les deux sections de code CSS ont été copiées dans le style du thème?

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Reply
19-04-2013, 19:26,
#9
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Oui Smile

[Image: banniere.png]
Reply
19-04-2013, 19:28,
#10
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Il me faut le lien URL du forum afin de visualiser le code...

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Reply
19-04-2013, 20:33,
#11
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Suite à l'obtention de l'URL dans une autre discussion et la réinstallation du copyright de MyBB dans le pied de page, je vais mentionné qu'il manque une partie du code CSS dans le style. Il n'y a que la première moitié de la deuxième section CSS qui est copiée, la partie invisible du bas de la fenêtre est manquante.

Voici la partie manquante sur le site :
PHP Code:
a.info div{displaynone}

a.info:hover div
{
    
display:block;
    
position:absolute;
    
top:16pxleft:16pxwidth:640px;
    
border:1px solid #0cf;
    
background-color:#ba8; color:#000;
    
padding2px;


Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Reply
19-04-2013, 20:41,
#12
RE: Comment faire apparaître des bulles de texte au survol de la souris.
Ok merci,
je le mettrais plus tard Big Grin
Pour l'instant j'essaye de savoir comment faire pour mon problème que je viens de poster précédemment ^^

[Image: banniere.png]
Reply




Users browsing this thread: 1 Guest(s)

Contact Us | MyBB.support | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication
 Translation utility provided by Regentronique