Infobulle

22 janv. 2007, 18:44

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!

22 janv. 2007, 19:48

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)

22 janv. 2007, 20:09

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 ?

22 janv. 2007, 20:23

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

22 janv. 2007, 21:47

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

22 janv. 2007, 22:34

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

22 janv. 2007, 22:52

Bonsoir,

Regarde ce post et inspire-toi.

22 janv. 2007, 23:15

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.

23 janv. 2007, 00:42

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

23 janv. 2007, 01:10

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

Code : Tout sélectionner

+msg+

23 janv. 2007, 01:13

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.

23 janv. 2007, 01:41

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";
        }
}

23 janv. 2007, 02:13

du coup on à les trois choix possible, excellent

23 janv. 2007, 02:51

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";
        }
}

23 janv. 2007, 03:23

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.

Infobulle

Qui est en ligne