begin process at 2010 02 09 13:27:02
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > SÉLECTEUR DE COULEUR (TOUTES LES COULEURS)

SÉLECTEUR DE COULEUR (TOUTES LES COULEURS)


 Information sur la source

Note :
9,88 / 10 - par 8 personnes
9,88 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Initié Date de création :15/05/2003 Date de mise à jour :15/05/2003 20:31:21 Vu :25 765

Auteur : francktfr

Ecrire un message privé
Site perso
Commentaire sur cette source (22)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

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



 Sources du même auteur

Source avec une capture CHOIX DE DATES ET DE PERIODE
HORLOGE DIGITALE , SI SI
Source avec une capture TEXT COLORISÉ AVEC LE POURCENTAGE
Source avec une capture MENU AVEC EFFET DE DÉGRADÉ
ANNONCE LETTRE PAR LETTRE

 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma

Commentaires et avis

Commentaire de seed le 16/05/2003 18:26:40

arf c trop blazant ton truc bastard je me suis fais chier a en faire 1 enfin bon c pas le mem niveau

Commentaire de revinc le 21/05/2003 09:47:01

E.X.C.E.L.L.E.N.T. !!!!!
y'a rien d'autre à dire :))

Commentaire de iubito le 30/05/2003 16:22:55

au premier abord, c très bô

...mais ça bouffe bcp de ressources, et puis y'a pas le blanc FFFFFF !!! regardez moi un peu ce code !!

Commentaire de francktfr le 31/05/2003 14:11:00

bien sur que ca bouffe des ressources, c'est du dynamique, pas du code HTML de 3km tapé ligne par ligne. Mais puisque tu connais le code hexa du blanc, tu n'en a pas besoin ...
J'ai regardé les autres commentaires que tu as fais, à part critiquer les codes avec une mauvaise fois flagrante, tu sais faire autre chose ???

Commentaire de revinc le 31/05/2003 15:37:10

iubito &gt; c normal que ça bouffe des ressources mais on s'en fout pas mal.
si t pas content, tu peux toujours augmenter le pas.
de toutes façons le script est bien optimisé et il est difficile de faire mieux en javascript!

Commentaire de iubito le 31/05/2003 17:09:42

hmmm optimisé...
déjà si tu faisait une capture de ton image telle qu'elle est (puisqu'elle est bien jolie) et tu mettrais une map, tu gagnerais en vitesse et en mémoire.
Tracer des tableaux, ça prend du temps et beaucoup de RAM.

Pour ce qui est de la couleur manquante, dans le titre je vois TOUTES LES COULEURS, il manque le blanc donc je suppose qu'il doit en manquer d'autres.
Mais sinon je le répète c'est bien foutu, les couleurs sont bien placées et là je dis chapeau !

Commentaire de francktfr le 31/05/2003 22:24:08

une map ne permettrait pas de modifier le pas. "DYNAMIQUE", tu te souviens ?
Je suis bien conscient que les 16 millions de couleurs ne sont pas présentes, tu en as mis combien dans ta ptite source pour les scrollbar ??
retourne a ton accordéon, tu n'es pas le bien venu ici.
c'est la derniere fois que je perds mon temps avec toi.
tes futurs messages seront simplement ignorés ...

Commentaire de revinc le 02/06/2003 08:18:36

c pas la peine de t'énerver francktfr lol !

Commentaire de seed le 02/06/2003 10:17:40

j ai une question qui va peut etre vous paraitre bete mais ca m etonne :
escque c est nrmal que l on ait l impressione que l etendu du vert soit plus long que les autres couleurs ??? ou c est moi qui vois mal???

Commentaire de LleWellA le 04/07/2003 08:26:52

Salut,

Tout d'abord bravo pour ton code.
Faut bien dire ce qui est ! bien pensé, optimisé, enfin comme il faut.

Ensuite, aux ABRUTIS de services qui ne pensent qu'a descendre les codeurs, ils feraient mieux de la fermer un peu et de tester le code qu'ils critiquent. Le BLANC (#FFFFFF) existe dans ce code. J'ai fait l'experience avec un pas de 1 en StepV et StepH et il y a toutes les couleurs ....
Bon le tableau fait a peu pres 50cm de long, donc faut mouliner avec la souris mais le blanc y est !!!!!!!!
Alors les cons du code, comme on dit chez moi : vos gueules les mouettes ! (j'habite pres de la mer)
J'ai déjà essuyé les commentaires d'abrutis, mais la il dépasse toutes les espérances !!

Franck, bon courage.

Commentaire de francktfr le 04/07/2003 08:47:49

Merci LleWellA ca fait plaisir d'etre suporté ;-)
Les abrutis dont tu parles, je les ignore, je n'ai pas envie de perdre
mon temps a leur répondre ... ;-)

ps: je n'ai pas vu de zip dans ta source pour le calendrier en asp

Commentaire de iubito le 04/07/2003 08:55:37

et ke pensez-vous de celui-là ? hein :)
il est plus rapide et plus performant, vous croyez pas ?

http://www.toutjavascript.com/main/script.php3?url=xmlcolpic

tadaaaa !!!! :o)

Commentaire de LleWellA le 04/07/2003 09:04:02

Eh ben quoi, il est pas de toi ce script !!!!
Et toi ?
Montre nous ce que TU sait faire !


Sinon pour mon calendrier, il est sur javascript, numéro 209 je crois
http://www.javascriptfr.com/article.aspx?Val=209
:p

Commentaire de iubito le 04/07/2003 09:18:58

non il n'est pas de moi, j'ai pas dit qu'il était de moi

moi g fais par exemple
conversion de couleur + dégradés en PHP :
http://www.asp-php.net/scripts/asp-php/html2rgb.php

et j'prépare http://sourceforge.net/projects/phpmybrowser

Commentaire de malhivertman1 le 11/02/2005 11:40:45

Moi je trouve que ton script est enormement bien, bravo, rien d'autre a dire

Commentaire de tich69 le 26/02/2005 13:50:37

Super ca déchire merci en plus compatible firefox :-)

Commentaire de super_mamie le 05/08/2006 12:46:02

Bien sympa :)
Mais ca manque cruellement de commentaires :(

Commentaire de BTAJV le 05/09/2006 19:45:54

Ton script est genial il va trop me servir bon le seul truc c Que les code couleur en html normalement ne sont pas en majuscule car ton script donne tout un minuscule

Commentaire de nolanne le 18/01/2008 16:16:11

Clair vraiment classe et très pratique ^^ merciiiii

Commentaire de arginine le 20/08/2008 13:28:57

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><body>
<table>
<tr>
<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("</table>")
</script>
</td>
</tr>
<tr>
<td>
<div id="ColorShow" style="width: 100px; height: 60px; border: 1px solid black"></div>
</td>
<td>
Code couleur : <input id="ColorCode" type="text" size="8" />
</td>
</tr>
</table>
</body>
</html>

Commentaire de playrough le 10/05/2009 11:10:48

merci beaucoup, super code!

Commentaire de pinacolada le 30/08/2009 11:09:41 10/10

Très bon code, propre et efficace. Merci.

 Ajouter un commentaire




Nos sponsors


Appels d'offres

Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,468 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales