Centrer une infobulle [Résolu]

Question

Posez votre question Signaler

Centrer une infobulle [Résolu]

darksam0000 130 Messages postés mardi 24 juin 2008Date d'inscription 17 juin 2018 Dernière intervention - 20 nov. 2014 à 22:59 - Dernière réponse : kuetedonald 49 Messages postés vendredi 30 mai 2014Date d'inscription 4 octobre 2016 Dernière intervention

- 22 nov. 2014 à 09:12

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

3 réponses

Votre réponse

Répondre au sujet

Posez votre question

Accepted Answer

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>");
    }
 
}

Merci kuetedonald 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 75 internautes ce mois-ci

Centrer une infobulle [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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