begin process at 2012 02 12 20:42:09
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > UN SÉLÉCTEUR DE COULEURS SUR LE PRINCIPE DU CERCLE

UN SÉLÉCTEUR DE COULEURS SUR LE PRINCIPE DU CERCLE


 Information sur la source

Note :
9 / 10 - par 2 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :selecteur, couleurs, bbcode, editeur, rgb Niveau :Initié Date de création :10/11/2006 Date de mise à jour :17/11/2006 14:01:53 Vu / téléchargé :13 265 / 488
Auteur : coucou747

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Ce code comporte un peu de php pour éviter de faire une boucle de html, (j'aurais pu mettre des document.getElementById(...).innerHTML+=... mais j'avais pas envi...)

Bref, ça permet de faire un sélécteur de couleur pour un éditeur de texte BBcode par exemple...

Source

  • <html>
  • <head>
  • <title>Palette de couleurs</title>
  • </head>
  • <body>
  • <script>
  • var rouge=0;
  • var vert=0;
  • var bleu=0;
  • function compo(r){
  • var coul=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
  • return coul[(r-r%16)/16]+coul[r%16];
  • }
  • function couleur(r,v,b){
  • return compo(r)+compo(v)+compo(b);
  • }
  • function eloigne(r,v,b){
  • //return compo(255-r)+compo(255-v)+compo(255-b);
  • re=(127>r)?255:0;
  • ve=(127>v)?255:0;
  • be=(127>b)?255:0;
  • return compo(re)+compo(ve)+compo(be);
  • }
  • function select_rouge(i){
  • rouge=i;
  • for (i=0;i<8;i++){
  • for (j=0;j<8;j++){
  • document.getElementById('bleu_'+i+'_'+j).style.backgroundColor=couleur(rouge, vert, i*32+j*2);
  • document.getElementById('vert_'+i+'_'+j).style.backgroundColor=couleur(rouge, i*32+j*2, bleu);
  • }
  • }
  • select_color();
  • }
  • function select_vert(i){
  • vert=i;
  • for (i=0;i<8;i++){
  • for (j=0;j<8;j++){
  • document.getElementById('bleu_'+i+'_'+j).style.backgroundColor=couleur(rouge, vert, i*32+j*2);
  • document.getElementById('rouge_'+i+'_'+j).style.backgroundColor=couleur(i*32+j*2, vert, bleu);
  • }
  • }
  • select_color();
  • }
  • function select_bleu(i){
  • bleu=i;
  • for (i=0;i<8;i++){
  • for (j=0;j<8;j++){
  • document.getElementById('rouge_'+i+'_'+j).style.backgroundColor=couleur(i*32+j*2, vert, bleu);
  • document.getElementById('vert_'+i+'_'+j).style.backgroundColor=couleur(rouge, i*32+j*2, bleu);
  • }
  • }
  • select_color();
  • }
  • function select_color(){
  • var coul=couleur(rouge, vert, bleu);
  • document.getElementById('couleur').style.backgroundColor=coul;
  • document.getElementById('couleur').style.color=eloigne(rouge, vert, bleu);
  • document.getElementById('couleur').innerHTML="couleur séléctionnée : #"+coul+" ou rgb("+rouge+", "+vert+", "+bleu+")";
  • }
  • </script>
  • <table>
  • <tr>
  • <th style="background-color:#FAA;">Rouge</th>
  • <th style="background-color:#AFA;">Vert</th>
  • <th style="background-color:#AAF;">Bleu</th>
  • </tr>
  • <tr><td>
  • <table>
  • <?php
  • $coul=array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
  • for ($i=0;$i<8;$i++){
  • echo '<tr>';
  • for ($j=0;$j<8;$j++){
  • echo '<td><input type="button" onclick="select_rouge('.($i*32+$j*2).
  • ');" id="rouge_'.$i.'_'.$j.'" style="background-color:'.$coul[$i*2].$coul[$j*2].'0000;"></td>
  • ';
  • }
  • echo '</tr>';
  • }
  • echo '</table>
  • </td>
  • <td>
  • <table>';
  • for ($i=0;$i<8;$i++){
  • echo '<tr>';
  • for ($j=0;$j<8;$j++){
  • echo '<td><input type="button" onclick="select_vert('.($i*32+$j*2).
  • ')" id="vert_'.$i.'_'.$j.'" style="background-color:00'.$coul[$i*2].$coul[$j*2].'00;"></td>
  • ';
  • }
  • echo '</tr>';
  • }
  • echo '</table>
  • </td>
  • <td>
  • <table>';
  • for ($i=0;$i<8;$i++){
  • echo '<tr>';
  • for ($j=0;$j<8;$j++){
  • echo '<td><input type="button" onclick="select_bleu('.($i*32+$j*2).
  • ')" id="bleu_'.$i.'_'.$j.'" style="background-color:0000'.$coul[$i*2].$coul[$j*2].';"></td>
  • ';
  • }
  • echo '</tr>';
  • }
  • ?>
  • </table>
  • </td>
  • </tr>
  • <tr>
  • <td colspan="3" id="couleur" style="background-color:#000;color:#FFF;">
  • couleur séléctionnée
  • </td>
  • </tr>
  • </table>
  • </body>
  • </html>
