Bonjour à tous et à toutes,

J'ai besoin de votre aide concernant un script permettant de changer de couleur un texte dans un textarea.
Tout ce passe bien l'intégration a ma page ce fait sans problème.
Cependant j'aurais voulu que le slider, lorsqu'il est déplacé, ajoute la balise:

<color="valeur hexadécimale">texte en couleur</color>

Or dans ce script (voir ci-dessous) c'est la couleur du texte qui change.

Voici le script au complet:

Partie Javascript

window.addEvent('domready', function(){
	// Second Example
	var el = $('setColor'), color = [0, 0, 0];
	
	var updateColor = function(){
		// Sets the color of the output text and its text to the current color
		el.setStyle('color', color).set('text', color.rgbToHex());
	};
	
	// We call that function to initially set the color output
	updateColor();
	
	$$('div.slider.advanced').each(function(el, i){
		var slider = new Slider(el, el.getElement('.knob'), {
			steps: 255,  // Steps from 0 to 255
			wheel: true, // Using the mousewheel is possible too
			onChange: function(){
				// Based on the Slider values set an RGB value in the color array
				color[i] = this.step;
				// and update the output to the new value
				updateColor();
			}
		}).set(0);
	});
});

Partie (x)HTML

<form method="post" action="news.php">				
<input type="text" name="pseudo" value="Votre pseudo" />
<div id="red" class="slider advanced">
<div class="knob">
</div>
</div>
<div id="green" class="slider advanced">
<div class="knob">
</div>
</div>
<div id="blue" class="slider advanced">
<div class="knob">
</div>
</div>
<br />
<label for="titre">Titre</label> : <input type="text" name="titre" id="titre" onkeyup="preview(this, 'previewh2');" onselect="preview(this, 'previewh2');" /><br />
<label for="texte">Contenu</label> :<br />
<textarea onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');" name="textarea" id="textarea" rows="10" cols="50"></textarea><br />
<p>
<input name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
<label for="previsualisation">Pr&eacute;visualisation automatique</label>
</p>
<h2 id="previewh2"></h2>
<p id="previewDiv"></p>

<h2 id="viewh2"></h2>
<p id="viewDiv"></p><br/>
<input type="button" value="Visualiser" onclick="view('textarea','viewDiv');view('titre','viewh2');" />&nbsp;<input type="submit" value="Envoyer" />
</form>

Partie CSS

div.slider {
        width: 200px;
        height: 16px;
        background: #eee;
}
div.slider div.knob {
        background: #000;
        width: 16px;
        height: 16px;
}
div#fontSize {
        height: 50px;
}

div.advanced {
        width: 200px;
        margin: 5px 0;
        background: url(slider.png) 0 center repeat-x;
}
div.advanced div.knob {
        background: no-repeat center center;
        cursor: pointer;
}
div#red div.knob {
        background-image: url(red.png);
}
div#green div.knob {
        background-image: url(green.png);
}
div#blue div.knob {
        background-image: url(blue.png);
}

Merci par avance pour votre aide et votre compréhension

Up

Up

Up

Up