Sélecteur de couleur (toutes les couleurs)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 39 071 fois - Téléchargée 27 fois

Contenu du snippet

Un tableau est crée dynamiquement et peut proposé toutes
les couleur disponibles (env 16 millions).
Attention, ca peut ramer ennormement sur certaines machines,
ne pas s'inquitier et régler les variables StepH et StepV pour
demander de calculer moins de couleur.
Plus ces variables sont petites , plus il y aura de nuances et ... plus
ca ramera ...

Une version plus complète sera bientot disponible sur ce site:
Http://www.systeme-d.net

Source / Exemple :


<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
.ColorCell{width: 3; height: 3}
.GradientColorCell{width: 5; height: 20}
</STYLE>
<SCRIPT>
//	convertion decimal ver hexa
function Hexa(Dec){
	var nb = Dec.toString(16)
	if (nb.length < 2) {nb = "0" + nb}
	return(nb)
}
function GradientPart(dr, dg, db, fr, fg, fb, Step) {			
	cr=dr;cg=dg;cb=db
	//	Calcul du pas par couleur
	sr=((fr-dr)/Step)	// rouge
	sg=((fg-dg)/Step)	// vert
	sb=((fb-db)/Step)	// bleu
	var Result = ''
    for (var x = 0; x <= Step; x++) {
		var cmd = " onclick=\"ColorCode.value=this.bgColor;\" onmouseover=\"ColorShow.style.backgroundColor=this.bgColor;\""
		Result += "<TD CLASS=ColorCell BGCOLOR=#" + Hexa(Math.floor(cr)) + Hexa(Math.floor(cg)) + Hexa(Math.floor(cb)) + cmd + "></TD>"
		cr += sr; cg += sg; cb += sb
		}
	return(Result)
}
function WriteRow(a,i){
	document.write("<TR>")
	document.write(GradientPart(a,i,i, a,a,i, StepH))
	document.write(GradientPart(a,a,i ,i,a,i, StepH))
	document.write(GradientPart(i,a,i, i,a,a, StepH))
	document.write(GradientPart(i,a,a, i,i,a, StepH))
	document.write(GradientPart(i,i,a, a,i,a, StepH))
	document.write(GradientPart(a,i,a, a,i,i, StepH))
	document.write("</TR>")
}
</SCRIPT>
</HEAD>
<BODY>

<TABLE>
    <TR>
      <TD COLSPAN=2>
	  
<SCRIPT>
//	ecriture du tableau de dégradé
document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 STYLE='border: 1px solid black'>")
StepH = 20
var StepV = 8
var i=0
var a=0
//	niveau foncé
for (a=0;a<=255; a+=StepV){
	WriteRow(a,i)
}
a=255
//	niveau clair
for (i=0; i<=255; i+=StepV){
	WriteRow(a,i)
}
document.write("</TABLE>")
</SCRIPT>

	  </TD>
    </TR>
    <TR>
      <TD>
	  		<DIV ID=ColorShow STYLE="width: 100; height: 60; border: 1px solid black"></DIV>
	  </TD>
      <TD>
	  		Code couleur : <INPUT ID=ColorCode TYPE=text SIZE=8>
	  </TD>
    </TR>
</TABLE>

</BODY>
</HTML>

A voir également

Ajouter un commentaire

Commentaires

Messages postés
131
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
8 avril 2015

Salut

Comment l'utiliser sur plusieurs champs ?
Messages postés
14
Date d'inscription
jeudi 23 octobre 2003
Statut
Membre
Dernière intervention
7 mars 2010

Très bon code, propre et efficace. Merci.
Messages postés
4
Date d'inscription
jeudi 30 avril 2009
Statut
Membre
Dernière intervention
11 mars 2011

merci beaucoup, super code!
Messages postés
10
Date d'inscription
mercredi 1 octobre 2003
Statut
Membre
Dernière intervention
19 avril 2010

Salut,
Vraiment mais alors vraiment Super. marche nickel sous FF(mac) et Safari (Mac).

Un truc m'embete quand meme: j'ai voulu rajouter, histoire d'être bien comme il faut j'ai rajouté un doc type (XHTML 1.0 transitionnal), la ca m'a convertit un peu tout (balise en minuscules ect ect).

J'ai retapé moi meme les balises en minuscules dans les parties >script>

Mais malheureusement ca marche plus bien comme il faut (le mouseover et le onclick) et ca fait de vilaines trainées blanches.

voila ton code "modifié" (qui ne marche pas). A mon avis c'est un bete probleme de "pontuation" mais je vois pas ou.
Si t'avais une idée ...

code modifé avec DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.ColorCell {width: 3px; height: 3px}
.GradientColorCell {width: 5px; height: 20px}
</style>
<script type="application/javascript">
// convertion decimal ver hexa
function Hexa(Dec){
var nb = Dec.toString(16)
if (nb.length < 2) {nb = "0" + nb}
return(nb)
}
function GradientPart(dr, dg, db, fr, fg, fb, Step) {
cr=dr;cg=dg;cb=db
// Calcul du pas par couleur
sr=((fr-dr)/Step) // rouge
sg=((fg-dg)/Step) // vert
sb=((fb-db)/Step) // bleu
var Result = ''
for (var x = 0; x <= Step; x++) {
var cmd = " onclick="ColorCode.value=this.bgColor;" onmouseover="ColorShow.style.backgroundColor=this.bgColor;" "
Result += "<td class='ColorCell' bgcolor=#"+ Hexa(Math.floor(cr)) + Hexa(Math.floor(cg)) + Hexa(Math.floor(cb)) + cmd + "></td>"
cr += sr; cg += sg; cb += sb
}
return(Result)
}
function WriteRow(a,i){
document.write("<tr>")
document.write(GradientPart(a,i,i, a,a,i, StepH))
document.write(GradientPart(a,a,i ,i,a,i, StepH))
document.write(GradientPart(i,a,i, i,a,a, StepH))
document.write(GradientPart(i,a,a, i,i,a, StepH))
document.write(GradientPart(i,i,a, a,i,a, StepH))
document.write(GradientPart(a,i,a, a,i,i, StepH))
document.write("</tr>")
}
</script>
</head>
<td colspan=\"2\">
<script type=\"application/javascript\">
// ecriture du tableau de dégradé
document.write(\"<table border='0' CELLPADDING='0' CELLSPACING='0' STYLE='border: 1px solid black'>\")
StepH = 20
var StepV = 8
var i=0
var a=0
// niveau foncé
for (a=0;a<=255; a+=StepV){
WriteRow(a,i)
}
a=255
// niveau clair
for (i=0; i<=255; i+=StepV){
WriteRow(a,i)
}
document.write("
")
</script>
</td>
</tr>
<tr>
<td>


</td>
<td>
Code couleur :
</td>
</tr>
</table>

</html>
Messages postés
4
Date d'inscription
mercredi 25 février 2004
Statut
Membre
Dernière intervention
1 juillet 2008

Clair vraiment classe et très pratique ^^ merciiiii
Afficher les 23 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.