<html>
<head>
	<title>Palette de couleurs</title>
</head>
<body>
<script>
	var rouge=0;
	var vert=0;
	var bleu=0;
	function compo(r){
		var coul=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
		return coul[(r-r%16)/16]+coul[r%16];
	}
	function couleur(r,v,b){
		return compo(r)+compo(v)+compo(b);
	}
	function eloigne(r,v,b){
		//return compo(255-r)+compo(255-v)+compo(255-b);
		re=(127>r)?255:0;
		ve=(127>v)?255:0;
		be=(127>b)?255:0;
		return compo(re)+compo(ve)+compo(be);
	}
	function select_rouge(i){
		rouge=i;
		for (i=0;i<8;i++){
			for (j=0;j<8;j++){
				document.getElementById('bleu_'+i+'_'+j).style.backgroundColor=couleur(rouge, vert, i*32+j*2);
				document.getElementById('vert_'+i+'_'+j).style.backgroundColor=couleur(rouge, i*32+j*2, bleu);
			}
		}
		select_color();
	}
	function select_vert(i){
		vert=i;
		for (i=0;i<8;i++){
			for (j=0;j<8;j++){
				document.getElementById('bleu_'+i+'_'+j).style.backgroundColor=couleur(rouge, vert, i*32+j*2);
				document.getElementById('rouge_'+i+'_'+j).style.backgroundColor=couleur(i*32+j*2, vert, bleu);
			}
		}
		select_color();
	}
	function select_bleu(i){
		bleu=i;
		for (i=0;i<8;i++){
			for (j=0;j<8;j++){
				document.getElementById('rouge_'+i+'_'+j).style.backgroundColor=couleur(i*32+j*2, vert, bleu);
				document.getElementById('vert_'+i+'_'+j).style.backgroundColor=couleur(rouge, i*32+j*2, bleu);
			}
		}
		select_color();
	}
	function select_color(){
		var coul=couleur(rouge, vert, bleu);
		document.getElementById('couleur').style.backgroundColor=coul;
		document.getElementById('couleur').style.color=eloigne(rouge, vert, bleu);
		document.getElementById('couleur').innerHTML="couleur séléctionnée : #"+coul+" ou rgb("+rouge+", "+vert+", "+bleu+")";
	}
</script>
<table>
<tr>
	<th style="background-color:#FAA;">Rouge</th>
	<th style="background-color:#AFA;">Vert</th>
	<th style="background-color:#AAF;">Bleu</th>
</tr>
<tr><td>
<table>
<?php
$coul=array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
for ($i=0;$i<8;$i++){
	echo '<tr>';
	for ($j=0;$j<8;$j++){
		echo '<td><input type="button" onclick="select_rouge('.($i*32+$j*2).
		');" id="rouge_'.$i.'_'.$j.'" style="background-color:'.$coul[$i*2].$coul[$j*2].'0000;"></td>
		';
	}
	echo '</tr>';
}
echo '</table>
</td>
<td>
<table>';
for ($i=0;$i<8;$i++){
	echo '<tr>';
	for ($j=0;$j<8;$j++){
		echo '<td><input type="button" onclick="select_vert('.($i*32+$j*2).
		')" id="vert_'.$i.'_'.$j.'" style="background-color:00'.$coul[$i*2].$coul[$j*2].'00;"></td>
		';
	}
	echo '</tr>';
}
echo '</table>
</td>
<td>
<table>';
for ($i=0;$i<8;$i++){
	echo '<tr>';
	for ($j=0;$j<8;$j++){
		echo '<td><input type="button" onclick="select_bleu('.($i*32+$j*2).
		')" id="bleu_'.$i.'_'.$j.'" style="background-color:0000'.$coul[$i*2].$coul[$j*2].';"></td>
		';
	}
	echo '</tr>';
}
?>
</table>
</td>
</tr>
<tr>
	<td colspan="3" id="couleur" style="background-color:#000;color:#FFF;">
	couleur séléctionnée
	</td>
</tr>
</table>
</body>
</html>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

17 novembre 2006 14:01:53 :
ajout d'un zip

 Sources du même auteur

NOTATION CLASSIQUE VERS NOTATION NPI
LIST.ML D'OCAML EN JAVASCRIPT
Source avec Zip Source avec une capture UN CHRONOMETRE EN SVG+JAVASCRIPT
Source avec Zip Source avec une capture WYSIWYG TOTALEMENT OO
Source avec Zip Source avec une capture DU DOM EN SVG : UNE HORLOGE ANALOGIQUE
Toutes les sources de coucou747

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

