Info bulles

par AB » 05 juin 2009, 14:58

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

par **enibib** » 05 juin 2009, 10:10

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 ...)

par **webaida** » 05 juin 2009, 09:30

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

par AB » 02 juin 2009, 15:25

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>

par **enibib** » 02 juin 2009, 11:58

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]

par **Ryle** » 02 juin 2009, 11:44

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

par **albat** » 02 juin 2009, 11:42

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

par **enibib** » 02 juin 2009, 11:24

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]

par **Ryle** » 02 juin 2009, 11:19

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

par **enibib** » 02 juin 2009, 11:05

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]

Info bulles

Répondre

Étendre la vue Revue du sujet : Info bulles

Info bulles