11548 sujets

JavaScript, DOM et API Web HTML5

Problème DOCTYPE avec infobulle

Bonjour,

je souhaite utiliser des info bulles sur des liens ou images sur ma page web.
Pour ce faire, j'utilise le code trouvé ici : http://www.toutjavascript.com/main/gorun.php3?s=infobulle

<HTML>
<HEAD>
<TITLE>Tout JavaScript.com - Info Bulle DHTML</TITLE>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
//D'autres scripts sur  http://www.toutjavascript.com
 
//Si vous utilisez ce script, merci de m'avertir !  < webmaster@toutjavascript.com >
//Auteur original :Olivier Hondermarck  <webmaster@toutjavascript.com>
//Modifs compatibilité Netscape 6/Mozilla : Cédric Lamalle 09/2001 <cedric@cpac.embrapa.br>
//Correction Mac IE5 (Merci Fred)

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=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;";
  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) {
    //var f=window.event;
    //doc=document.body.scrollTop;
    bulle.innerHTML=contenu;
    document.all["bulle"].style.top=posY+yOffset;
    document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
    document.all["bulle"].style.visibility="visible";
  }
  //modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
  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; //modifs CL 09/2001 - IE : regrouper l'évènement
  posY=event.y+document.body.scrollTop;
  }
  else {
  posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
  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;
	}
	//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
	else if (document.getElementById) {
	        document.onmousemove=getMousePos;
	        document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}

}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" >

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<!-- appel à l'initialisation des infos bulles (laisser dans le BODY) -->
<SCRIPT language="JavaScript">InitBulle("navy","#FFCC66","orange",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)
</SCRIPT>


<A href="#" onMouseOver="AffBulle('Info bulle du premier lien')" onMouseOut="HideBulle()">Premier Lien ----------------------------------------------------</A><BR>
<A href="#" onMouseOver="AffBulle('Ce script permet d\'afficher des infos bulles très <BIG>simplement</BIG>,<BR> sur <I>plusieurs</I> lignes,<BR>avec des éléments HTML. ')" onMouseOut="HideBulle()">Deuxieme Lien</A><BR>
<A href="#" onMouseOver="AffBulle('Autant d\'infos bulles que vous voulez ...')" onMouseOut="HideBulle()">Autre Lien</A>

<BR><a href="#" onMouseOver="AffBulle('<b>Règles de validation :</b><br> Prénom doit être une chaine de caractères')" onMouseOut="HideBulle()">toto</a><BR>

<A href="http://www.toutjavascript.com" onMouseOver="AffBulle('ToutJavaScript.com c\'est :<LI>des dizaines de javascripts,<LI>des conseils,<LI>des liens.<BR><CENTER><B>Et bien plus encore...</B><BR><IMG src=\'http://www.toutjavascript.com/gif/animtjs.gif\' width=100 height=30></CENTER>')" onMouseOut="HideBulle()">www.ToutJavaScript.com</A>

</BODY></HTML>


e code repond vraiment a toutes mes attentes, mais j'ai un problème car il fonctionne mal dès que je déclare un DOCTYPE en haut de ma page; voici ceux que j'ai essayé :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



Dès que je déclare un DOCTYPE, les infos bulles sont mal placées. Je m'explique :
- sous Firefox, elles sont forcément en haut à gauche
- sous IE, elles ne prennent pas en compte la position de l'ascenceur vértical et donc de la page....

....alors que sans DOCTYPE, tout marche nickel sous IE et Firefox.

Est ce quelqu'un peut m'aider en me donnant le DOCTYPE à utiliser ou alors la partie du code javascript a modifier?

Merci d'avance
Tu peux essayer au lieu de :

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

ça:

function getMousePos(e) {
if (document.all) {
posX=event.x+document.body.scrollLeft+document.documentElement.scrollLeft;
posY=event.y+document.body.scrollTop+document.documentElement.scrollLeft;
}
else {
posX=e.pageX; 
posY=e.pageY; 
}
}

Modifié par matmat (03 May 2007 - 21:18)
Merci matmat pour ton aide. Il y a du mieux, même si je me suis permis de corriger une petite faute (scrollTop ald ScrollLeft). En tout cas, ca marche désormais très bien sous IE (et c'est déja pas mal) mais tjrs le même problème sous Firefox, as tu une idée du problème?
Encore merci pour ton aide.
function getMousePos(e) {
if (document.all) {
posX=event.x+document.body.scrollLeft+document.documentElement.scrollLeft;
posY=event.y+document.body.scrollTop+document.documentElement.scrollTop;
}
else {
posX=e.pageX; 
posY=e.pageY; 
}
}
En fait ton script ne m'inspire pas trop, j'y comprend même pas grand chose, mais une chose que je voit c'est qu'il est bien tordu et bien vieux et que c'est pas étonnant que tu es des bugs, je pense qu'il faudrait mieux en trouver un autre, regarde dans les tutos d'alsa, il me semble qu'il y en a un.
Sujet clos
Aller à