Discussion :

[Micke7]

Bonjour,

Le code ci-dessous ne fonctionne pas sous firefox et moyennement sous Opera. Il arrive même qu'il buggue sous IE.

J'aimerais donc savoir si quelqu'un pouvait m'aider à l'améliorer afin que celui soit supporté de maniére optimale par au moins ces 3 navigateurs.

Le but de ce code est d'afficher à coté du curseur, le profil de la personne que l'utilisateur survole.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
function GetId(id)
{
  return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si le profil est visible ou non
 
function move(e) {
  if(i) {  // Si le profil est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
      GetId("profil_survol").style.left=e.pageX + 5+"px";
      GetId("profil_survol").style.top=e.pageY + 10 +"px";
    }
    else { 
      if(document.documentElement.clientWidth>0) {
        GetId("profil_survol").style.left=event.x+document.documentElement.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.documentElement.scrollTop+10+"px";
      } 
      else {
        GetId("profil_survol").style.left=event.x+document.body.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.body.scrollTop+10+"px"; 
      }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("profil_survol").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("profil_survol").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
 
function changeProfil(id_profil){
  if (id_profil==0){
    document.getElementById("profil_survol").innerHTML = "";
  }
  else{
    xhr = new XMLHttpRequest();
    xhr.open("get", "http://dunksession.free.fr/test.php?id_dunkeur=" + id_profil, false);
    xhr.send(null);
    montre(xhr.responseText);
  }
}
 
function cache() {
  if(i==true) {
    GetId("profil_survol").style.visibility="hidden"; // Si le profil est visible on la cache
    i=false;
  }
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position du profil.

Coté HTML cela donne ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="index.php?page=profil.php&profil=<?php echo $donneesprof['id_profil']  ?>'" onmouseover="changeProfil(<?php echo $donneesprof['id_profil']  ?>);" onmouseout="cache();"><?php echo $pseudo_d ;?></a><br />
      <div id="profil_survol"></div>

Merci.

[Orvinfait]

function move(e) et document.onmousemove=move;??

Dans ce dernier cas (e) = ?

[Micke7]

Ce code est un source que j'ai adapté pour mes besoins, et je dois avouer que cette derniére ligne me laisse aussi perplexe.

[Orvinfait]

Le problème ne vient pas de là. Comme j'utilise Javascript avec SVG un tel code ne passe pas d'où ma remarque erronée. Par contre en SVG il n'y a pas besoin de détecter le navigateur.

En Html il faut que tu adaptes ton code suivant le navigateur voir :

http://www.webdeveloper.com/forum/ar...p/t-90611.html

[Micke7]

Pourtant la gestion du navigateur est fait avec le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (navigator.appName!="Microsoft Internet Explorer")

.
D'ailleurs le code fonctionne avec opéra.

J'avoue être perdu là...

[Orvinfait]

Il doit falloir ajouter e = window.event;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
function GetId(id)
{
  return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si le profil est visible ou non
 
function move(e) {
  if(i) {  // Si le profil est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
      e = window.event;
      GetId("profil_survol").style.left=e.pageX + 5+"px";
      GetId("profil_survol").style.top=e.pageY + 10 +"px";
    }
    else { 
      if(document.documentElement.clientWidth>0) {
        GetId("profil_survol").style.left=event.x+document.documentElement.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.documentElement.scrollTop+10+"px";
      } 
      else {
        GetId("profil_survol").style.left=event.x+document.body.scrollLeft+5+"px";
        GetId("profil_survol").style.top=event.y+document.body.scrollTop+10+"px"; 
      }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("profil_survol").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("profil_survol").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
 
function changeProfil(id_profil){
  if (id_profil==0){
    document.getElementById("profil_survol").innerHTML = "";
  }
  else{
    xhr = new XMLHttpRequest();
    xhr.open("get", "http://dunksession.free.fr/test.php?id_dunkeur=" + id_profil, false);
    xhr.send(null);
    montre(xhr.responseText);
  }
}
 
function cache() {
  if(i==true) {
    GetId("profil_survol").style.visibility="hidden"; // Si le profil est visible on la cache
    i=false;
  }
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position du profil.

Coté HTML cela donne ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="index.php?page=profil.php&profil=<?php echo $donneesprof['id_profil']  ?>'" onmouseover="changeProfil(<?php echo $donneesprof['id_profil']  ?>);" onmouseout="cache();"><?php echo $pseudo_d ;?></a><br />
      <div id="profil_survol"></div>

[Micke7]

J'ai trouvé exactement ce qu'il me faut. Pour cela il faut que j'utilise jquery et plus particuliérement un plugin nommé cluetip.

L'exemple se situe sur cette page, c'est le numéro 9.

Par contre je ne vosi pas du tout comment l'utiliser, donc si quelqu'un pouvait m'expliquer ça serait parfait !

Merci beaucoup