Info-bulle avec usermap

f1hgu
Messages postés
2
Date d'inscription
mardi 11 décembre 2007
Statut
Membre
Dernière intervention
11 avril 2008
- 23 mars 2008 à 18:42
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 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>&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("

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

Vous trouverez à cette adresse l'ensemble du code http://www.propandjet.net/test/atr72_signs.htm

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.

Voici un extrait

<HTML>
<HEAD>
../..
<style type="text/css">
<!--
#toolTipBox {
    display: none;
    padding: 1;
    font-size: 12px;
    border: #FFD79F solid 2px;
    font-family: verdana;
    position: absolute;
        text-align: left;
        background-color: #F6EDD9;
        color: navy;
    z-index: 100;
}
-->
</style>
<script type="text/javascript">
<!--
var theObj="";

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>




Vous trouverez à cette adresse l'ensemble du code http://www.propandjet.net/test/atr72_signs_bis.htm

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.

Cordialement
Philippe

3 réponses

PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
0
f1hgu
Messages postés
2
Date d'inscription
mardi 11 décembre 2007
Statut
Membre
Dernière intervention
11 avril 2008

11 avril 2008 à 15:30
Merci pour votre réponse
Effectivement j'avais oublié le #, que j'avais trouvé quelques jours après l'envoi du post


Philippe
0
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
11 avril 2008 à 16:04
Bonjour,
Merci du retour même tardif il faut mieux
que pas de retour du tout
Bonne continuation...
;O)
0