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

Meilleure réponse
Signaler Commenter la réponse de kuetedonald
kuetedonald 49 Messages postés vendredi 30 mai 2014Date d'inscription 4 octobre 2016 Dernière intervention - 21 nov. 2014 à 12:31
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é 101 internautes ce mois-ci

Signaler Commenter la réponse de darksam0000
darksam0000 130 Messages postés mardi 24 juin 2008Date d'inscription 17 juin 2018 Dernière intervention - 21 nov. 2014 à 14:59
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 49 Messages postés vendredi 30 mai 2014Date d'inscription 4 octobre 2016 Dernière intervention - 22 nov. 2014 à 09:12
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.

Les tops du mois