Source avec une capture JEU DE COULEURS DANS UN TABLEAU À 3 DIMENSION par Niidhogg
Source avec Zip Source avec une capture AYXCOLORPIKER - SÉLÉCTEUR DE COULEURS JAVASCRIPT par alphayax
Source avec Zip Source avec une capture DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEU... par DARKSIDIOUS
Source avec Zip EDITEUR VBSCRIPT (EVBS) par stfou
Source avec Zip EDITEUR BBCODE AVEC VISUALISATION EN DIRECT par Vince_02

Commentaires et avis

Commentaire de twisteurwin le 11/11/2006 14:41:25

Salut !
Bon boulot, rien d'autre à dire concernant cette source
C'est embetant de copier coller les numéros des lignes lors du drag & drop, tu devrais peut être mettre le fichier en dl.
+++

Commentaire de taz_iup le 13/11/2006 13:52:39

Zut je trouve plus le lien pour etre averti par mail lors d'un changement. J'attend avec impatience le fichier en dl... :D

Commentaire de coucou747 le 14/11/2006 13:26:40 administrateur CS

désolé... je ferais ça bientot, merci pour ces encouragements :)

Commentaire de kankrelune le 14/11/2006 16:09:04

Petite question con qui, soit dit en passant, ne remet pas en cause la qualité de la source... .. .

Pourquoi utiliser php pour la boucle alors que javascript aurait pu le faire... avec document.write() pas document.getElementById(...).innerHTML+= comme tu le dis en début de page... .. .

@ tchaOo°

Commentaire de taz_iup le 14/11/2006 16:13:22

tout simplement : les document.write, il faut faire attention à quand on les fait.... :D

Commentaire de kankrelune le 14/11/2006 16:21:49

Ouep je sais merci... en tout cas chez moi ça fonctionne parfaitement... .. . ;o)

Je pense surtout que l'avantage du document.getElementById(...).innerHTML+= est de pouvoir mettre le tout dans une fonction et ainsi avoir la possibilité de réinitialiser la palette sans avoir à recharger la page... .. .

@ tchaOo°

Commentaire de coucou747 le 16/11/2006 11:03:42 administrateur CS

réinitialiser la palette avec innerHTML ??? euh... faut pas faire ça, tu reposes simplement les couleurs d'origine dans les cases...

document.write ou innerHTML ne servent pas à ça, ils peuvent servir uniquement si tu veux mettre plusieurs palettes simplement sur ta page...


mon choix est discutable, mais c'est un détail...

Commentaire de coucou747 le 17/11/2006 14:02:27 administrateur CS

zip ajouté

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Editeur d'équation en ligne [ par Blasteur ] Salut,je suis à la recherche d'un outil permettant de saisir des équations mathématiques sur une page web et générant ensuite soit tout le code html n editeur [ par abru ] Question de débutant :Existe-t-il un éditeur qui montre par des lignes le rapport entre les balises et leur fermeture (il y a longtemps, cela existait Editeur en ligne pb pour la creation de lien html [ par sticky97 ] salut,g un pb avec mon programme lorske je fais un lien (&lt;a href="..."&gt;), il rajoute "http://localhost" à l'url ke g entrerpar exemple je rentre editeur html pb de balise ki apparait plusieur fois [ par sticky97 ] salut,g fais un editeur html en wysiwyg... g rajouter du javascript pour faire lebalise &lt;font color...&gt;&lt;p...&gt;.... et je voudrai ke le prog Editeur compatible avec Netscape [ par bradgeone ] Salut,Je cherche à faire un éditeur de page web online en javascript qui serait 100% compatible avec Netscape 6 et/ou 7. (un éditeur dont l'interface controle de formulaire [ par MarsL ] Mars'Lj'ai repris un source du site que j'ai adapté à mon prog, ca ne fonctionne pas et je ne vois pas pourquoi. Il se peut que se soit tout bete mais Ajouter du texte ds un div... [ par maesius ] Bonjour,Voila g fait un petit editeur html WYSIWYG en JS. Le texte de mon editeur est placé ds un DIV.Voici mon pb :J'arrive sur un click bouton à raj Ouvrir un Editeur wysiwyg GRATUIT dans popup & OFFLINE [ par artus ] Bonjour.J'ai reussi a trouver une Source Éditeur Wysiwyg Gratuit PAS MAL, complet mais online.Il y a t-il quelqu'un qui peut en faire un editeur OFFL Editeur javascript [ par yoggi22 ] Bonjourest ce que qlq 'un connait un editeur de javascript gratuit et sympa.Merciyoggi22 Passage à la ligne dans un editeur texte en JS [ par chguigoz ] Bonjour tout le monde!J'utilise un editeur de texte en js fonctionnant dans une iframe.Ca fonctionne trés bien à part que j'ai un petit probleme.Le so


Nos sponsors


Sondage...

Comparez les prix


Sony Ericsson XPERIA X10 (1 Go)
Entre 649€ et 649€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

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,702 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)