begin process at 2012 05 29 10:16:25
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

Info-bulle avec usermap


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Info-bulle avec usermap

dimanche 23 mars 2008 à 18:42:44 | Info-bulle avec usermap

f1hgu
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 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>
<bobdy>
../..
<SCRIPT language="JavaScript">InitBulle("navy","#F6EDD9","#FFD79F",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)</SCRIPT>
../..
  <map name="Map2">
  <area shape="circle" coords="108,104,22" href="#" onMouseOver="AffBulle('<b>NO SMOKING SWITCH</b><li><b>NO SMKG</b><br> Associated sign come on in the cabine associated with a single chime.<br>The \'No Smoking\' light illuminates blue in the memo panel.<li><b>OFF</b><br>Associated sign and memo light are extinguised')" onMouseOut="HideBulle()">
  <area shape="circle" coords="213,104,22" href="#" onMouseOver="AffBulle('<b>SEAT BELTS SWITCH</b><li><b>SEAT BELTS</b><br>Associated sign come on in the cabine associated with a single chime.<br>The \'Seat Belts\' light illuminates blue in the memo panel.<li><b>OFF</b><br>Associated sign and memo light are extinguised')" onMouseOut="HideBulle()">
  <area shape="circle" coords="342,105,40" href="#" onMouseOver="AffBulle('<b>EMERGENCY EXIT LIGHT SELECTOR</b><li><b>ON</b><br>Emergency lights illuminate<li><b>ARM</b><br>Normal selector position in operation<br>If DC STBY BUS voltage is below 18V or if the 2 generators are lost, emergency lights will illuminate<br>If DC STBY BUS voltage is over 20V and at least one generator running, emergency lights will extinguish<li><b>DISARM</b><br>When engines are stopped, normal position selector. Emergency lights system is inoperative.')" onMouseOut="HideBulle()">
  <area shape="rect" coords="428,91,498,128" href="#" onMouseOver="AffBulle('<b>DISARM LIGHT</b><br>When the emergency light system is desactivated illuminated amber')" onMouseOut="HideBulle()"></map>
</BODY></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>
<BODY>
../..
  <map name="Map2">
  <area shape="circle" coords="108,104,22" onmouseover="toolTip('<b>NO SMOKING SWITCH</b><br><br><li><b>NO SMKG</b><br>Associated sign come on in the cabine associated with a single chime.<br>The \'No Smoking\' light illuminates blue in the memo panel.<li><b>OFF</b><br>Associated sign and memo light are extinguised',this)">
  <area shape="circle" coords="213,104,22" onmouseover="toolTip('<b>SEAT BELTS SWITCH</b><br><br><li><b>SEAT BELTS</b><br>Associated sign come on in the cabine associated with a single chime.<br>The \'Seat Belts\' light illuminates blue in the memo panel.<li><b>OFF</b><br>Associated sign and memo light are extinguised',this)">
  <area shape="circle" coords="342,105,40" onMouseOver="toolTip('<b>EMERGENCY EXIT LIGHT SELECTOR</b><br><br><li><b>ON</b><br>Emergency lights illuminate<li><b>ARM</b><br>Normal selector position in operation<br>If DC STBY BUS voltage is below 18V or if the 2 generators are lost, emergency lights will illuminate<br>If DC STBY BUS voltage is over 20V and at least one generator running, emergency lights will extinguish<li><b>DISARM</b><br>When engines are stopped, normal position selector. Emergency lights system is inoperative',this)">
  <area shape="rect" coords="428,91,498,128" onMouseOver="toolTip('<b>DISARM LIGHT</b><br>When the emergency light system is desactivated illuminated amber',this)"></map>
</BODY></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
mercredi 26 mars 2008 à 19:10:28 | Re : Info-bulle avec usermap

PetoleTeam

Membre Club
Bonjour,
J'ai une préférence pour le premier scripte, mais toutes mes tentatives pour le faire fonctionner sous IE n'ont pas aboutit
il semblerait que tu ais simplement oublié le # dans l'attribut usemap
remplaces la ligne
<img src="panel/overhead/sign.jpg" width="583" height="171" usemap="map2" border="0">
par la ligne
<img src="panel/overhead/sign.jpg" width="583" height="171" usemap="#map2" border="0">

Nota :
le script peut être considérablement simplifié en supprimant toutes les références à document.layers ou document.all
;O)
vendredi 11 avril 2008 à 15:30:24 | Re : Info-bulle avec usermap

f1hgu

Merci pour votre réponse
Effectivement j'avais oublié le #, que j'avais trouvé quelques jours après l'envoi du post

Philippe
vendredi 11 avril 2008 à 16:04:32 | Re : Info-bulle avec usermap

PetoleTeam

Membre Club
Bonjour,
Merci du retour même tardif il faut mieux que pas de retour du tout
Bonne continuation...
;O)


Cette discussion est classée dans : style, document, bulle, getelementbyid, if

Répondre à ce message

Sujets en rapport avec ce message

un javascript en cache un autre [ par cousinlol ] Bonjour,Assez nul en javascript, j'apprécie beaucoup les script que je trouves et que j'adapte ensuite à mon environnement. Cela me permet aussi petit Pb avec un script info bulle [ par ard123 ] Bonjour, J'ai mis en place un script infos bulle (téléchargé sur http://www.toutjavascript.com/main/index.php3), ca marche nickel (texte ou image). Je Comment puis-je améliorer ce script ??? [ par nanti ] Bonjour à tous !Tout d'abord, j'espère être dans le bon thème... !?Comme annoncer, je souhaite améliorer ces scripts pour n'en faire qu'un qui soit op probleme controle de saisie avec du javascript dans un formulaire html.php [ par suethi75 ] BonjourJe controle les champs obligatoires dans mon formulaire cependant cela ne marche pas.Voici mon code javascript: function verifForm(){  if (docu verifier un email avec onblur [ par arradakram ] bonjoursdabord j'ai un projet de verification d'un formulaire d'inscription, et j'ai un tout petit prob:la verification des champs se fait en cours al unterminated string literal [ par kangun ] Bonjour. je me tourne vers vous suite à un problème apparut sur un java script. en effet, je souhaite afficher une bulle au dessus d'une image et chan Problème avec la position du curseur sur IE [ par Aeres ] Bonjour j'ai un petit soucis sous IE [^^sad2] je voudrais faire apparaitre une bulle d'infos à la position de la souris mais event.x semble dépendre d pb avec un formulaire select [ par ahah38 ] Bonjour, J'ai besoin d'aide sur un formulaire select. Je souhaite réaliser un carnet de route en utilisant un formulaire select. Les visiteurs pourron Commande Onclick agrandir image + afficher du texte [ par pharen ] bonjour à tous je souhaite réaliser une gallery photos ainsi les photos sont sur la page en petite taille. je click sur une photo et elle s'agrandit compatibilité javascript [ par camellion2 ] Bonjour a tous, Je suis novice en programmation et je me suis fait un petit site web pour me simplifier la vie au taf. Le problême c'est qu'au bureau


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,137 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)