Aide pour infobulle

13 oct. 2008, 21:11

Bonjour,

Voilà je m'y connais pas trop en javascript mais j'ai réussis à créer des infobulles mais j'aurais besoin d'aide pour deux choses.

Voici mon script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>

<script type="text/javascript">
document.onmousemove = mouseover;

function mouseover(e)
{
	var decal_x = 15;
	var decal_y = 10;
	
	if(!e)
	{
		e = window.event;
	}
	
	if(!e || (typeof(e.pageX) != 'number' && typeof(e.clientX) != 'number'))
	{
		return;
	}

	if(typeof(e.pageX) == 'number')
	{
		var x = e.pageX;
		var y = e.pageY;
	}
	else
	{
		var x = e.clientX;
		var y = e.clientY;
		
		if(!((window.navigator.userAgent.indexOf('Opera')+1) || (window.ScriptEngine&&ScriptEngine().indexOf('InScript')+1) || window.navigator.vendor=='KDE'))
		{
			if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
			{
				x += document.documentElement.scrollLeft; 
				y += document.documentElement.scrollTop;
			}
			else if(document.body && (document.body.scrollTop || document.body.scrollLeft))
			{
				x += document.body.scrollLeft; 
				y += document.body.scrollTop;
			}
		}
	}
	
	var xcord = x + decal_x;
	var ycord = y + decal_y;
	
	document.getElementById("tooltip").style.left = xcord + "px"; 
	document.getElementById("tooltip").style.top  = ycord + "px";
}

function tooltipShow(title, text)
{
	document.getElementById("tooltip").style.display = 'block';
	
	document.getElementById("tooltitle").innerHTML = title;
	document.getElementById("tooltext").innerHTML = text;
}

function tooltipHide()
{
	document.getElementById("tooltip").style.display = 'none';
}
</script>

<style>
#tooltip {
	position:absolute;
	z-index:1000;
	border:1px solid #444;
	padding:5px;
	background-color:#000;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	opacity:0.7;
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	filter:alpha(opacity=70);
}

#tooltitle{
	margin: 0;
	font-size:10px;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#eee;
	border-bottom:#898989 dotted 1px;
	padding-bottom:2px;
}

#tooltext{
	margin: 0;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-style:italic;
	color:#ddd;
}
</style>
</head>

<body>

<div id="tooltip" style="display:none;">
	<div id="tooltitle"></div>
	<div id="tooltext"></div>
</div>


<a href="" onmouseover="tooltipShow('test 1', 'message 1')" onmouseout="tooltipHide();">test</a><br />
<a href="" onmouseover="tooltipShow('test 2', 'message 2')" onmouseout="tooltipHide();">test</a><br />
<a href="" onmouseover="tooltipShow('test 3', 'message 3')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 4', 'message 4')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 5', 'message 5')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 6', 'message 6')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 7', 'message 7')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 8', 'message 8')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 9', 'message 9')" onmouseout="tooltipHide()">test</a><br />
<a href="" onmouseover="tooltipShow('test 10', 'message 10')" onmouseout="tooltipHide()">test</a><br />


</body>
</html>

1/ J'aimerais que les infobulles apparaissent et disparaissent avec un effet de fondu.
2/ J'aimerais que quand l'infobulle est en bas de page elle n'apparaisse pas sous le lien mais au dessus, en faites je voudrais quelle ne sorte pas de l'écran même si le scroll n'est pas tout en bas.

Merci d'avance...

13 oct. 2008, 22:44

1/ J'aimerais que les infobulles apparaissent et disparaissent avec un effet de fondu.
Merci d'avance...

C'est le même principe que tu as utilisé pour les css

Code : Tout sélectionner

var object = document.getElementById(id);
	object = object.style;
	object.opacity = (25 / 100);
	object.MozOpacity = (25 / 100);
	object.KhtmlOpacity = (25 / 100);
	object.filter = "alpha(opacity=25)";

Tu remplaces "25" par une variable que tu incrémente à chaque appel de la fonction

13 oct. 2008, 23:22

J'ai réussi à faire ceci:

<script type="text/javascript">
document.onmousemove = mouseover;

