Rollover qui s'affiche si la souris reste fixe

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,
J'ai créer grâce au forum un code de rollover pour du texte. Quand la souris passe sur le texte 1, le texte 2 apparaît en dessous au bout de 3 secondes. Le code fonctionne bien, mais je voudrais rajouter une condition à ce code qui permettrait que le rollover ne s'active que si la souris reste sur le texte 1 au moins une seconde. Car dans ma page, j'aurais plusieurs textes avec cet effet et si la souris passe sur les différents textes même sans s'arrêter, tout les texte en rollover s'affiche.
Est ce possible et quel fonction permet de faire cela.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <head> <script language="javascript"> function linkover(monElement){ var obj = document.getElementById(monElement); var text=(obj.innerHTML.length>1?'':'<em>texte2</em>'); setTimeout(function(){obj.innerHTML=text},3000) } </script> </head> <body> <a class="MsoNormal" style="font-size: 11pt;" onmouseover="linkover('monCalque')" onmouseout="linkover('monCalque')"> ? texte 1</a><br /> <div id="monCalque"></div> </body>
Merci de votre aide.

19/06/2008, 13h37
le_chomeur

il faut que tu ajoutes une variable de condition :

- rollover = déclenchement d'une tempo de 1 secondes si 1 secondes atteint alors tu lances l'affichage du texte
- si out = stop du timer et donc non déclenchement de la méthode qui permet d'afficher :)
19/06/2008, 13h43
zaldiko

Merci de la réponse. Mais je suis novice et c'est même mon premier code en javascript. Pourrait tu m'indiquer quelle variable de condition permet de faire cela .
En te remerçiant de ton aide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript">
var timer = null;
function linkover(monElement){
if(!timer){
var obj = document.getElementById(monElement);
var text=(obj.innerHTML.length>1?'':'<em>texte2</em>');
timer = setTimeout(function(){obj.innerHTML=text},3000)
}
else{timer = null}
}
 
</script>

19/06/2008, 13h56
Bovino

Oops... ça va pas marcher, j'ai pas pris en compte que le timer se déclenche dans les deux cas... (mouseover ET mouseout) ma solution fonctionne qu'avec le timer sur mouseover et pas sur mouseout.

Code:

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript">
var timer = null;
function linkover(monElement){
if(!timer){
var obj = document.getElementById(monElement);
obj.innerHTML.length>1?setTimeout(function(){obj.innerHTML=' '},3000):timer = setTimeout(function(){obj.innerHTML='<em>texte2</em>'},3000);
}
else{clearTimeout(timer)}
}
 
</script>

19/06/2008, 14h13
zaldiko

Bonjour Bovino,

A nouveau merci de ton aide. Dans le code que tu m'a donné, le texte 2 apparait même si la souris ne reste pas sur le texte 1. Comment faire pour régler la durée du timer, n'est ce pas dans la ligne :

Code:

var timer = null;
19/06/2008, 14h28
Bovino

La durée du timer est réglée dans la fonction setTimeout, c'est le 3000 (valeur en millisecondes), la variable timer sert à créer puis éventuellement couper le décompte... Je regarderais plus tard ce qui ne va pas (à moins que quelqu'un trouve d'ici là !) car là, j'ai pas trop le temps en fait... du coup, je vais trop vite et ça marche pas...

Et... désolé, j'ai un peu modifié mon code, timer=null, c'est pas bon...

bonjour,

Essaye ceci...

Dans le code Javascript :

Code:

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
 
var timerMove = null;
var timerOver = null;
var idElement;
 
function afficheTexte()
{
  document.getElementById(idElement).innerHTML = "texte 2";
  timerOver = null;
}
 
function attente3s()
{
  timerOver = setTimeout("afficheTexte()","3000");
  timerMove = null;
}
 
function linkOut(monElement)
{
  document.getElementById(monElement).innerHTML="";
  if (timerMove!=null)
  {
    clearTimeout(timerMove);
    timerMove = null;
  }
  if (timerOver!=null)  
  {
    clearTimeout(timerOver);
    timerOver = null;
  }
}
 
function linkMove(monElement)
{
  idElement = monElement;
 
  if (timerMove==null)
  {
    timerMove = setTimeout("attente3s()","1000");
  }
  else
  {
    linkOut(monElement);
  }
}

puis dans ta page HTML :

Code:

1
2
3
4
5
 
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque')" onmouseout="linkOut('monCalque')"> ? texte 1</a><br />
 
 
<div id="monCalque"></div>

