Posez votre question Signaler

Centrer une infobulle [Résolu]

Messages postés
130
Date d'inscription
mardi 24 juin 2008
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 

Votre réponse

Répondre au sujet

1 réponse

Meilleure réponse
Signaler Commenter la réponse de kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Dernière intervention
4 octobre 2016
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 95 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
Dernière intervention
17 juin 2018
 -
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
Dernière intervention
4 octobre 2016
 -
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

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.