Rollover qui s'affiche si la souris reste fixe

**zaldiko** · 19/06/2008, 13h28

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 :

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
<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.

**le_chomeur** · 19/06/2008, 13h37

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

**zaldiko** · 19/06/2008, 13h43

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.

**Bovino** · 19/06/2008, 13h50

Code :

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

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>

**Bovino** · 19/06/2008, 13h56

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.

**Bovino** · 19/06/2008, 14h01

Code :

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

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>

**zaldiko** · 19/06/2008, 14h13

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 :

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

var timer = null;

**Bovino** · 19/06/2008, 14h28

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...

**Auteur** · 19/06/2008, 14h43

bonjour,

Essaye ceci...

Dans le code Javascript :

Code javascript :

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
 
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 html :

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

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).

**zaldiko** · 19/06/2008, 14h51

Je viens d'essayer le code, mais il ne fonctionne pas, le texte 2 n'apparait pas.

**Auteur** · 19/06/2008, 14h52

montre moi ton code

**zaldiko** · 19/06/2008, 14h54

voila mon code :

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
<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>

**Auteur** · 19/06/2008, 14h55

dans le code que tu as posté, il en manque les 2/3

: les fonctions linkMove et linkOut

[edit]je crois également qu'il y un bug

[/edit]

**zaldiko** · 19/06/2008, 15h09

oups désolé

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?

**Auteur** · 19/06/2008, 15h17

Envoyé par zaldiko

oups désolé

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

. 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).

**zaldiko** · 19/06/2008, 15h55

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.

**Auteur** · 19/06/2008, 16h03

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

Code javascript :

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
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 html :

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

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.

**zaldiko** · 19/06/2008, 16h20

Ok, le code fonctionne parfaitement. Je te remercie de ton aide.

**Auteur** · 19/06/2008, 16h39

si je peux corriger le bug, je posterai le code corrigé

**zaldiko** · 19/06/2008, 17h06

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.

Rollover qui s'affiche si la souris reste fixe

JavaScript

Discussions similaires

Partager

Partager