Forum d'entraide PHPFrance

Bonjour à tous!

Savez-vous comment intégrer une infobulle en js?

Je souhaite qu'au passage de la souris sur une photo de taille réduite (générée dynamiquement par mySql + PHP), un script permette d'aller chercher la même photo mais avec une plus grande taille?? ?Nous avons donc deux fichiers dans la base:
- 1 photo 150*113 8Ko
- 1 photo (aggrandissement) 267*200 20Ko

Merci d'avance!

Salut,

L'info-bulle... sujet très courant dans le milieu du web et tu n'as rien trouvé sur le net ou même sur le forum ?!

Une fois que tu sauras afficher une info-bulle tu pourras utiliser un peu d'Ajax pour la récupération de l'image. (sinon tu peux toujours afficher toutes les images sans ajax... mais chargement plus long)

moi ce qui me tracasse c'est de faire une infobulle en javascript, après l'appel avec le js me convient bien.
Qu'elle est le principe ?

moi ce qui me tracasse c'est de faire une infobulle en javascript, après l'appel avec le js me convient bien.
Qu'elle est le principe ?

L'info-bulle n'est ni plus ni moins un div caché qui "apparait" dans certaines conditions suffit de remplir ce div avec le contenu (ici la grande image).

oui celui là, mais si l'on veux que pendant le survolement l'info bulle suit la souris ?

google...... tape info-bulle tu va avoir au moins tout ça de résultats

c'est un mélange de l'info bulle "simple" (onmouseover + CSS ) avec du javascript pour le positionnement du curseur

Bonsoir,

Regarde ce post et inspire-toi.

j'ai essayer le code que tu as donnés mais il je n'est pas trouvé la coquille et j'était sur un autre
http://creatif-web.be/developpeur/info_bulle.php

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Info Bulle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.popperlink { 
position: absolute; 
visibility: hidden 
}

.texte {
font-size:10px;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color: #000000;
}
</style>

</head>

<body>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50">&nbsp;</td>
<td align="left" valign="top">


<div class=popperlink id=topdecklink></div>
<script language="JavaScript">

domok = document.getElementById;
if (domok)
	{
	skn = document.getElementById("topdecklink").style;
	if(navigator.appName.substring(0,3) == "Net")
		document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = get_mouse;
	}

function poplink(img)
{

var content ='<div style="background-color:#ccc;"><img src="img/'+img+'"></div>';

	if (domok)
		{
	  	document.getElementById("topdecklink").innerHTML = content;
	  	skn.visibility = "visible";
  		}
}

function get_mouse(e)
	{
	var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	skn.left = x - 60;
	skn.top = y+20;
	}

function killlink()
	{
	if (domok)
  		skn.visibility = "hidden";
	}

</script>

<!-- FIN DU SCRIPT -->

<a onMouseOver="poplink('compte.png');" onMouseOut="killlink()" href="" class="texte">aaaaaaaaaaaaaaaaaa</a><br /><br /><br />
<a onMouseOver="poplink('doc0.png');" onMouseOut="killlink()" href="" class="texte">cccccccccccccccccccc</a><br><br /><br /><br />
<a onMouseOver="poplink('doc1.png');" onMouseOut="killlink()" href="" class="texte">zzzzzzzzzzzzzzzzzzzz</a><br><br /><br /><br />
<a onMouseOver="poplink('doc4.png');" onMouseOut="killlink()" href="" class="texte">ssssssssssssssssssss.</a><br><br /><br /><br />
<a onMouseOver="poplink('doc3.png');" onMouseOut="killlink()" href="" class="texte">llllllllllllllllllll</a><br><br /><br /><br />
<a onMouseOver="poplink('doc5.png');" onMouseOut="killlink()" href="" class="texte">ffffffffffffffffffffff</a><br><br><br /><br /><br />
</body>
</html>

J'ai du l'adapter pour une image, il faut donc changer poplink() pour afficher du texte :

Code : Tout sélectionner

function poplink(img)
{

var content ='<div style="background-color:#ccc;">'+img+'</div>';

	if (domok)
		{
	  	document.getElementById("topdecklink").innerHTML = content;
	  	skn.visibility = "visible";
  		}
}

Merci à tous.

J'ai du l'adapter pour une image, il faut donc changer poplink() pour afficher du texte :

var content ='<div style="background-color:#ccc;">Bla Bla texte ICI '+img+'</div>';

ou j'ai rien compri

Oui, il faut faire une autre fonction, une deuxième pour afficher du texte.

Code : Tout sélectionner

+msg+

