Sujet Précédent Sujet Suivant

Info bulle js

misskis Messages postés 16 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 17 octobre 2008 - 16 oct. 2008 à 16:21
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 17 oct. 2008 à 17:23
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 :

[# Maintenance.]
>

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

6 réponses

Réponse 1 / 6
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
16 oct. 2008 à 16:33
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]         
0
Réponse 2 / 6
misskis Messages postés 16 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 17 octobre 2008
16 oct. 2008 à 20:46
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
0
Réponse 3 / 6
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
17 oct. 2008 à 08:36
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 mon Site]  [M'écrire]  
0
Réponse 4 / 6
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 oct. 2008 à 15:44
Bonjour à tous,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, j ai un anim flash (un swobject ) et les infos
bulles passent
dessous</td>
</td></tr></tbody></table>il te faut
mettre
pour les OBJECT

et pour les EMBED

wmode = "transparent"
dans les balises...
...pas regardé le reste...
;O)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
misskis Messages postés 16 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 17 octobre 2008
17 oct. 2008 à 17:15
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 ?





<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....
0
Réponse 6 / 6
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 oct. 2008 à 17:23
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">

----,

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

</td>

</td>
</tr>
</tbody>
</table>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)
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
la division en java
cs_aliomar -
KIRAIII -

3 réponses
condition PHP => fonction JS
xactise -
pcgpegase -

1 réponse
Division entière et décimale
Wenlix -
Whismeril -

1 réponse
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Rejoignez-nous