Faire défiler un texte au passage de la souris

Version imprimable

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:

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:

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

02/06/2006, 15h31
krolineeee

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

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:

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

03/06/2006, 11h47
krolineeee

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!:lol:
03/06/2006, 12h00
Sheriff

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