function mouseover(e)
{
	var decal_x = 15;
	var decal_y = 10;
	
	if(!e)
	{
		e = window.event;
	}
	
	if(!e || (typeof(e.pageX) != 'number' && typeof(e.clientX) != 'number'))
	{
		return;
	}

	if(typeof(e.pageX) == 'number')
	{
		var x = e.pageX;
		var y = e.pageY;
	}
	else
	{
		var x = e.clientX;
		var y = e.clientY;
		
		if(!((window.navigator.userAgent.indexOf('Opera')+1) || (window.ScriptEngine&&ScriptEngine().indexOf('InScript')+1) || window.navigator.vendor=='KDE'))
		{
			if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
			{
				x += document.documentElement.scrollLeft; 
				y += document.documentElement.scrollTop;
			}
			else if(document.body && (document.body.scrollTop || document.body.scrollLeft))
			{
				x += document.body.scrollLeft; 
				y += document.body.scrollTop;
			}
		}
	}
	
	var xcord = x + decal_x;
	var ycord = y + decal_y;
	
	document.getElementById("tooltip").style.left = xcord + "px"; 
	document.getElementById("tooltip").style.top  = ycord + "px";
}

function setOpacity(obj, opacity) 
{
  	opacity = (opacity == 100)?99.999:opacity;
  
  	// IE/Win
  	obj.style.filter = "alpha(opacity:"+opacity+")";
  
  	// Safari<1.2, Konqueror
  	obj.style.KHTMLOpacity = opacity/100;
  
  	// Older Mozilla and Firefox
  	obj.style.MozOpacity = opacity/100;
  
  	// Safari 1.2, newer Firefox and Mozilla, CSS3
  	obj.style.opacity = opacity/100;
}

function fadeIn(objId, opacity) 
{
  	if (document.getElementById) 
	{
    	obj = document.getElementById(objId);
    	if (opacity <= 100) 
		{
      		setOpacity(obj, opacity);
      		opacity += 10;
      		window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 80);
			
			document.getElementById(objId).style.display = 'block';
    	}
  	}
}

function tooltipShow(title, author, size, add)
{
    document.getElementById("tooltitle").innerHTML = title;
    document.getElementById("tooltext").innerHTML = text; 
	
	window.setTimeout("fadeIn('tooltip', 0)", 0);

}

function tooltipHide()
{
    document.getElementById("tooltip").style.display = 'none';
} 
</script>

Par contre y a un problème si l'opacité n'est pas arrivé à terme et que je déplace ma souris hors du lien l'infobulle reste, elle ne disparait pas je suis obligé d'attendre que l'opacité soit arrivé à terme pour que l'infobulle s'efface quand je met ma souris hors du lien.

Donc comment faire pour que l'infobulle disparaisse même si l'opacité n'est pas arrivé à terme???

14 oct. 2008, 01:13

Le principe pour l'arrêter c'est de faire

Code : Tout sélectionner

timer = setTimeout(...);
//...
//arrêt
clearTimeout(timer);

14 oct. 2008, 18:48

Merci AB 1er sujet réglé.

Voici le script:

<script type="text/javascript">
document.onmousemove = mouseover;

function mouseover(e)
{
    var decal_x = 15;
    var decal_y = 10;
    
    if(!e)
    {
        e = window.event;
    }
    
    if(!e || (typeof(e.pageX) != 'number' && typeof(e.clientX) != 'number'))
    {
        return;
    }

    if(typeof(e.pageX) == 'number')
    {
        var x = e.pageX;
        var y = e.pageY;
    }
    else
    {
        var x = e.clientX;
        var y = e.clientY;
        
        if(!((window.navigator.userAgent.indexOf('Opera')+1) || (window.ScriptEngine&&ScriptEngine().indexOf('InScript')+1) || window.navigator.vendor=='KDE'))
        {
            if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
            {
                x += document.documentElement.scrollLeft; 
                y += document.documentElement.scrollTop;
            }
            else if(document.body && (document.body.scrollTop || document.body.scrollLeft))
            {
                x += document.body.scrollLeft; 
                y += document.body.scrollTop;
            }
        }
    }
    
    var xcord = x + decal_x;
    var ycord = y + decal_y;
    
    document.getElementById("tooltip").style.left = xcord + "px"; 
    document.getElementById("tooltip").style.top  = ycord + "px";
}

function setOpacity(obj, opacity) 
{
      opacity = (opacity == 100)?99.999:opacity;
  
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
  
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
  
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
  
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
}

