Infobulle

par **artotal** » 23 janv. 2007, 18:00

j'ai pu identifié le problème.

	var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x;
	var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y;

apparement :
e.pageY pose un problème, pourtant la syntaxe est bonne comme indiqué ici
http://www.aidejavascript.com/article83.html
Sa doit donc être la condition qui bloque.

Code : Tout sélectionner

(navigator.appName.substring(0,3) == "Net")

en plus je compte 4 caractère.
Mais ce n'est pas là que sa bloque, j'ai essayer en php le même test et c'st pareil

par **artotal** » 23 janv. 2007, 16:24

Donc sous FF il me précise que
captureEvents à un bug au niveau du langage.
C'est une méthode de propagation ?

par **Neomcdn** » 23 janv. 2007, 13:27

Salut à tous!!

J'ai effectivement cherché sur google avant de poster ici car google est mon ami. C'est aussi lui qui m'a fait découvrir www.phpfrance.com.

ça n'enlève pas la difficulté de la tâche et comme j'ai eu sur ce forum des réponses très pointues concernant des problèmes sur php; je me suis dis que ce pourrait être bien d'avoir votre aide sur les infobulles.

Je vais donc m'inspirer de ce qui a déjà été fait. Je reviendrai vers vous si j'ai des soucis.

Merci en attendant!

par **artotal** » 23 janv. 2007, 03:42

c'est à cause de l'entète. C'est embètant j'aurrai rester en srtict 1.0.
Sa fonctionne :
http://creatif-web.be/developpeur/index.php
Une petite aide ne serai pas de refus ?

par **artotal** » 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.

par **artotal** » 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";
        }
}

par **artotal** » 23 janv. 2007, 02:13

du coup on à les trois choix possible, excellent

par **Truc** » 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";
        }
}

par **artotal** » 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.

par **Invité** » 23 janv. 2007, 01:10

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

Code : Tout sélectionner

+msg+

par **Truc** » 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

par **artotal** » 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.

par **Ajoloca** » 22 janv. 2007, 22:52

Bonsoir,

Regarde ce post et inspire-toi.

par **Truc** » 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

par **artotal** » 22 janv. 2007, 21:47

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

Infobulle

Répondre

Étendre la vue Revue du sujet : Infobulle

Re