j'utilise les événements onmousemove() et onmouseout(), j'ai supprimé onmouseover qui devenait inutile (remplacé par onmousemove).

19/06/2008, 14h51
zaldiko

Je viens d'essayer le code, mais il ne fonctionne pas, le texte 2 n'apparait pas.
19/06/2008, 14h52
Auteur

montre moi ton code ;)

voila mon code :

Code:

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript">
var timerMove = null;
var timerOver = null;
var idElement;
 
function afficheTexte()
{
  document.getElementById(idElement).innerHTML = "texte 2";
  timerOver = null;
}
 
function attente3s()
{
  timerOver = setTimeout("afficheTexte()","3000");
  timerMove = null;
}
</script>
</head>
 
<body>
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque')" onmouseout="linkOut('monCalque')"> ? texte 1</a><br />
 
 
<div id="monCalque"></div>
</body>

19/06/2008, 14h55
Auteur

dans le code que tu as posté, il en manque les 2/3 :D : les fonctions linkMove et linkOut

[edit]je crois également qu'il y un bug :oops:[/edit]
19/06/2008, 15h09
zaldiko

oups désolé:oops: j'avais pas déroulé l'ascenceur.
Il fonctionne bien, mais quand la souris quitte le texte 1 le texte 2 disparait de suite. Est-il possible qu'il reste affiché également 3 secondes avant de disparaitre?
19/06/2008, 15h17
Auteur

Citation:

Envoyé par zaldiko

oups désolé:oops: j'avais pas déroulé l'ascenceur.
Il fonctionne bien, mais quand la souris quitte le texte 1 le texte 2 disparait de suite. Est-il possible qu'il reste affiché également 3 secondes avant de disparaitre?

oui ça doit être faisable :aie:. Mais avant il faut régler le bug que j'ai trouvé : quand tu déplaces la souris sur texte puis que tu t'arrêtes, le second texte n'apparait pas toujours (un problème de gestion des timer).
19/06/2008, 15h55
zaldiko

Oui tu as raison, il y a un petit bug, je ne l'avais pas vu la premiére fois que j'ai testé. Merci de ton aide.

avec un délai de 3 secondes avant la suppression du message :

Code:

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
56
57
58
59
60
61
 
var timerMove = null;
var timerOver = null;
var timerEfface = null;
var idElement;
 
function afficheTexte()
{
  document.getElementById(idElement).innerHTML = "texte 2";
  timerOver = null;
}
 
function attente3s()
{
  timerOver = setTimeout("afficheTexte()","3000");
  timerMove = null;
}
 
function effaceTexte()
{
  document.getElementById(idElement).innerHTML="";
  timerEfface = null;
} 
 
function linkOut(monElement)
{
  timerEfface = setTimeout("effaceTexte()","3000");
 
  if (timerMove!=null)
  {
    clearTimeout(timerMove);
    timerMove = null;
  }
  if (timerOver!=null)  
  {
    clearTimeout(timerOver);
    timerOver = null;
  }
}
 
function linkMove(monElement)
{
  idElement = monElement;
 
  // on force l'effacement du texte si nécessaire
  if (timerEfface!=null)
  {
    clearTimeout(timerEfface);
    effaceTexte();
  }
 
  if (timerMove==null)
  {
    timerMove = setTimeout("attente3s()","1000");
  }
  else
  {
    clearTimeout(timerMove);
    timerMove = null;
  }
}

le code HTML n'a pas changé :

Code:

1
2
3
4
5
 
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque')" onmouseout="linkOut('monCalque')"> ? texte 1</a><br />
 
 
<div id="monCalque"></div>

Il y a toujours ce petit bug. J'ai compris pourquoi il se produisait, mais pour l'instant je ne vois pas comment le supprimer.

19/06/2008, 16h20
zaldiko

Ok, le code fonctionne parfaitement. Je te remercie de ton aide.:king:
19/06/2008, 16h39
Auteur

si je peux corriger le bug, je posterai le code corrigé ;)
19/06/2008, 17h06
zaldiko

Ok merci. Par contre, je souhaite dupliquer le code pour avoir plusieurs lignes avec l'effet rollover. Je suis obligé de dupliquer tout le code en rajoutant apres les noms des fonctions un "1" par exemple ou existe t-il un moyen de ne dupliquer que la fonction function afficheTexte() et de l'appeler dans le code html.

Voir 40 message(s) de cette discussion en une page