Javascript afficher plusieurs infobulles

Fermé
ponpon - 14 août 2006 à 18:30
 ponpon - 14 août 2006 à 19:14
Bonjour,
J'aimerai savoir comment afficher plusieurs infobulle en même temps, car j'ai un script qui affiche une info bulle mais quand je veux en afficher une autre ca vire la premiere ...

Merci d'avance
A voir également:

1 réponse

Voici ma fonction, si je lance affiche1, affiche2 etc.. il va afficher la dernier fonction lancée please help

var IB=new Object;
var posX=360;posY=20;
var posX1=480;posY1=20;
var posX2=630;posY2=20;
var posX3=783;posY3=20;
var posX4=866;posY4=20;
var posX5=927;posY5=20;
var xOffset=10;yOffset=10;

fDomOffset = function( oObj, sProp )
{ 
 var iVal = 0; 
 while (oObj && oObj.tagName != 'BODY') { 
  eval('iVal += oObj.' + sProp + ';');
  oObj = oObj.offsetParent; 
 } 
 return iVal; 
}  

fSwapSelect = function( sId ) 
{ 
 oObj = document.getElementById(sId); 

 Top_Element  = fDomOffset(oObj, 'offsetTop'); 
 Left_Element  = fDomOffset(oObj, 'offsetLeft'); 
 Largeur_Element  = oObj.offsetWidth; 
 Hauteur_Element  = oObj.offsetHeight; 
 oSelects = document.getElementsByTagName('SELECT'); 
 if (oSelects.length > 0) { 
  for (i = 0; i < oSelects.length; i++) { 
   oSlt = oSelects[i]; 
   Top_Select = fDomOffset(oSlt, 'offsetTop'); 
   Left_Select = fDomOffset(oSlt, 'offsetLeft'); 
   Largeur_Select = oSlt.offsetWidth; 
   Hauteur_Select = oSlt.offsetHeight; 
   isLeft = false; 
   if ((Left_Element > (Left_Select - Largeur_Element)) && (Left_Element < (Left_Select + Largeur_Select))) { 
    isLeft = true; 
   } 
   isTop = false; 
   if ((Top_Element > (Top_Select - Hauteur_Element)) && (Top_Element < (Top_Select + Hauteur_Select))) { 
    isTop = true; 
   } 
   if (isLeft && isTop) { 
    sVis = (oObj.style.visibility == 'hidden') ? 'visible' : 'hidden'; 
    if (oSlt.style.visibility != sVis) {oSlt.style.visibility = sVis;} 
   } else { 
    if (oSlt.style.visibility != 'visible') {oSlt.style.visibility = 'visible';} 
   } 
  } 
 } 
} 

function AffBulle(texte) 
{
	contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";

	var finalPosX=posX-xOffset;
	if (finalPosX<0) finalPosX=0;
	if (document.getElementById) {
		document.getElementById("bulle").innerHTML=contenu;
		document.getElementById("bulle").style.top=posY+yOffset;
		document.getElementById("bulle").style.left=finalPosX;
		document.getElementById("bulle").style.visibility="visible";
	}

	fSwapSelect('bulle')	
}

function AffBulle1(texte) 
{
	contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";
        
	var finalPosX1=posX1-xOffset;
	if (finalPosX1<0) finalPosX1=0;
	if (document.getElementById) {
		document.getElementById("bulle").innerHTML=contenu;
		document.getElementById("bulle").style.top=posY1+yOffset;
		document.getElementById("bulle").style.left=finalPosX1;
		document.getElementById("bulle").style.visibility="visible";
	}

	fSwapSelect2('bulle')	
}

function AffBulle2(texte) 
{
	contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";

	var finalPosX2=posX2-xOffset;
	if (finalPosX2<0) finalPosX2=0;
	if (document.getElementById) {
		document.getElementById("bulle").innerHTML=contenu;
		document.getElementById("bulle").style.top=posY2+yOffset;
		document.getElementById("bulle").style.left=finalPosX2;
		document.getElementById("bulle").style.visibility="visible";
	}

	fSwapSelect('bulle')	
}

function AffBulle3(texte) 
{
	contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";

	var finalPosX3=posX3-xOffset;
	if (finalPosX3<0) finalPosX3=0;
	if (document.getElementById) {
		document.getElementById("bulle").innerHTML=contenu;
		document.getElementById("bulle").style.top=posY3+yOffset;
		document.getElementById("bulle").style.left=finalPosX3;
		document.getElementById("bulle").style.visibility="visible";
	}

	fSwapSelect('bulle')	
}

function AffBulle4(texte) 
{
	contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";

	var finalPosX4=posX4-xOffset;
	if (finalPosX4<0) finalPosX4=0;
	if (document.getElementById) {
		document.getElementById("bulle").innerHTML=contenu;
		document.getElementById("bulle").style.top=posY4+yOffset;
		document.getElementById("bulle").style.left=finalPosX4;
		document.getElementById("bulle").style.visibility="visible";
	}

	fSwapSelect('bulle')	
}

function AffBulle5(texte) 
{
	contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";

	var finalPosX5=posX5-xOffset;
	if (finalPosX5<0) finalPosX5=0;
	if (document.getElementById) {
		document.getElementById("bulle").innerHTML=contenu;
		document.getElementById("bulle").style.top=posY5+yOffset;
		document.getElementById("bulle").style.left=finalPosX5;
		document.getElementById("bulle").style.visibility="visible";
	}

	fSwapSelect('bulle')	
}


function HideBulle() 
{
	if (document.layers) 
	{
		document.layers["bulle"].visibility="hide";
	}

	if (document.all)
	{
		document.all["bulle"].style.visibility="hidden";
	}
	else if (document.getElementById)
	{
		document.getElementById("bulle").style.visibility="hidden";
	}
	fSwapSelect('bulle')	
}

function InitBulle(ColTexte,ColFond,ColContour,NbPixel) 
{
	IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
	if (document.layers) 
	{
		window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
		document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
	}
	
	if (document.all) 
	{
		document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden;z-index:10'></DIV>");
		document.onmousemove=getMousePos;
	}
	else if (document.getElementById) 
	{
		document.onmousemove=getMousePos;
		document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
}
0