ALL HTML - Discussions Faire un dégradé de couleur avec du texte

Forum de discussions « Javascript - DHTML - VBScript »

Retrouvez les publications relatives à ces discussions dans notre rubrique javascript.

Menu déroulant, dimension du texte publié par drouin
Tutoriel AJAX publié par Dr_von_scott

Faire un dégradé de couleur avec du texte

liste des forums liste des discussions Participer à la discussion

Message publié le mercredi 01 juillet 2009 à 18 h 35 par loic20h28.

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/javascript/img_txt_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' :


<!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) :


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

Cordialement!!

participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Les 5 dernières discussions

ecoles en france qui font de la formation sur le web (0 réponse)
Vérifier et boucler (3 réponses)
PHP : écrire en fin de fichier (1 réponse)
Redimensionnement d’image proportionnellement (0 réponse)
video conférence !! ?? (0 réponse)

all html : Le portail des webmaster

Forum de discussions « Javascript - DHTML - VBScript »

Faire un dégradé de couleur avec du texte

Les 5 dernières discussions