Sélecteur de couleur (toutes les couleurs)
Soyez le premier à donner votre avis sur cette source.
Snippet vu 39 828 fois - Téléchargée 28 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
- Code couleur javascript
- Couleur javascript - Meilleures réponses
- Selecteur de couleur - Meilleures réponses
- Code source javascript - Guide
- Javascript : codes sources, forum, tutoriaux et astuces - Guide
- Code couleur resistance - Guide
- Javascript : Formulaire - Sources , plus de 50 000 CodeS-SourceS. - Guide
- Javascript : Jeux - Sources , plus de 50 000 CodeS-SourceS. - Guide
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.