Faire défiler un texte au passage de la souris

**krolineeee** · 01/06/2006, 18h11

Bonjour,

Voilà j'ai pour but d'afficher une ligne dans un tableau d'une largeur prédéfinie, de 150px par exemple, mon texte ne doit pas aller à la ligne, par contre, lorsque l'on passe la souris dessus, j'aimerai faire défiler le texte pour qu'on puisse tout lire, cette option se désactiverait quand on retirerai la souris bien entendu...

Pour l'instant je patoge un peu et ce n'est pas concluant mais voici mes fonctions :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var contenu;
function defile_text(id){
    var obj = document.getElementById(id);
    contenu = obj.innerHTML;
    obj.innerHTML = '<font color=white><marquee style="font-size:14px;color:#FFFFFF;" width=150 LOOP=-1>'
    +contenu+'</marquee></font>'; 
}
function fige_text(id){
    var obj = document.getElementById(id);
    obj.innerHTML = contenu;
    contenu='';
}

et une ligne de code html pour l'appel des fonctions :

Code :

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

1
2
3
4
5
 
<div style='width:150px;height:18px;overflow-y:hidden;overflow-x:hidden;' id='LSTXLS' 
onMouseOver='defile_text(this.id);' onMouseOut='fige_text(this.id);'>
Voiciiiii une longuuuuuuueeeeee lignnnnnnnnnnnnnnneeeeeeeeeeeeeeeeeee
</div>

Si quelqu'un a une petite idée, qu'il pense à moi

Merci d'avance

**krolineeee** · 02/06/2006, 15h31

Personne n'a d'idée?
ça n'arrange point mes affaires ça

**Auteur** · 02/06/2006, 19h24

bonjour,

j'ai essayé ton script. J'ai tenté de l'améliorer sans succès (tu as oublié certains paramètres de la balise marquee : scrolldelay, behavior, scrollamount, etc..).

Je te propose une alternative, ce n'est pas le top mais c'est déjà ça :

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
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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
div{
overflow: hidden;
width: 200px;
}
table td{
border: 2px solid #AAAAAA;
padding: 5px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
 
var depart, pos, W, chrono=null, elmtScroll=null, over=false, pas=2;
var tpsPause=2000;  /*en ms */
var tps=50;         /*en ms */
function pause() /*Pause avant un nouveau depart*/
{
  pos = depart;
  chrono = setInterval("scrollTxt()",tps);
}
 
function scrollTxt() /*Defilement */
{
  pos=pos+pas;
  elmtScroll.scrollLeft = pos;
  if (pos>=W) /*stop défilement et pause avant nouveau depart*/
  {
   clearInterval(chrono);
   chrono = setTimeout("pause()",tpsPause);
  }
}
 
function MouseOver(obj) /*demarrage du defilement*/
{
 if (!over) /*1 evenement over a la fois*/
 {
  elmtScroll = obj;
  depart = elmtScroll.scrollLeft;
  pos = depart;
  W = parseInt(elmtScroll.scrollWidth-elmtScroll.clientWidth);
 
  chrono = setInterval("scrollTxt()",tps);
  over = true;
 }
}
 
function MouseOut(obj) /*mouseout, on autorise un nouveau mouseover*/
{
 over = false;
 clearInterval(chrono); /*stop defilement*/
 chrono = null;
 elmtScroll.scrollLeft = depart; /*position de depart du texte*/
}
 
function quitter() /*arret du chrono lors de la fermeture de la page*/
{
 if (chrono!=null)
   clearInterval(chrono);
}
//-->
</script>
 
<head>
</head>
 
<body onunload="quitter()">
<table>
  <tr>
    <td>
    <div onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
    <nobr>un tres tres tres looooooooooooooooooooooooooooooooong texte</nobr>
    </div>
    </td>
    <td>
    bla bla bla bla bla
    </td>
  </tr>
  <tr>
    <td>
    bla bla bla bla bla
    </td>
    <td>
    <div onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
    <nobr>un tres tres tres looooooooooooooooooooooooooooooooong texte</nobr>
    </div>
  </tr>
</table>
</body>
 
</html>

le <nobr> évite le retour à la ligne du texte

**krolineeee** · 03/06/2006, 11h47

Et bien je te remercie, je vais voir pour adapter celà à mon code mais à priori il ne devrai pas y avoir trop de problème, tu me retire une belle épine du pied.

Merci beaucoup pour ton aide!

**Sheriff** · 03/06/2006, 12h00

hi !
oublié le tag Résolu ?!?
@+

Faire défiler un texte au passage de la souris

JavaScript

Discussions similaires

Partager

Partager