Faire un dégradé de couleur avec du texte

**loic20h28** · 07/07/2009, 11h27

Bonjour,

Je suis entrain de créer un site web en HTML avec l'utilisation de code JavaScript.
J'ai créé mon site à l'aide du site suivant : http://4code.fr/api-topicList/20

J'ai trouvé un bout de code en JavaScript pour créer un dégradé de couleur sur du texte, voir le lien suivant : http://www.biblioscript.com/javascri..._degrade.shtml

Le problème c'est que je n'arrive pas à le faire fonctionné comme je souhaite, je m'explique :
Dans mon site j'ai des poèmes et dans un je souhaiterais avoir un dégradé de couleur mais le problèmes c'est que le code JavaScript est dans la page 'Index.html' et je souhaite que le dégradé de couleur soit fait sur du texte se situant dans une autre page.
Voici le code de la page principal 'index.html' :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
 
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="js/prototype.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	function construct() 
	{ 
		var tableLiens = $$('.back a.liaison'); 
		for(j=0; j<tableLiens.length; j++) 
		{ 
			var lien = tableLiens[j].readAttribute('href'); 
			lien = lien.substring(lien.lastIndexOf('/')+1); 
			tableLiens[j].removeAttribute('href'); 
			if(lien == "index.html") 
			{ 
				lien = "main.html"; 
			} 
				tableLiens[j].writeAttribute('href_bis', lien); 
				tableLiens[j].observe('click', charger); 
		} 
	} 
 
	function charger(e) 
	{ 
		var el = e.element(); 
		var url = el.readAttribute('href_bis'); 
		new Ajax.Request(url, { onComplete: function(xhr) { $('middle_back').innerHTML = xhr.responseText; } }); 
	} 
	document.observe('dom:loaded', construct); 
 
 
	var ancienUL = null;
    function Affiche(nom) 
	{
        fichier = document.getElementById(nom);
        if (fichier.style.display == "none" )
            fichier.style.display = "block";
        else
            fichier.style.display = "none";
        if (ancienUL != null)
		{
            ancienUL.style.display = "none";
			ancienUL = fichier;
		}
    }
 
	// fonction de conversion en hexadécimal
	var hexa = "0123465789ABCDEF";
 
	function convert_hexa(nb) {
	return hexa.charAt(Math.floor(nb/16)) + hexa.charAt(nb%16);
	}
 
	// r1,g1,b1 représentent les couleurs de départ (en RGB)
	// r2,g2,b2 représentent les couleurs de fin (en RGB)
	// texte représente la chaîne à afficher
	// size est la taille du dégradé (nombre de lettres au final (avec ajouts d'espace si nécessaire))
	// (si < taille du texte, on prend cette dernière)
 
	function degrade(r1,g1,b1,r2,g2,b2,texte,size) {
	var nb = texte.length;
	var s = nb;
	var dt = 1;
	if ( size > s ) {
	dt = Math.round( ( size - 2 ) / ( nb - 1 ) );
	s = dt * ( nb - 1 );
	}
	dr = ( r2 - r1 ) / s;
	dg = ( g2 - g1 ) / s;
	db = ( b2 - b1 ) / s;
	for ( var i = 0; i <= s; i++ ) {
	var t = "&nbsp;";
	var index = i / dt;
	if ( index == Math.round(index) ) {
	t = texte.charAt(index);
	}
 
	// Ecriture de chaque lettre, une par une avec sa propre couleur
	document.write('<font color="#' + convert_hexa(r1 + i * dr) + convert_hexa(g1 + i * dg) + convert_hexa(b1 + i * db) + '">' + t + '</font>');
	}
	}
</script>
<script type="text/javascript" src="js/calendrier_2.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="main">
<div id="inner">
<!-- start header -->
<div id="header">
 
 <div id="logo">
	<h1>metamorph_innerlight</h1>
	<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  <div id="menu">
	  <ul>
	   <li><a href="index.html">Accueil</a></li>
	   <li><a href="http://lachips28.skyrock.com/" target="_blank">Products</a></li>
	   <li><a href="#">Support</a></li>
	   <li><a href="#">About</a></li>
	   <li><a href="#">Contact</a></li>   
	  </ul>