function fadeIn(objId, opacity) 
{
      if (document.getElementById) 
    {
        obj = document.getElementById(objId);
        if (opacity <= 100) 
        {
              setOpacity(obj, opacity);
              opacity += 10;
              timer = window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 80);
            
            document.getElementById(objId).style.display = 'block';
        }
      }
}

function tooltipShow(title, author, size, add)
{
    document.getElementById("tooltitle").innerHTML = title;
    document.getElementById("tooltext").innerHTML = text; 
    
    timer = window.setTimeout("fadeIn('tooltip', 0)", 0);

}

function tooltipHide()
{
    document.getElementById("tooltip").style.display = 'none';
	clearTimeout(timer);
} 
</script>

Mais il reste une chose:
Comment faire pour que quand l'infobulle est en bas de page elle n'apparaisse pas sous le lien mais au dessus, en faites je voudrais quelle ne sorte pas de l'écran même si le scroll n'est pas tout en bas.

15 oct. 2008, 03:25

D'ailleurs y'a un autre souci, c'est qu'avec IE on a des infobulles automatiques pour indiquer le sens du texte survolé.
Par exemple au survol des liens "test", l'infobulle IE indique "test : test;examen; tester, mettre à l'épreuve" et cette infobulle se superpose à celle créée en javascript qui se retrouve donc masquée en partie ou en totalité ...

Voici ton code que j'ai remanié pour éviter ce problème sur la première ligne de test (je n'ai pas touché aux autres pour comparaison). J'ai utilisé une balise acronym que je cache en css. Cela fonctionne et fait un code valide par contre au niveau de la sémantique, les puristes auraient sûrement des choses à redire... Mais je vois pas comment faire autrement (faire simplement title="" ne fonctionne pas).

- J'ai supprimé aussi quelques lignes de ton code (inutiles)
- et mis pour l'exemple une largeur maximale pour l'infobulle. C'est modifiable ou supprimable dans le css #tooltext, et pour IE6 et inférieur dans les commentaires conditionnels <!--[if lte IE 6]>...

Concernant le fait que les infobulles sont entièrement cachées si on se trouve en bas de page... bah suffit de remonter leur positionnement et on est certain de voir au moins le début donc le visiteur n'aura qu'à scroller un peu pour voir la suite si besoin...

<!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=iso-8859-1" />
<title>Info bulle</title>
<!--[if lte IE 6]>
<style type="text/css">
#tooltext {
width:expression(document.getElementById("tooltext").offsetWidth >= 250? "250px": "auto" );
}
</style>
<![endif]--> 
<script type="text/javascript">
<!--
document.onmousemove = mouseover;

function mouseover(e)
{
    var decal_x = 15;
    var decal_y = -25;
    
    if(!e)
    {
        e = window.event;
    }
    
    if(!e || (typeof(e.pageX) != 'number' && typeof(e.clientX) != 'number'))
    {
        return;
    }

    if(typeof(e.pageX) == 'number')
    {
        var x = e.pageX;
        var y = e.pageY;
    }
    else
    {
        var x = e.clientX;
        var y = e.clientY;
        
        if(!((window.navigator.userAgent.indexOf('Opera')+1) || (window.ScriptEngine&&ScriptEngine().indexOf('InScript')+1) || window.navigator.vendor=='KDE'))
        {
            if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
            {
                x += document.documentElement.scrollLeft; 
                y += document.documentElement.scrollTop;
            }
            else if(document.body && (document.body.scrollTop || document.body.scrollLeft))
            {
                x += document.body.scrollLeft; 
                y += document.body.scrollTop;
            }
        }
    }
    
    var xcord = x + decal_x;
    var ycord = y + decal_y;
    	
    document.getElementById("tooltip").style.left = xcord + "px"; 
    document.getElementById("tooltip").style.top  = ycord + "px";
}

function setOpacity(obj, opacity) 
{  
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
  
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
  
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
  
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
}

function fadeIn(objId, opacity) 
{
      if (document.getElementById) 
    {
        obj = document.getElementById(objId);
        if (opacity <= 100) 
        {
              setOpacity(obj, opacity);
              opacity += 3;
              timer = window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 18);
            
            document.getElementById(objId).style.display = 'block';
        }
      }
}

