Rollover qui s'affiche si la souris reste fixe

**Auteur** · 19/06/2008, 20h16

non, non tu n'as pas à dupliquer le code :

Code html :

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

monElement : id du calque où sera affiché le contenu de texte ;

texte : texte affiché dans le calque.

Code html :

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

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

**zaldiko** · 20/06/2008, 10h11

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.

**Auteur** · 20/06/2008, 12h11

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

**Auteur** · 20/06/2008, 19h01

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

Ce code utilise plusieurs calques :

Code html :

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

**zaldiko** · 20/06/2008, 19h48

Je te remercie pour ce code, je viens de le tester en ligne sur mon site et il est parfait.
Tout fonctionne parfaitement.

**Bovino** · 20/06/2008, 20h25

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

Rollover qui s'affiche si la souris reste fixe

JavaScript

Discussions similaires

Partager

Partager