Forum d'entraide PHPFrance

Bonjour je cherche à faire des infobulles sur mon site internet ...
Je ne trouve pas d'exemple simple a faire ...

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Si c'est d'une infobulle toute simple dont tu as besoin, l'attribut title des balises html peut peut être répondre à ton besoin.

Si tu veux y mettre un peu d'html, il existe des solutions assez simple en css ou en javascript... après tout dépend de ton besoin

Je n'est pas de besoin spécifique je chercher des idées pour créer une aide contextuelle simple ...
Mais les solutions Javascript me semble les plus efficace

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Modération :
Afin d'obtenir plus de réponses, le sujet est déplacé dans le forum "Javascript, AJAX".

Et tu n'as rien trouvé qui te convienne en cherchant "infobulles javascript" sur un moteur de recherche ? Ce ne sont pourtant pas les tutos ou les scripts qui manquent

Alors si maintenant une fois dirigé sur le js j'ai trouvé des exemples avec des span qui sont parfait .

Code : Tout sélectionner

<script type="text/javascript">
<!--/*--><![CDATA[//><!--

window.onload = document.write("<span id='infobulle' style='position:absolute;visibility:hidden;padding:3px;'>&nbsp;</span>");

function infobulle(corps,event){
	var couleur_fond = 'white';
	var couleur_texte = 'black';
	var couleur_bordure = 'gray';
	var type_bordure = 'solid'; //(solid dashed dotted double)
	var taille_bordure = '1px'; //px
	
	document.getElementById('infobulle').style.color = couleur_texte;
	document.getElementById('infobulle').style.backgroundColor = couleur_fond;
	document.getElementById('infobulle').style.borderColor = couleur_bordure;
	document.getElementById('infobulle').style.borderStyle = type_bordure;
	document.getElementById('infobulle').style.borderWidth = taille_bordure;
	document.getElementById('infobulle').innerHTML = corps;
	document.getElementById('infobulle').style.visibility = 'visible';
	document.getElementById('infobulle').style.left = event.clientX+10+"px";
	document.getElementById('infobulle').style.top = event.clientY+20+"px";
}

function infobulle_cache(){
	document.getElementById('infobulle').style.visibility = 'hidden';
}

//--><!]]>
</script>

<a href="#" onmousemove="javascript:infobulle('Mon aide',event);" onmouseout="javascript:infobulle_cache();">Bidule</a>

[/code]

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

On peux reprendre le même principe en respectant le DOM - innerHtml ne fait pas partie des spécifications du DOM - et sans utiliser document.write() inutile dans ce contexte. Ce qui pourrait donner :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
function infobulle(texte,event){
   
   if (this.conteneur = document.getElementById('infobulle'))
   {
   var texte = document.createTextNode(texte);
   
   if (this.noeud) this.conteneur.removeChild(this.noeud);        
   this.noeud = this.conteneur.appendChild(texte);  
   
   this.conteneur.style.visibility = 'visible';
   this.conteneur.style.left = event.clientX+10+"px";
   this.conteneur.style.top = event.clientY+20+"px";
   }
}

function infobulle_cache(){
	if (this.conteneur = document.getElementById('infobulle'))
   	this.conteneur.style.visibility = 'hidden';
}
//--><!]]>
</script>

<style  type="text/css">
#infobulle {
position: absolute;
visibility: hidden;
padding: 3px;
color: black;
background: white;
border: 1px solid gray;
}
</style>
</head>

<body>
<div>
<span id = "infobulle"></span>
<a href="#" onmousemove="infobulle('Aide Bidule',event);" onmouseout="infobulle_cache();">Bidule</a> 
<a href="#" onmousemove="infobulle('Aide Bobole',event);" onmouseout="infobulle_cache();">Bobole</a> 
</div>
</body>
</html>

Tu as un script tout fait, personnalisable (en css ou js) qui s'appelle Boxover.

Tu as un script tout fait, personnalisable (en css ou js) qui s'appelle Boxover.

Oui j'ai jeter un coup d'oeuil ça l'air pas mal du tout ...

Autre petite question quelqu'un à une idée pour mettre une image dans mes infobulles ? (du genre mini capture d'écran etc ...)

En reprenant le principe du code que j'ai donné plus haut, et pour continuer à te montrer la création d'éléments avec le DOM, on peut faire par exemple :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--

function infobulle_img(image,event){
   
   if (this.conteneur = document.getElementById('infobulle_image'))
  {
	this.s_content = document.createElement("img");	
	this.s_content.setAttribute("src", image);	 
	this.s_content.setAttribute("alt", '');	 
	   
	if (this.noeud_img) this.conteneur.removeChild(this.noeud_img);        
	this.noeud_img = this.conteneur.appendChild(this.s_content);  
   
	this.conteneur.style.visibility = 'visible';
	this.conteneur.style.left = event.clientX+10+"px";
	this.conteneur.style.top = event.clientY+20+"px";
  }
}


function infobulle_img_cache(){
	if (this.conteneur = document.getElementById('infobulle_image'))
   	this.conteneur.style.visibility = 'hidden';
}


</script>

<style  type="text/css">
#infobulle_image {
position: absolute;
visibility: hidden;
}
#infobulle_image img{
border: 1px solid gray;
}
</style>
</head>

<body>
<div>

<span id = "infobulle_image"></span>
<a href="#" onmousemove="infobulle_img('chemin_de_ton_image1',event);" onmouseout="infobulle_img_cache();">Bidule image</a> 
<a href="#" onmousemove="infobulle_img('chemin_de_ton_image2',event);" onmouseout="infobulle_img_cache();">Bobole image</a> 

</div>
</body>
</html>

mais il y a plus simple :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
function infobulle_im(image,event) {
   
  if (this.conteneur = document.getElementById('infobulle_i')) 
  {
	this.conteneur.src = image;  
	      
	this.conteneur.style.visibility = 'visible';
	this.conteneur.style.left = event.clientX+10+"px";
	this.conteneur.style.top = event.clientY+20+"px";
  }
}


function infobulle_i_cache(){
	if (this.conteneur = document.getElementById('infobulle_i'))
   	this.conteneur.style.visibility = 'hidden';
}
//--><!]]>
</script>

<style  type="text/css">
#infobulle_i {
position: absolute;
visibility: hidden;
border: 1px solid gray;
}
</style>
</head>

<body>
<div>
<img id = "infobulle_i" src="" alt="" />
<a href="#" onmousemove="infobulle_im('chemin_de_ton_image1',event);" onmouseout="infobulle_i_cache();">Bidule image</a> 
<a href="#" onmousemove="infobulle_im('chemin_de_ton_image2',event);" onmouseout="infobulle_i_cache();">Bobole image</a>
</div>
</body>
</html>

Dans les deux cas il te faudra une fonction pour préloader tes images :
http://www.phpfrance.com/forums/voir_re ... php#243592

Forum d'entraide PHPFrance

Info bulles

Info bulles