function tooltipShow(title, message)
{
    document.getElementById("tooltitle").innerHTML = title;
    document.getElementById("tooltext").innerHTML = message; 
    
	fadeIn('tooltip', 0);
}

function tooltipHide()
{
    document.getElementById("tooltip").style.display = 'none';
    clearTimeout(timer);
} 
-->
</script> 

<style type="text/css">
#tooltip {
    position:absolute;
    z-index:1000;
    border:1px solid #444;
    padding:5px;
    background-color:#000;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
	line-height:16px;
}

#tooltitle{
    margin: 0;
    font-size:11px;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFF;
    border-bottom: #F7F7F7 dotted 1px;
    padding-bottom:2px;
}

#tooltext{
    margin: 0;
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFF;
	max-width:250px;
}
.cacheinfoIE acronym{
	display:none;
}
</style>
</head>

<body>

<div id="tooltip" style="display:none;">
    <div id="tooltitle"></div>
    <div id="tooltext"></div>
</div>

<p>
<a class="cacheinfoIE" href="" onmouseover="tooltipShow('test 1', 'message 1 de la première info-bulle et un peu de texte pour tester sur plusieurs lignes la hauteur de l\'infobulle')"  onmouseout="tooltipHide();"><acronym>invisible</acronym>test</a><br /><br />
<a title="" href="" onmouseover="tooltipShow('test 2', 'message 2')" onmouseout="tooltipHide();">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 3', 'message 3')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 4', 'message 4')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 5', 'message 5')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 6', 'message 6')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 7', 'message 7')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 8', 'message 8')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 9', 'message 9')" onmouseout="tooltipHide()">test</a><br /><br />
<a href="" onmouseover="tooltipShow('test 10', 'message 10')" onmouseout="tooltipHide()">test</a><br /><br />
</p>

</body>
</html>

15 oct. 2008, 18:36

Merci AB pour les modifs.

En local sous IE je n'ai pas ce genre d'infobulle comme tu me le dis.

Pour le truc imaginons que le lien soit tout en bas de la page et que l'on peut plus scroller vers le bas et ben on voit pas l'infobulle.

Et je n'arrive pas à savoir comment faire pour que lorsque l'on es en bas de page l'infobulle remonte.

Du moins il faut attribuer à style.top une valeur négative pour quelle remonte.

Mais comment faire pour que le script sache que quand le curseur est trop bas il change la valeur???

16 oct. 2008, 03:39

Merci AB pour les modifs.

En local sous IE je n'ai pas ce genre d'infobulle comme tu me le dis.

Pour le truc imaginons que le lien soit tout en bas de la page et que l'on peut plus scroller vers le bas et ben on voit pas l'infobulle.

Et je n'arrive pas à savoir comment faire pour que lorsque l'on es en bas de page l'infobulle remonte.

Du moins il faut attribuer à style.top une valeur négative pour quelle remonte.

Mais comment faire pour que le script sache que quand le curseur est trop bas il change la valeur???

M'ouais, tu dois faire des sites un peu bizarres, car ça voudrait dire que tu veux pourvoir mettre des infobulles dans le pied de page

Sinon tu peux toujours remonter le départ de l'infobulle en faisant par exemple var decal_y = -50; mais après tu va me dire que si l'on met des infobulles dans le bandeau haut de présentation...
Et puis tu peux aussi définir une largeur maximale importante pour ton infobulle ce qui fait qu'il tiendra déjà pas mal de texte sur une seule ligne...

Bref tu as une multitude de possibilités pour t'éviter cette modif qui de toutes façons ne devrait pas servir. Sinon si tu veux mettre beaucoup de texte ou des images, ce n'est pas du côté des infobulles qu'il faut chercher mais du côté des popup internes qui sont plus appropriés.

Maintenant si tu y tiens absolument, ce doit être possible : mesurer la hauteur de la fenêtre interne, la hauteur de l'infobulle, la position du curseur etc. mais j'ai du mal à passer du temps sur un truc que je trouve superflu... donc j'espère que tu trouveras quelqu'un de plus motivé que moi pour cette fonctionnalité

16 oct. 2008, 18:58

Merci de ton aide AB mais j'ai trouvé pour le calcul de la fenêtre interne du navigateur sur google.

Donc voilà c'est réglé.

++

Aide pour infobulle

Qui est en ligne