Sélecteur de couleur (toutes les couleurs)
Soyez le premier à donner votre avis sur cette source.
Snippet vu 38 821 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
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
- Selecteur de couleur
- Code couleur javascript - Meilleures réponses
- Couleur javascript - Meilleures réponses
- Sélecteur de couleur - Codes sources - C# / .NET (Graphique)
- Sélecteur de couleur - Codes sources - Javascript (Graphique)
- Un sélecteur de couleur en asp... - Codes sources - ASP / ASP.NET (Graphique)
- Sélecteur de couleurs - Codes sources - Visual Basic / VB.NET (Graphique)
- Selecteur de couleurs - Codes sources - IRC (Astuces)
Commentaires
Comment l'utiliser sur plusieurs champs ?
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>
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.