Tutorial : Création d'une Infobulle personalisable, multiligne pouvant inclure du PHP, de l'HTML, etc ... compatible IE / Mozilla FireFox
Niveau : Débutant ( Il n'y a que à replir les <div> )
Temps : Le temps de taper votre Texte![Wink Wink](https://jeuweb.org/images/smilies/wink.png)
Language : PHP, CSS, HTML
Démo : ici
Voila comment nous allons procéder :
Dans une première partie, nous allons définir le fichier style.css, qui définira l'aspect de votre infobulle.
Dans une seconde, nous allons creer le javascript pour déclencher l'infobulle.
Dans une troisième, nous créerons l'infobulle dans votre script PHP
¤ Fichier : style.css
Niveau : Débutant ( Il n'y a que à replir les <div> )
Temps : Le temps de taper votre Texte
![Wink Wink](https://jeuweb.org/images/smilies/wink.png)
Language : PHP, CSS, HTML
Démo : ici
Voila comment nous allons procéder :
Dans une première partie, nous allons définir le fichier style.css, qui définira l'aspect de votre infobulle.
Dans une seconde, nous allons creer le javascript pour déclencher l'infobulle.
Dans une troisième, nous créerons l'infobulle dans votre script PHP
¤ Fichier : style.css
Code PHP :
<?php
<style type="text/css">
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial; // Définissez ici la police de votre Infobulle
font-size: 10px; // Définissez ici la taille de votre Infobulle
background-color: #FFFFCC; //Si vous ne mettez pas de "fond d'écran dans votre infobulle, cela sera la couleur d'arrière plan
background-image: url(images/content_footer.jpg); //Vous pouvez ici définir une couleur d'arrière plan pour votre infobulle
width : 400px; // La largeur de votre infobulle
}
</style>
¤ Fichier : infobulle.js
Code PHP :
<?php
<script language="javascript" type="text/javascript">
<!--
var Mouse;
document.onmousemove = DoMouse;
function DoMouse(e) {
Mouse = (typeof e == 'undefined') ? window.event : e;
}
function montre(id) {
var Infobulle = document.getElementById('infobulle-'+id)
if(Infobulle) {
Infobulle.style.visibility = 'visible';
if(document.documentElement) {
Infobulle.style.left = Mouse.clientX + document.documentElement.scrollLeft + 20 + 'px';
Infobulle.style.top = Mouse.clientY + document.documentElement.scrollTop + 10 + 'px';
}
else {
Infobulle.style.left = Mouse.clientX + document.body.scrollLeft + 20 + 'px';
Infobulle.style.top = Mouse.clientY + document.body.scrollTop + 10 + 'px';
}
}
}
function cache(id) {
setTimeout('docache('+id+')', 3000); // Si vous désirez que votre infobulle reste affichée un certain moment ( ici, 3000 milliseconde, soit 3 secondes )
}
function docache(id) {
var Infobulle = document.getElementById('infobulle-'+id)
if(Infobulle) {
Infobulle.style.visibility = 'hidden';
}
}
//-->
</script>