Affichage texte lettre par lettre

**Yami no tenshi** · 01/09/2008, 16h05

Bonjour à toutes et à tous,

Je me suis mis assez récemment au développement web, et je bloque sur un petit problème.
J'ai utilisé un script réalisé par marilyn-manson (pas le chanteur je crois ^^) qui me permet d'afficher un texte lettre par lettre.
Je voudrais faire en sorte que ce texte change en fonction de l'endroit où clique le visiteur (sans changement de page). J'ai essayé pour cela d'utiliser des <INPUT.../>. Voilà 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr" lang="fr">
 
<head>
 
	<title>Yami no tenshi - Bienvenue sur mon site !</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
		<SCRIPT LANGUAGE=JavaScript>
 
		function changeMessage()
		{
			document.getElementById("zone").innerHTML = texte[actual_texte];
			actual_texte++;
			if(actual_texte >= texte.length)
			actual_texte = nb_msg;
		}
 
 
		function affiche_txt()
		{
		var chaine=document.getElementById("monInput").value;
 
		var nb_car = chaine.length; 
		var tableau = chaine.split("");
		texte = new Array;
		var txt = '';
		var nb_msg = nb_car - 1;
		for (i=0; i<nb_car; i++) {
		texte[i] = txt+tableau[i];
		var txt = texte[i];
		}	
		actual_texte = 0;
 
		if(document.getElementById)
		setInterval("changeMessage()",30);
		}
 
		</SCRIPT>
 
 
</head>
 
<body>
 
	<div id="banniere">
	<input type="hidden" id="monInput" value="ma phrase de base" />
	</div>
 
	<div id="test">
	<input type="button" value="Change" onClick="document.getElementById('monInput').value='nouvelle phrase'; affiche_txt();" />
	</div>
 
	<div id="zone">
	Essai
	</div>
 
</body>
</html>

Donc lorsque je clique sur mon bouton "changer", sous mozilla firefox tout le texte va s'écrire puis disparaitre pour laisser place à "undefined", tandis que sous IE le texte va rester mais dans la barre du bas il va être écrit "Erreur sur la page".
Donc voilà je voulais savoir si vous aviez des idées pour résoudre mon problème, en espérant avoir été assez clair...
Je vous remercie par avance!
Yami

**SpaceFrog** · 01/09/2008, 17h35

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr" lang="fr">
 
<head>
 
	<title>Yami no tenshi - Bienvenue sur mon site !</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
		<SCRIPT LANGUAGE=JavaScript>
		var textes=new Array();
		textes[0]="phrase numéro un";
		textes[1]="bla bal bla bla blabla ";
		textes[2]="encore du baratin";
		textes[3]="cette fois c'est fini";			
		var i=0	;	
		var indice=-1
 
		function changeMessage(obj)	{
		  if(indice==-1){obj.innerHTML=""}		
		   indice++;
			var chaine=textes[i];
	       var tableau = chaine.split("");
			var nb_car = tableau.length; 
			//alert(indice)
			if(indice<nb_car){
			     obj.innerHTML+=tableau[indice];
 
			     setTimeout(function(){changeMessage(obj)},100);}
 
			else { 
			       i=(i<textes.length-1)?i+1:0;
			       indice=-1;
 
			}    
 
		}
		</SCRIPT>
 
 
</head>
 
<body>
 
	<div id="banniere">
	<input type="hidden" id="monInput" value="ma phrase de base" />
	</div>
 
	<div id="test">
	<input type="button" value="Change" onClick="changeMessage(document.getElementById('zone'));" />
	</div>
 
	<div id="zone">
	Essai
	</div>
 
</body>
</html>

**Yami no tenshi** · 01/09/2008, 18h03

Wahooo merci beaucoup.

J'aurai par contre encore une petite requête, j'aimerai qu'à un bouton corresponde une phrase prédéfinie (or là, c'est le même bouton qui modifie la phrase dans l'ordre des phrases dans le tableau).

Par exemple je voudrai que quand on clique sur le Bouton 1 le texte soit "Bonjour", quand on clique sur le Bouton 2 le texte devienne autre chose, mais si on retourne au Bouton 1 on revienne sur "Bonjour", et ce quel que soit le nombre de boutons.

Il doit faloir agir sur la variable "i" non?

Merci d'avance!
Yami

**SpaceFrog** · 01/09/2008, 21h36

Oui là je boucle sur texte[i] ....

Suffit de virer la boucle et de fixer un i en paramètre de la fonction ...
Si tu n'y arrives pas je regarde ça demain ...

**Yami no tenshi** · 03/09/2008, 11h13

Je te remercie, j'ai réussi à faire ça. Merci.

Par contre j'ai encore un mini souci... Mes phrases risquent d'être assez longues. Du coup quand je clique sur le premier bouton, la phrase commence à s'afficher, et si j'appuie sur le second bouton avant que la première ne se termine, c'est la première phrase qui recommence à s'écrire...

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
<head>
 
	<title>Yami no tenshi - Bienvenue sur mon site !</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
		<SCRIPT LANGUAGE=JavaScript>
		var textes=new Array();
		textes[0]="Première phrase qui se veut moyennement longue";
		textes[1]="bla bal bla bla blabla bla bla bla bla bla bla bla bla bla";
		textes[2]="encore du baratin";
		textes[3]="cette fois c'est fini";
		textes[4]="...zZzZzZzZzZzZz...";			
		//var i=0;	
		var indice=-1;
 
		function changeMessage(obj,i)	{
		  var now = new Date();
		  var hours = now.getHours();
		  if((hours >= 23) || (hours <7))
		  {	
			i = 4;
		  } 
		  if(indice==-1){obj.innerHTML=""}		
		   indice++;
		   var chaine=textes[i];
	       var tableau = chaine.split("");
		   var nb_car = tableau.length; 
			//alert(indice)
			if(indice<nb_car){
			     obj.innerHTML+=tableau[indice];
 
			     setTimeout(function(){changeMessage(obj,i)},30);}
 
			else { 
			       i=(i<textes.length-1)?i+1:0;
			       indice=-1;
 
			}    
 
		}
		</SCRIPT>
 
 
</head>
 
<body onLoad="changeMessage(document.getElementById('zone'),0);">
 
	<div id="banniere">
	<input type="hidden" id="monInput" value="ma phrase de base" />
	</div>
 
	<div id="test">
	<input type="button" value="Change" onClick="changeMessage(document.getElementById('zone'),1);" />
	<input type="button" value="Change2" onClick="changeMessage(document.getElementById('zone'),2);" />
	</div>
 
	<div id="zone">
	Essai
	</div>
 
</body>

Est-il possible d'y faire quelque chose?
Merci d'avance

**SpaceFrog** · 03/09/2008, 12h49

tu veux empêcher qu'une autre phrase soit prise en compte avant la fin de la précédente ?

oui ça peut s'inhiber ... avec un test ...

**Yami no tenshi** · 03/09/2008, 13h22

Pas tout à fait. Je voudrai que ce soit la dernière phrase passée en paramètre qui s'affiche (donc la phrase du dernier bouton sur lequel on a cliqué). Du coup l'affichage de l'autre phrase devra être interrompu et je ne vois pas du tout comment on peut faire ça...

Affichage texte lettre par lettre

JavaScript

Discussions similaires

Partager

Partager