salut
j'avais écris un tuto j'espère que ca pourra t'aider :
Tout d'abord on va insérer dans la balise <HEAD></HEAD> le code CSS permettant de donner un style facilement éditable à notre infobulle.
Code : CSS
<style type="text/css">
#infobulle{
position: absolute;
visibility : hidden;
border: 1px solid #CCCCCC;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #333333;
}
</style>
On a donc tout simplement un code css permettant une personnalisation de notre infobulle.
Il ne faut pas toucher aux propriétés "position" et "visibility", le reste est à personnaliser à votre guise et vous pouvez même rajouter des propriétés si ca vous chante...
On passe ensuite au script javascript que l'on insert toujours dans la balise <HEAD></HEAD> :
Code : JavaScript
<script type="text/javascript">
// espacement entre le curseur et l'infobulle
cursor_padding = 5;
// gestion des navigateurs (IE, MOZ, NS)
nav = navigator.appName;
ie = document.all;
ns = document.layers;
fi = document.getElementById && !document.all;
if(!ie && !ns && !fi){
alert("navigateur "+nav+" incompatible !");
}
if(!ie){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = get_mouse;
// recupere les coordonnees de la souris
// les affecte au style de la div infobulle pour qu'elle suive les déplacements
function get_mouse(e){
if(ie){
x = event.x;
y = event.y;
window.status = x;
}else{
x = e.pageX;
y = e.pageY;
}
bubble = document.getElementById("infobulle");
bubble.style.left = x + cursor_padding;
bubble.style.top = y + cursor_padding;
}
// affiche la bulle
function see_bubble(text){
bubble.style.visibility = "visible";
bubble.style.display = "block";
// bubble.innerHTML = text;
// déconseillé pas aux normes
longueur_bubble = bubble.firstChild.length;
bubble.firstChild.replaceData(0, longueur_bubble, text);
}
// cache la bubble
function kill_bubble(){
bubble.style.visibility = "hidden";
bubble.style.display = "none";
}
</script>
Là je pense que tout est expliqué, en gros on créé des fonctions que l'on va utiliser pour afficher ou masquer notre infobulle.
La partie la plus intéressante est la suivante :
On va afficher notre infobulle! Tout d'abord pour commencer on va afficher dedans du texte statique. Dans la balise <BODY></BODY> on insert à l'endroit voulu le code suivant :
Code : HTML
<div id="infobulle">bubble</div>
<div>
<a href="#" onmouseover="javascript:see_bubble('Voici une zolie infobulle!!!');" onmouseout="javascript:kill_bubble();">Afficher l'infobulle</a>
</div>
Ce que vous pouvez modifier :
- le texte 'voici une zolie infobulle' (sans supprimer les apostrophes!!!) pour le remplacer par le texte de votre choix du style 'Cliquez ici pour commenter la news'
- le texte Afficher l'infobulle pas n'importe quel texte voir meme une image en y insérant la balise <img src="votre_image.gif">
- NE TOUCHE PAS AU RESTE SI VOUS NE CONNAISSEZ PAS JAVASCRIPT!!! Je décline toute responsabilité ;)
On a donc une jolie infobulle qui s'affiche (vous pourrez tester) dans tous les navigateurs. On retrouve beaucoup d'infobulles sur le net mais c'est la première que je rencontre qui est très compatible et personnalisable mais surtout qui permet d'insérer ... du PHP!!
Eh oui je vois déjà vos yeux qui brillent et vous pensez déjà à MySQL et vous avez bien raison! Je ne vais pas vous apprendre comment créer une requête vers la base de données ou comment afficher une image dynamiquement dans l'infobulle, ce n'est pas le but de ce tuto mais je vais vous aider un ptit peu.
On a dit que l'on pouvait modifier le texte 'Voici une zolie infobulle' qui est le texte de l'infobulle. on va donc le remplacer par Code : PHP
'<?php echo "Bonjour"; ?>'
Vous l'aurez compris l'infobulle va afficher Bonjour. A vous d'imaginer d'y afficher ce que vous voulez maintenant que vous avez l'astuce ^^
Une infobulle dynamique
Qui n'a jamais cherché à créer une infobulle personnalisable mais surtout dans laqualle on peut afficher divers infos voir même du PHP
Voici le code complet :
Code : HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Infobulle</title>
<style type="text/css">
#infobulle{
position: absolute;
visibility : hidden;
border: 1px solid #CCCCCC;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #333333;
}
</style>
<script type="text/javascript">
// espacement entre le curseur et l'infobulle
cursor_padding = 5;
// gestion des navigateurs (IE, MOZ, NS)
nav = navigator.appName;
ie = document.all;
ns = document.layers;
fi = document.getElementById && !document.all;
if(!ie && !ns && !fi){
alert("navigateur "+nav+" incompatible !");
}
if(!ie){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = get_mouse;
// recupere les coordonnees de la souris
// les affecte au style de la div infobulle
function get_mouse(e){
if(ie){
x = event.x;
y = event.y;
window.status = x;
}else{
x = e.pageX;
y = e.pageY;
}
bubble = document.getElementById("infobulle");
bubble.style.left = x + cursor_padding;
bubble.style.top = y + cursor_padding;
}
// affiche la bubble
function see_bubble(text){
bubble.style.visibility = "visible";
bubble.style.display = "block";
// bubble.innerHTML = text;
// déconseillé pas aux normes
longueur_bubble = bubble.firstChild.length;
bubble.firstChild.replaceData(0, longueur_bubble, text);
}
// cache la bubble
function kill_bubble(){
bubble.style.visibility = "hidden";
bubble.style.display = "none";
}
</script>
</head>
<body>
<div id="infobulle">bubble</div>
<div>
<a href="#" onmouseover="javascript:see_bubble('Voici une infobulle');" onmouseout="javascript:kill_bubble();">Chatouillez moi!</a>
</div>
</body>
</html>
J'espère que ce tuto vous aura plus. J'ai décidé de vous le faire partager car celà fesait plusieurs semaines que je cherchais un tel script et comme qui dirait moi, le savoir n'est aquis que lorsqu'il est partagé! :D
tu peux mettre une image si tu veux à la place du texte.
A plus
all html : Le portail des webmaster
Message publié le jeudi 27 avril 2006 à 19 h 28 par bigbossloic. 
Message publié le jeudi 27 avril 2006 à 20 h 02 par zycra. 
Message publié le samedi 29 avril 2006 à 08 h 46 par celestene. 
Message publié le mercredi 30 avril 2008 à 12 h 44 par Crabman.