info bulle js

Bonjour,

J'ai récupéré un script "merci TeDeum" pour créer des info bulle en js
Trés sympa mais j'ai un bug sur ie.

Le script :

<script language="javascript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e) {
  if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
    }
    else { // Modif propose par TeDeum, merci
    if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    } else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
         }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; //  la souris bouge, on appelle la fonction move pour mettre a  jour la position de la bulle.
//-->
</script>

Html :

<img src="images/puce-prest.png" alt="prestation" width="24" height="37" /><span class="plandesite"><a href="#" onmouseover="montre('De tous vos systèmes ');" onmouseout="cache();" class="info-bulle"> Maintenance.</a></span><br/>

Css :

.infobulle{
    position: absolute;
    visibility : hidden;
    border: 1px dotted #cccccc;
    padding: 10px;
    font-family: Verdana, Arial;
    font-size: 10px;
    background-color: #7eafdd;
    z-index: 100;
    opacity: 0.9;
    moz-opacity : 0.9;
    khtml-opacity : 0.9;
    filter : alpha(opacity=90);
    color: #666666;
    font-weight: bold;
}


Je pense que le pb se situe ici :
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";

J'ai essayé de faire des modifications masi je ne suis pas arrivée au bon résultat.

Je voudrais que mes infos bulles soit placées juste en dessous et à droite de mes liens.

Quelqu'un serait il assez aimable pour m'expliquer comment faire?

Merci merci...

misskiss

bonjour,

__ pourquoi un test pour faire la même chose ?
ou je lis mal ?

                if(document.documentElement.clientWidth>0)
                        {   GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
                            GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
                        }
                else   {   GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
                            GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
                        }

__ pourquoi pas les mêmes valeurs qu'avec FF ?

             GetId("curseur").style.left=e.pageX + 5+"px";
            GetId("curseur").style.top=e.pageY + 10+"px";

function move(e)
{   if(i)
    {  if (navigator.appName!="Microsoft Internet Explorer")
            {     GetId("curseur").style.left=e.pageX + 5+"px";
                  GetId("curseur").style.top=e.pageY + 10+"px";
           }
    else {     GetId("curseur").style.left=event.x+document.body.scrollLeft+5+"px";
                GetId("curseur").style.top=event.y+document.body.scrollTop+10+"px";
            }
   }
}


après faut voir plus loin si nécessaire....

Cordialement

Bul [mon Site] [M'écrire]

merci pour cette aide
Voila ce que j'ai fait grâce à toi

if(i)
    {  if (navigator.appName!="Microsoft Internet Explorer")
            {     GetId("curseur").style.left=e.pageX + 5+"px";
                  GetId("curseur").style.top=e.pageY + 10+"px";
           }
    else {     GetId("curseur").style.left=event.x+document.body.scrollLeft+280+"px";
                GetId("curseur").style.top=event.y+document.body.scrollTop+400+"px";
            }
   }

Bon j ai du coup un autre bug lol

mes info bull sont z-index:100px;

j ai un anim flash (un swobject ) et les infos bulles passent dessous

j ai eesayé de mettre le flashcontent en z-index:50px; mais ca ne fonctionne pas

as tu une idée ?

merci beaucoup ds tous les cas !!!

misskiss

z_index=100
sans px

les navigateurs avec le moteur Gecko ( au moins ) doivent te signaler une erreur
IE doit purement et simplement ignorer

Chrome	controler la page actuelle Options pour les développeurs Console Javascript
FireFox	regarder la "console d'erreurs" Outils / Console d'erreurs et mieux : télécharger FireBug
Internet Explorer	activer le deboggage : Outils/options Internet/Avancés dans la liste, sous "Navigation" : décocher o Afficher une notification de chaque erreur de script o Désactiver le débogage de Scripts (Internet Explorer) et mieux : télécharger le Debogger IE voir aussi : DebugBar et Companion JS
K-Meleon	regarder la "console d'erreurs" Outils / Console d'erreurs
Opera	regarder la "console d'erreurs" Outils / Avancé / Console d'erreurs
Safari	regarder Debug / Show JavaScript Console ° modifier Fichier Preferences.plist situé dans le répertoire : Support:\Documents and Settings\utilisateur \Application Data\Apple Computer\Safari\ y ajouter <key>IncludeDebugMenu</key> <true/>

Bul [mon Site]  [M'écrire]

Bonjour à tous,

j ai un anim flash (un swobject ) et les infos bulles passent dessous

il te faut mettre
pour les OBJECT
<param name = "wmode" value = "transparent">
et pour les EMBED
wmode = "transparent"
dans les balises...
...pas regardé le reste...
;O)

Merci j'ai bidouller pour que mes infos bulle ne passent pas sur mon flash.
Avant d opter pour cette option, j'ai enregistré mon .swf avec un wmode transparent mais cela n a rien donné de bien.
J'ai essayé d enregistrer mon

Voilou mon html ou j insere mon flash

y a t il une solution pour cemode de publication ?

<div id="flashcontent3">  
</div>
<script type="text/javascript">


var so = new SWFObject("anim.swf", "sotester", "260", "260", "7", "");
so.addVariable("flashVarText", "this is passed in via FlashVars"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent3");

//
</script>

merci bcp à vous deux...Petoleteam et Bul !!!!
Ce site est vraiment terrible y a toujours qq un d aimable pour répondre à mes questions....

j'ai enregistré mon .swf avec un wmode transparent

ce que te propose est de mettre le paramètre wmode à transparent en ajoutant, d'après la doc ADOBE
so.addParam("wmode", "transparent");
c'est la ...
http://wiki.mediabox.fr/documentation/swfobject#un_exemple_simple_ajoutant_quelques_parametres_supplementaires
;O)