Posez votre question Signaler

Centrer une infobulle [Résolu]

Messages postés
130
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
17 juin 2018
 -
Javascript / DHTML Posez votre question Signaler
Bonjour,

J'aimerais centrer l'infobulle que j'ai crée à l'aide du HTML et du JavaScript. Pour le moment, elle apparait dans le coin de l'écran (en haut à gauche).

Page HTML "membres.html" dans le "head" : 
<script type="text/javascript" src="popup.js"></script>


Page HTML "membres.html" dans le "body" : 
<li>
 <script language="JavaScript">InitBulle("#ffffff","#333333","#999999",2);</script>
<a href="#" onMouseOver="AffBulle('<b>Membre 1 :</b><br>Affichage des coordonnées du membre 1.<br><br>Les jeux auxquels il joue.<br><br>Contenu supplémentaire + photo<br>')" onMouseOut="HideBulle()"><img src="membres\autre.png"></a>
<span><a href="#">Membre 1</a></span>
 </li>


Page JS "popup.js" : 
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
  contenu="<table border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><tr bgcolor='"+IB.ColContour+"'><td><table border=0 cellpadding=2 cellspacing=15 bgcolor='"+IB.ColFond+"'><tr><td><font size='+1' face='Agency FB' color='"+IB.ColTexte+"'>"+texte+"</font></td></tr></table></td></tr></table> ";
  var finalPosX=posX-xOffset;
  if (finalPosX<0) finalPosX=0;
  if (document.layers) {
    document.layers["bulle"].document.write(contenu);
    document.layers["bulle"].document.close();
    document.layers["bulle"].top=posY+yOffset;
    document.layers["bulle"].left=finalPosX;
    document.layers["bulle"].visibility="show";}
  if (document.all) {
    bulle.innerHTML=contenu;
    document.all["bulle"].style.top=posY+yOffset;
    document.all["bulle"].style.left=finalPosX;
    document.all["bulle"].style.visibility="visible";
  }
  else 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";
  }
}
function getMousePos(e) {
  if (document.all) {
  posX=event.x+document.body.scrollLeft;
  posY=event.y+document.body.scrollTop;
  }
  else {
  posX=e.pageX;
  posY=e.pageY; 
  }
}
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";}
}
 
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'></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>");
    }
 
}



Pouvez-vous m'aider svp ?

Darksam
Afficher la suite 

1 réponse

Meilleure réponse
Signaler Commenter la réponse de kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Statut
Membre
Dernière intervention
4 octobre 2016
 3
1
Merci
va dans ton fichier Js et Modifier les position top et left de tes div et du Layers dans la fonction InitBulle() et le tour es jouer.
comme ceci: 
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:300left:400 visibility='hide'></LAYER>");
    }
    if (document.all) {
        document.write("<DIV id='bulle' style='position:absolute;top:300px;left:400px;visibility:hidden'></DIV>");
        document.onmousemove=getMousePos;
    }
    else if (document.getElementById) {
            document.onmousemove=getMousePos;
            document.write("<DIV id='bulle' style='position:absolute;top:300px;left:400px;visibility:hidden'></DIV>");
    }
 
}

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 202 internautes nous ont dit merci ce mois-ci

Signaler Commenter la réponse de darksam0000
darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
17 juin 2018
 1 -
Ok ça fonctionne mais avec 700px en top et 800px en left. Un problème rencontré cependant, c'est que j'ai peur que sa soit centré par rapport à ma résolution d'écran (24'). Je vais devoir trouver autre chose je pense ... snif
Signaler Commenter la réponse de kuetedonald
kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Statut
Membre
Dernière intervention
4 octobre 2016
 3 -
tu peut utiliser le script pour adapter cela a ton ecran
w = screen.width;
h= screen.height;
tu affecte leur moitié a ton top et left.
ou tu utilise les %(50%)
Commenter la réponse de kuetedonald
Répondre Posez votre question