et donc une deuxième fonction identique mais avec ce genre de code avec un chemin relatif pour l'image:

Code : Tout sélectionner

var content ='<div style="background-color:#ccc;"><img src="/'+img+'"></div>';

en essayant avec un framework on peux faire quelque chose de nouveau.

function poplink(img,msg)
{

var content ='<div style="background-color:#ccc;">'+msg+'  <img src="/'+img+'"></div>';

   if (domok)
      {
        document.getElementById("topdecklink").innerHTML = content;
        skn.visibility = "visible";
        }
}

du coup on à les trois choix possible, excellent

donc les test sont concluant :
http://creatif-web.be/developpeur/info_bulle.php

// Fonction pour afficher une image

Code : Tout sélectionner

	function poplink(img)
	{
	
	var content ='<div style="background-color:#ccc;"><img src="img/'+img+'"></div>';
	
		if (domok)
			{
			document.getElementById("topdecklink").innerHTML = content;
			skn.visibility = "visible";
			}
	}

// Fonction pour afficher un texte
function pop_texte(msg)
{

var content ='<div style="background-color:#ccc;">'+msg+'</div>';

   if (domok)
      {
        document.getElementById("topdecklink").innerHTML = content;
        skn.visibility = "visible";
        }
}

// Fonction pour afficher un texte et une image
function pop_texte_img(msg,img)
{

var content ='<div style="background-color:#ccc;">'+msg+'<img src="img/'+img+'"></div>';

   if (domok)
      {
        document.getElementById("topdecklink").innerHTML = content;
        skn.visibility = "visible";
        }
}

Le problème c'est que sa ne fonctionne qu'en position absolute et donc sa ne fonction pas chez moi ?
j'ai introduit protoype.
http://creatif-web.be/developpeur/info_bulle.php

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Info Bulle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="./js/scriptaculous/prototype.js" type="text/javascript"> </script>
<script src="./js/scriptaculous/scriptaculous.js" type="text/javascript"> </script>
<style type="text/css">
.popperlink { 
position: absolute;  
}
</style>
</head>
<body>
<div class="popperlink" id="topdecklink"></div>
<script language="JavaScript">
domok = $;
if (domok)
	{
	skn = $("topdecklink").style;
	if(navigator.appName.substring(0,3) == "Net")
	document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = get_mouse;
	}

// Fonction pour afficher une image
	function poplink(img)
	{
	
	var content ='<div style="background-color:#ccc;"><img src="img/'+img+'"></div>';
	
		if (domok)
			{
			$("topdecklink").innerHTML = content;
			skn.visibility = "visible";
			}
	}

// Fonction pour afficher un texte
function pop_texte(msg)
{

var content ='<div style="background-color:#ccc;">'+msg+'</div>';

   if (domok)
      {
        $("topdecklink").innerHTML = content;
        skn.visibility = "visible";
        }
}

// Fonction pour afficher un texte et une image
function pop_texte_img(msg,img)
{

var content ='<div style="background-color:#eee;">'+msg+'</div><div><img src="img/'+img+'"></div>';

   if (domok)
      {
        $("topdecklink").innerHTML = content;
        skn.visibility = "visible";
        }
} 



function get_mouse(e)
	{
	var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	skn.left = x - 60;
	skn.top = y+20;
	}

function killlink()
	{
	if (domok)
  		skn.visibility = "hidden";
	}
</script>
<a onMouseOver="poplink('compte.png');" onMouseOut="killlink()" href="" class="texte">aaaaaaaaaaaaaaaaaa</a><br /><br /><br />
<a onMouseOver="poplink('doc0.png');" onMouseOut="killlink()" href="" class="texte">cccccccccccccccccccc</a><br /><br /><br /><br />
<a onMouseOver="pop_texte_img('La doc du soir', 'doc1.png');" onMouseOut="killlink()" href="" class="texte">zzzzzzzzzzzzzzzzzzzz</a><br /><br /><br /><br />
<a onMouseOver="poplink('doc4.png');" onMouseOut="killlink()" href="" class="texte">ssssssssssssssssssss.</a><br /><br /><br /><br />
<a onMouseOver="poplink('doc3.png');" onMouseOut="killlink()" href="" class="texte">llllllllllllllllllll</a><br /><br /><br /><br />
<a onMouseOver="poplink('doc5.png');" onMouseOut="killlink()" href="" class="texte">ffffffffffffffffffffff</a>
</body>
</html>

Si j'enlève le posiontion:absolute; sa crache.

Forum d'entraide PHPFrance

Infobulle

Infobulle