</div>
<!--Header end -->
 
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start leftbar -->
	<div id="leftbar" class="sidebar">
			<h2>Liens</h2>
			 <div class="back">
				<ul>
					<li><a href="notre_rencontre.html" class="liaison">Notre rencontre</a></li>
					<li>
						<a href="javascript:void(0)" onClick="Affiche('sous-menu')">Les po&egrave;mes</a>
						<ul id="sous-menu" style="display:none;">
							<li><a href="Poeme1=Quand l'amour surgit.html" class="liaison">Quand l'amour surgit</a></li>
							<li><a href="Poeme2=Je t'aime.html" class="liaison">Je t'aime</a></li>
							<li><a href="Poeme3=Quand mon coeur.html" class="liaison">Quand mon coeur</a></li>
							<li><a href="Poeme6=Rabibochage.html" class="liaison">Rabibochage</a></li>
							<li><a href="Poeme7=Demande en fiancailles.html" class="liaison">Demande en fian&ccedil;ailles</a></li>
						</ul>
					</li>
					<li><a href="#">Suspendisse mauris</a></li>
					<li><a href="#">Urnanet non semper</a></li>
					<li><a href="#">Proin porttitor</a></li>
				</ul>
				</div>
				<div class="bottom_small"></div>
				<h2>Calendrier</h2>
				<div class="back">
					<center>
						<script type="text/javascript">	
							calendrier();
						</script>
					</center>
				</div>
			<div class="bottom_small"></div>
	</div>
	<!-- end leftbar -->
	<!-- start content -->
	<div id="content">
		<div class="post">
		     <div class="top"></div>
			 <div id="middle_back">
				<center> 
					<table> 
						<tr> 
							<td> 
								<p> Toi et moi 
								 un amour
								&eacute;ternel </p> 
							</td> 
							<td> 
								<img src="image/nous.jpg" /> 
							</td> 
							<td> 
								&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
								<p> Toi et moi
								 pour la vie 
								 je l'esp&egrave;re.   </p>
							</td> 
						</tr> 
					</table> 
				</center> 
			</div>			  
		</div>
	</div>
		<!-- end rightbar -->
	<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page --> 
</div>
<div id="footer">
   <p>Copyright &copy; 2009. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
	<p><a href="http://www.metamorphozis.com/" title="Website Design">Website Design</a> by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a></p>
</div>
</div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>

Voici le code de la page du poème (Poeme7=Demande en fiancailles.html) :

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
 
<script language="JavaScript">degrade(0,127,0,255,0,0,"Bonjour et bienvenue",0);</script><br>
<div id="poeme_align">
 
	<div id="titre">Demande en fian&ccedil;ailles</div>
		<br>
		<font id="P7_Couleur1">Mon amour, ma princesse,
		<br>
		Avant tout j'aimerais que tu sache
		<br>
		Qu'a mes yeux tu repr&eacute;sente tout
		<br>
		Ce dont j'ai toujours r&eacute;v&eacute;
		<br>
		L'amour fou, la tendresse, la douceur ....</font>
		<br>
		<br>
		<font id="P7_Couleur2">Quand tu es loin de moi
		<br>
		Je me sens si seul,
		<br>
		Quand on se dispute,
		<br>
		Ca me fais si mal
		<br>
		Car je suis fous d'amour pour toi.</font>
		<br>
		<br>
		<font class="P7_Couleur3">En ce jour, si merveilleu pour notre relation
		<br>
		J'ai un cadeau si sp&eacute;cial
		<br>
		Qui pour moi signifie tout l'amour que j'ai pour toi</font>
		<br>
		<font class="P7_Couleur4">--> Donne le cadeau</font>
		<br>
		<font class="P7_Couleur3">En t'offrant ce cadeau
		<br>
		Je veux simplement te dire JE T'AIME!!</font>
		<br>
		<font class="P7_Couleur4">--> Tu peux ouvrir le cadeau</font>
		<br>
		<br>
		<font id="P7_Couleur5">Ce cadeau, cette bague
		<br>
		Repr&eacute;sente la fid&eacute;lit&eacute;, l'amour, la douceur.
		<br>
		Si tu le souhaite, elle peut aussi
		<br>
		Devenir une bague de fiancaille.</font>	
		<br>
		<br>
		<font id="P7_Couleur6">Bien entendu, fian&ccedil;aille pour moi ne veux pas dire mariage en vu
		<br>
		Pour cela on verra beaucoup plus tard.
		<br>
		C'est juste une marque d'amour!!</font>
		<br>
		<br>
		<font id="P7_Couleur7">JE T'AIME PLUS QUE TOUT AU MONDE </font>
		<br>
		<br>
		<img src="image/LesPoemes/1990418899_small_1.jpg" />
</div>

En fait quand j'exécute le site, le texte en dégradé ne s'affiche pas malheureusement.
Comment puis-je faire pour que cela fonctionne??

Merci d'avance!!

**SpaceFrog** · 08/07/2009, 09h02

dans les contributions javascript il y a un thread sur la communication entre fenetres ...

**loic20h28** · 08/07/2009, 14h54

dans les contributions javascript il y a un thread sur la communication entre fenetres ...

Tout d'abord merci pour ta réponse.
Je pense avoir compris ce que tu entendais par là mais je trouve pas grand chose.
J'ai essayé la chose suivante (le premier fichier reste le même) dans le second fichier :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="poeme_align">
	<script language="JavaScript">
		window.opener.degrade(0,127,0,255,0,0,"HELLO JEUNOT",0);
	</script>
	<br>
....
</div>

Mais rien se passe.
Comment puis-je faire??

Cordialement.

**SpaceFrog** · 08/07/2009, 14h57

c'est plutot au niveau de la fonction degrade qu'il faut indiquer le paretnship

**loic20h28** · 08/07/2009, 15h17

c'est plutot au niveau de la fonction degrade qu'il faut indiquer le paretnship

Je suis désolé mais je voit pas trop ce que tu veux dire par là, peut-tu m'expliquer s'il te plais??

Cordialement!!

**SpaceFrog** · 08/07/2009, 16h14

Code :

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

1
2
3
function construct() 
	{ 
		var tableLiens = $$('.back a.liaison');

tableLiens est défini par rapport à quelle page ...

Faire un dégradé de couleur avec du texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager