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

**loic20h28** · 08/07/2009, 16h20

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

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

EEEEEEEEEEEEEEEEE..... ce code JavaScript n'a rien à voir avec le texte dégradé. Désolé c'est de ma faute j'aurais du précisé quel code JavaScript est utilisé pour le texte dégradé.
Le code javaScript correspondant au problème c'est :

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
// 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>');
	}
	}

Cordialement.
Encore désolé!!

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

lol c'est encore pire ^^

Code :

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

document.write('

pour commencer sasn vouloir t'offenser document.write est à peu près la pire instruction qui existe en js ^^

et dasn ton cas précis document = ??? page porteuse de la fonction ou popup .. ??

**loic20h28** · 08/07/2009, 16h46

Ben la fonction 'Degrade()' est un code trouvé sur internet plus précisément à la page suivante : http://www.biblioscript.com/javascri..._degrade.shtml
donc j'y suis pour rien s'ils utilisent "document.write('...')".

et dasn ton cas précis document = ??? page porteuse de la fonction ou popup .. ??

Désolé mais je comprend pas vraiment cette question.

Cordialement

**SpaceFrog** · 08/07/2009, 17h08

tu as une fonction qui utilise l'instruction document.write ...

si tu l'appelles depuis une autre fenetre ...

sur quoi pointe document ?
sur la page qui porte le script ?
ou sur la page depuis laquelle est appelée le script ...

document étant l'endroit ou js est supposé faire le write ...

**loic20h28** · 08/07/2009, 17h26

tu as une fonction qui utilise l'instruction document.write ...

si tu l'appelles depuis une autre fenetre ...

sur quoi pointe document ?
sur la page qui porte le script ?
ou sur la page depuis laquelle est appelée le script ...

document étant l'endroit ou js est supposé faire le write ...

On es d'accord sur le principe que la fonction js se trouve dans le premier fichier et cette dernière est appelé dans le second fichier.
Par contre pour répondre à tes question, je sais pas trop sur quoi pointe document.

Comment je peux faire??
Sinon tu as déjà fais un dégradé de couleur sur texte?? Si oui, comment tu fai??

Cordialement

**SpaceFrog** · 08/07/2009, 18h42

passe self en argument de la fonction et fais le write sur le paramètre passé

genre :

Code :

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

degrade(page, ....)

puis page.document.write

**loic20h28** · 08/07/2009, 19h33

passe self en argument de la fonction et fais le write sur le paramètre passé

genre :
Code :

degrade(page, ....)

puis page.document.write

Si je fais ça, j'obtiens rien de plus.

Cordialement.

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

modifie la ofcntion de sorte qu'elle retourne le code html au lieu de faire un document.write :

la mère

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
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script language="JavaScript">
// 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) {
htmlcode=""
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
 htmlcode+='<font color="#' + convert_hexa(r1 + i * dr) + convert_hexa(g1 + i * dg) + convert_hexa(b1 + i * db) + '">' + t + '</font>';
}
return htmlcode;
}
</script>
 
 
 
</head>
 
<body>
<script language="JavaScript">document.write(degrade(0,135,0,255,0,0,"Bonjour et bienvenue",0));
window.open('fille.htm')</script>
 
</body>
 
</html>

la fille (popup)

Code :

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

1
2
3
4
5
6
7
8
9
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
</head>
<body onload="document.body.innerHTML=self.opener.degrade(0,135,0,255,0,0,'J\'arrive aussi a dégrader dans le popup',0)">
</body>
 
</html>

**loic20h28** · 08/07/2009, 21h31

J'ai donc essayé le code que tu m'a passé mais j'obtiens des problèmes :
Vu que j'utilise la manière suivante http://4code.fr/api-topicList/20 et comme il le précise :

Par contre, vous l'aurez compris, la réponse reçu par la fonction Ajax étant directement injectée dans notre div#content, nous ne pouvons nous retrouver avec des balises <body><head> ou autre !!

je ne peux pas mettre de balise <html><head><body>....

Pour visualiser ce que j'obtiens voir les images ci-joints ainsi que pour visualiser le résultat souhaité. Le dégradé de couleur souhaité sera sur le texte de la fin du poème "JE T'AIME PLUS QUE TOUT AU MONDE ".

Donc comment je peux faire dans ce cas là??

Cordialement!!

**SpaceFrog** · 08/07/2009, 22h12

j'ai rien compris

c'est vraiment se compliquer l'existence !!

c'est une popup ou pas ??
c'est un retour d'ajax ? donc du string ....

modifie la fonction comme proposée et applique le degrade sur le responseText ???

**loic20h28** · 15/09/2009, 16h36

Bonjour,

J'ai eu un problème de PC et malheureusement j'ai perdu un bon bout du projet donc obliger de tout refaire.

Pour le moment je n'ai pas eu le temps mais je vais essayer de le trouver ce temps.

Mais pour répondre à ta question c'est du retour ajax.

Cordialement
loic20h28

**nours312** · 28/01/2010, 13h47

Salut :

je me permet une intervention étant à l'origine du code de communications Ajax ...

1. Je suis désolé pour tous ceux qui ont voulus y jetter un oeil ses derniers temps, mais j'ai reconstruit mon frameWork et n'est pas pris le temps de mettre à jour ce site :$

2. le lien vers l'article proposé par Loic est : un menu en Ajax Lui aussi à changé

3. j'ai terminé ce matin la section permettant de réaliser un site completement propre en utilisant ce genre de technologie, et en la couplant avec du php et un petit UrlRewritting : suite et fin du menu Ajax

Donc, pour ce qui est de ton pb Loic, n'oublie pas que la page appelé en Ajax ne sera pas traitée comme tel, on va juste récupérer une chaine de caractère et la placer dans une div ... il n'y a pas de traitement fait.

Si tu veux appliquer une fonction sur ce texte tu dois le faire depuis la fonction charger() et plus particulièrement depuis la fonction appelée onComplete par l'obet Ajax.Request()

si tu souhaites apliquer la fonction il te suffit de placer :

$('content').innerHTML = degrade(0,127,0,255,0,0,xhr.responseText,0);

Si tu as besoin de modifier des parametres et/ou faire en sorte que seul une partie de la réponse soit dégradée, nous devons monter une fonction plus complexe pour faire ses traitement, mais tout reste possible !...

4. le fait d'utiliser une lib tel que Prototype pour un script te contraint à certaines règles (problèmes à l'utilisation d'autres scripts utilisants d'autres lib ...) mais permet aussi de faciliter le codage et allège le codage d'autres fonctions ... comme dans les tiennes tu peux sans problème remplace document.getElementById() par $() ... ça allège bien ta page

Pour le fonctionnement de la lib Prototype, il est conseiller de jeter un oeil : http://prototypejs.org/api/

Voila, si il y a d'autre questions, sur mon script, je suis à votre disposition ! ... @+&BonCode

Nours312

**loic20h28** · 28/01/2010, 14h19

Bonjour,

