Centrer une infobulle [Résolu]

darksam0000 128 Messages postés mardi 24 juin 2008Date d'inscription 5 juillet 2016 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
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

3 réponses

Meilleure réponse
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

codes-sources a aidé 87955 internautes ce mois-ci

darksam0000 128 Messages postés mardi 24 juin 2008Date d'inscription 5 juillet 2016 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
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

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.