f1hgu
Messages postés2Date d'inscriptionmardi 11 décembre 2007StatutMembreDernière intervention11 avril 2008
-
23 mars 2008 à 18:42
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 2011
-
11 avril 2008 à 16:04
Bonjour,
Dans le but de développer mon site, j'étais à la recherche d'un script faisant une info bulle avec un usermap et des areas shape. Ne trouvant, j'ai voulais en prendre un et le modifier selon mes souhaits, mais mes connaissance en JAVASCPRIT sont plus que limiter...
Pour un premier script celui ci fonctionne parfaitement sous FIREFOX, mais pas du tout sous IE
Voici un extrait de la page HTML
../..
<SCRIPT LANGUAGE= "JavaScript" type="text/javascript">
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
contenu="<TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'>----, "+texte+"</TD>
</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) {
//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("
");
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("
");
}
}
</script>
../..
</head>
../..
<SCRIPT language="JavaScript">InitBulle("navy","#F6EDD9","#FFD79F",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)</SCRIPT>
../..
<map name="Map2">
[# NO SMKG
Associated sign come on in the cabine associated with a single chime.
The \'No Smoking\' light illuminates blue in the memo panel.<li>OFF Associated sign and memo light are extinguised')" onMouseOut ="HideBulle()">
]SEAT BELTS Associated sign come on in the cabine associated with a single chime.
The \'Seat Belts\' light illuminates blue in the memo panel.<li>OFF Associated sign and memo light are extinguised')" onMouseOut= "HideBulle()">
[# ON
Emergency lights illuminate<li>ARM Normal selector position in operation
If DC STBY BUS voltage is below 18V or if the 2 generators are lost, emergency lights will illuminate
If DC STBY BUS voltage is over 20V and at least one generator running, emergency lights will extinguish<li>DISARM When engines are stopped, normal position selector. Emergency lights system is inoperative.')" onMouseOut ="HideBulle()">
]</map>
</HTML>
Avec le deuxième script que j'ai trouvé et modifié dans le même sens, celui-ci fonctionne sous FIREFOX et IE, mais le comportement n'est pas le même.
Lorsque je déplace la souris sous les différentes zones actives situé à droite , la largeur de l'info-bulle dimunue, rendant la lecture de celui-ci dificille, voire incomplète.
function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}
function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+ "px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
-->
</script>
</HEAD>
../..
<map name="Map2">
NO SMKG Associated sign come on in the cabine associated with a single chime.
The \'No Smoking\' light illuminates blue in the memo panel.<li>OFF Associated sign and memo light are extinguised',this)">
SEAT BELTS Associated sign come on in the cabine associated with a single chime.
The \'Seat Belts\' light illuminates blue in the memo panel.<li>OFF Associated sign and memo light are extinguised',this)">
ON Emergency lights illuminate<li>ARM Normal selector position in operation
If DC STBY BUS voltage is below 18V or if the 2 generators are lost, emergency lights will illuminate
If DC STBY BUS voltage is over 20V and at least one generator running, emergency lights will extinguish<li>DISARM When engines are stopped, normal position selector. Emergency lights system is inoperative',this)">
</map>
</HTML>
Pour celui-ci j'ai rajouter au niveau du CSS la carte width: 200; , mais cela gêne la lisibilité des infos bulle se trouvant à droite, rendant certains caractères cachés pour des écran de petites tailles avec une résolution basique.
J'ai une préférence pour le premier scripte, mais toutes mes tentatives pour le faire fonctionner sous IE n'ont pas aboutit
En vous remerciant par avance pour vos réponses, à moins que vous ne connaissiez un scripte répondant à mes voeux.
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 26 mars 2008 à 19:10
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, J'ai une préférence pour le premier scripte,
mais toutes mes tentatives pour le faire fonctionner sous IE n'ont pas
aboutit</td>
</td></tr></tbody></table>il
semblerait que tu ais simplement oublié le # dans l'attribut usemap
remplaces
la ligne
par la ligne
Nota :
le script peut être considérablement simplifié en supprimant toutes les références à
document.layers ou document.all
;O)