Merci pour ta réponse très clair (comme d'habitude)

Je vais essayer de regarder cela dés que j'aurais un peu de temps tout de façon je te tiens au courant.

Cordialement
loic20h28

**loic20h28** · 28/01/2010, 21h17

Re-bonjour nours312,

Donc j'ai voulu essayer de faire ce que tu m'a conseillé :

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
index.html :
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function construct()
{
	var tableLiens = $$('.title_back a.liaison');// vas cr?er un tableau avec toutes les balises <a> ayant comme classe "menu"  
	for(j=0; j<tableLiens.length; j++){ 
    var lien = tableLiens[j].readAttribute('href');
    lien = lien.substring(lien.lastIndexOf('/')+1);// r?cup?ration du lien symbolique
    tableLiens[j].removeAttribute('href');
    if(lien == "index.html")
      lien = "main.html"; // rappelons que nous ne pouvons charger notre page index.html car elle contient notre template !!
    tableLiens[j].writeAttribute('href_bis', lien); // cet attribut sera utilis? par la suite et remplace le href.
    tableLiens[j].observe('click', charger); // on place notre ?couteur sur l'?l?ment, ? chaque click, il appellera la fonction <u>charger()</u>
  }
}

function charger(e){ // e repr?sente l'?v?nement li? ? l'appel de cette fonction
  var el = e.element(); // l'?l?ment sur lequel nous avons click? !
  var url = el.readAttribute('href_bis');
  new Ajax.Request(url, {
    onComplete: function(xhr) {
      $('middle_back').innerHTML = xhr.responseText;
	  $('content').innerHTML = degrade(0,127,0,255,0,0,xhr.responseText,0);
    }
  });
  
} 

document.observe('dom:loaded', construct); 



function AfficheMaxi(a)
{
	document.getElementById('ZonePrMaxi').src = 'image/NotreRencontre/'+a;
}
</script> 
</head>
<body>
<div id="content">
<!-- header begins -->
	
	
<!-- header ends -->
<!-- content begins -->
 <div id="main">
	<div id="right">
			<div id="header">
<div id="logo">
		<h1><a href="#">metamorph_featherstorm</a></h1>
		<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
	</div>
<div id="menu">
<div class="title_back">
		<ul>
			<li><a href="main.html"  class="liaison">Accueil</a></li>
			<li><a href="#" title="">Blog</a></li>
			<li><a href="#" title="">Gallery</a></li>
			<li><a href="#" title="">About</a></li>
			<li><a href="#" title="">Contact</a></li>
		</ul>
	</div>	
</div>
</div>
<div class="box">
<div id="middle_back">
		    
			<br />
			<center>
			<table>
				<tr>
					<td>
						<p>
							Toi et moi <br>
							c'est un amour éternel
						</p>
					</td>
					<td>
						<img src="image/nous.jpg">
					</td>
					<td>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
						<p>
							Toi et moi <br>c'est pour la vie je l'espère.
						</p>
					</td>
				</tr>
			</table>
		</center>
			</div>
			</div>
	       
	</div>
  	<div id="left">
        <div id="top"></div>
		<div id="left_back">
		<h3>Nunc pellentesque</h3>
			<div class="title_back">
			<ul>
				<li><ul>
					<li><a href="notre_rencontre.html" class="liaison">Notre rencontre</a></li>
					<li><a href="p1.html" class="liaison">Les poèmes</a></li>
					<li><a href="#">Purus in mollis purus</a></li>
					<li><a href="#">Orci nonummy fringilla</a></li>
					</ul>
			  </li>
			</ul>
			</div>
			</div>
			<br />
		<h3>Calendar</h3>
		   <div class="title_back">
			<ul>
				<li id="calendar">			
				<div id="calendar1">
					<table id="calendar2" summary="Calendar">
						<caption>
						January 2008
						</caption>
						<thead>
							<tr>
								<th abbr="Monday" scope="col" title="Monday">M</th>
								<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
								<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
								<th abbr="Thursday" scope="col" title="Thursday">T</th>
								<th abbr="Friday" scope="col" title="Friday">F</th>
								<th abbr="Saturday" scope="col" title="Saturday">S</th>
								<th abbr="Sunday" scope="col" title="Sunday">S</th>
							</tr>
						</thead>
						<tfoot>
							<tr>
								<td abbr="Des" colspan="3" id="prev"><a href="#">&laquo; Des</a></td>
								<td class="pad">&nbsp;</td>
								<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb &raquo;</a></td>
							</tr>
						</tfoot>
						<tbody>
							<tr>
								<td colspan="2" class="pad">&nbsp;</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>5</td>
							</tr>
							<tr>
								<td>6</td>
								<td>7</td>
								<td>8</td>
								<td>9</td>
								<td>10</td>
								<td>11</td>
								<td>12</td>
							</tr>
							<tr>
								<td>13</td>
								<td>14</td>
								<td>15</td>
								<td>16</td>
								<td>17</td>
								<td>18</td>
								<td>19</td>
							</tr>
							<tr>
								<td>20</td>
								<td id="now">21</td>
								<td>22</td>
								<td>23</td>
								<td>24</td>
								<td>25</td>
								<td>26</td>
							</tr>
							<tr>
								<td>27</td>
								<td>28</td>
								<td>29</td>
								<td>30</td>
								<td>31</td>
								<td class="pad" colspan="2">&nbsp;</td>
							</tr>
						</tbody>
					</table>
				</div>
			</li>
		  </ul></div>
			<br />
			<h3>Company News</h3>
			<div class="title_back">
			<ul>
			  <li>
				  <h4>June 2, 2008</h4>
				  <p><a href="#"> Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta. …</a></p></li>
				   <li>
				  <h4>June 12, 2008</h4>
				  <p><a href="#">Tempus Duis tempor posuere diam. Suspendisse  quis nunc malesuada porta. …</a></p></li>
			      </ul>
				  </div>
		 </div>
		<div id="bottom"></div>
		</div>
<!--content ends -->
<!--footer begins -->
<div style="clear: both"></div>
	</div>
</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>Design by <a href="http://www.metamorphozis.com/" title="Flash Web Templates">Flash Web Templates</a></p>
	</div>

<!-- footer ends-->
<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>

p1.html (page du poème) :
<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>

Mais malheureusement ça fais rien c'est à dire que le texte est noir!! (aucun css sur cette page même si ya les class!!)

Comment faire ?? Enfin mon but final c'est que juste le texte "JE T'AIME PLUS QUE TOUT AU MONDE " est un dégradé de couleur.

Merci d'avance pour ton aide!!
loic20h28

Faire un dégradé de couleur avec du texte

JavaScript

Discussions similaires

Partager

Partager