Rollover qui s'affiche si la souris reste fixe

Version imprimable

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.

non, non tu n'as pas à dupliquer le 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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<html>
 
<head>
 
<title></title>
 
 
<script type="text/javascript">
<!--
var timerMove = null;
var timerOver = null;
var timerEfface = null;
var idElement;
var texteAffiche;
 
function afficheTexte()
{
  document.getElementById(idElement).innerHTML = texteAffiche;
  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, texte)
{
  idElement = monElement;
  texteAffiche = texte;
  
  // 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;
  }
} 
 
//-->
</script>
 
</head>
 
<body>
 
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque', '11111')" onmouseout="linkOut('monCalque')"> ? texte 1</a><br />
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque', '22222')" onmouseout="linkOut('monCalque')"> ? texte 2</a><br />
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque', '33333')" onmouseout="linkOut('monCalque')"> ? texte 3</a><br />
<a class="MsoNormal" style="font-size: 11pt;" onmousemove="linkMove('monCalque', '44444')" onmouseout="linkOut('monCalque')"> ? texte 4</a><br />
 
 
<div id="monCalque"></div>
 
 
</body>
 
</html>

j'ai créé la variable texteAffiche et ajouté un paramètre à la fonction linkMove(). La syntaxe est la suivante :
function linkMove(monElement, texte) :
:fleche: monElement : id du calque où sera affiché le contenu de texte ;
:fleche: texte : texte affiché dans le calque.

Code:

1
2
 
<a class="MsoNormal" style="font-size: 11pt;" onmouseout="linkOut('idCalque')" onmousemove="linkMove('idCalque','texte_à_afficher_dans_le_calque')"> ? texte 2</a><br />

Par contre 3 secondes d'attente avant l'affichage du message c'est un peu long surtout que la fonction est appelée 1 seconde après l'arrêt de la souris :?

20/06/2008, 10h11
zaldiko

Merci pour le code, ce sera beaucoup plus pratique comme ça pour faire plusieurs lignes. J'ai testé le code sur mon site en ligne, il marche bien mais il y a encore un petit bug.
Lorsqu'on survole la ligne le texte apparaît correctement par contre si on passe d'une ligne à l'autre le texte ne disparaît pas, il faut repasser sur la ligne pour qu'il disparaisse.
Vous pouvez trouver l'animation à cette adresse :
http://temp.fidanza-audit.fr/index.p...d=14&Itemid=29
J'ai aussi réduit le temps d'affichage, c'était effectivement un peu long 3 secondes.
20/06/2008, 12h11
Auteur

ah je croyais que l'affichage se ferait toujours dans le même calque...

Laisse moi un peu de temps que je revoie le code ;)

Voici le code corrigé. J'ai même corrigé le bug dont j'avais parlé précédemment.

Ce code utilise plusieurs calques :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<html>
 
<head>
 
<title></title>
 
 
<style type="text/css">
<!--
.informations{
  display: none;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var timerMove = null;
var timerOver = null;
var timerEfface = null;
var calque = null;
 
 
function afficheTexte()
{
  document.getElementById(calque).style.display = "block";
  timerOver = null;
}
 
function attente()
{
  timerOver = setTimeout("afficheTexte()","1500");
  timerMove = null;
}
 
function effaceTexte()
{
  document.getElementById(calque).style.display = "none";
  timerEfface = null;
}
 
function linkMove(idCalque)
{ 
  // on force l'effacement du texte si nécessaire
  if (timerEfface!=null)
  {
    clearTimeout(timerEfface);
    effaceTexte();
  }
 
  // on stoppe l'exécution de la fonction attente
  if (timerMove!=null)
  {
    clearTimeout(timerMove);
    timerMove = null;
  }
 
  calque = idCalque;
  
  // on relance le timer de la fonction attente
  if (timerMove==null)
  {
    timerMove = setTimeout("attente()","1000");
  }  
} 
 
 
function linkOut(idCalque)
{
  calque = idCalque;
  
  timerEfface = setTimeout("effaceTexte()","3000");
  
  if (timerMove!=null)
  {
    clearTimeout(timerMove);
    timerMove = null;
  }
  if (timerOver!=null)  
  {
    clearTimeout(timerOver);
    timerOver = null;
  }
}
//-->
</script>
 
</head>
 
<body>
 
<span onmousemove="linkMove('calque1')" onmouseover="linkOver()" onmouseout="linkOut('calque1')">texte 1</span><br/>
<div id="calque1" class="informations">
voici le contenu du paragraphe 1
</div>
 
<span onmousemove="linkMove('calque2')" onmouseout="linkOut('calque2')">texte 2</span><br/>
<div id="calque2" class="informations">
------------ voici le contenu du paragraphe 2 ---------------------
</div>
 
<span onmousemove="linkMove('calque3')" onmouseout="linkOut('calque3')">texte 3</span><br/>
<div id="calque3" class="informations">
voici le contenu du paragraphe 3
</div>
 
 
</body>
 
</html>

J'ai mis une attente de 1500ms (fonction attente()) avant affichage du texte.

J'ai laissé la durée d'affichage à 3 secondes. Ce délai est réduit si la souris passe sur un autre texte.

Comme tu utilises plusieurs calques, le texte à afficher est directement dans le calque que j'affiche ou je cache avec la propriété display.

20/06/2008, 19h48
zaldiko

Je te remercie pour ce code, je viens de le tester en ligne sur mon site et il est parfait.
Tout fonctionne parfaitement.:king:
20/06/2008, 20h25
Bovino

Si je peux me permettre une remarque : j'ai regardé le résultat sur ton site et il me semble qu'il y a un soucis :
pourquoi tiens-tu absolument à afficher le texte dans un layer différent ??? Ca pose des problèmes de survol (ben oui, quand tu es sur un élément et que le texte du dessus disparait, la page bouge, tu n'es plus au même endroit et c'est agaçant).
Sincèrement, je pense que la solution précédente de Auteur était plus ergonomique pour un site...