CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2009 01 10 01:00:43

[TIPS] EVITER LE DOUBLE CLICK SUR UN POSTBACK par Luke77

STYLECOP ET FXCOP par Mona7170

QUESTION SQL SERVER POUR LES EXPERTS par RaptorXP

[OPEN XML] LES LIENS ET LES TWITTERS DE LA SEMAINE 05/01/2009 par neodante

[WPF] COMMENT ASSIGNER UNE RESSOURCE DYNAMIQUE DEPUIS LE CODE-BEHIND ? par Thomas LEBRUN

REPONSE : RéSOLUTION D'éCRAN par alaindu_33

RE : PROBLèME POUR CHANGER LE DOCUMENT.BGCOLOR DANS IE par scratchdesign

RE : MAITRISE D'UN COPIER/COLLER DANS UNE IFRAME par LHUZ

PROBLèME POUR CHANGER LE DOCUMENT.BGCOLOR DANS IE par scratchdesign

RE : MAITRISE D'UN COPIER/COLLER DANS UNE IFRAME par Bul3

+ de logiciels à télécharger

1 331 329 membres
1 nouveaux aujourd'hui
14 644 membres club

Trouver une ressource

Trouvez une ressource parmi 39 269 codes, 1 223 691 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

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

Information sur la source

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é: 8 685 / 385

Auteur : coucou747

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

9,00 / 10

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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

palette.php 3 012 octets

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

UN CHRONOMETRE EN SVG+JAVASCRIPT

WYSIWYG TOTALEMENT OO

DU DOM EN SVG : UNE HORLOGE ANALOGIQUE

Toutes les sources de coucou747

Sources de la même categorie

VÉRIFICATION DU NUMÉRO DE TVA INTRACOMMUNAUTAIRE D'UNE SOCIÉ... par vilfarfadet

OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U... par yoyo17560

UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir

ESTIMATION DU DEGRÉ DE CONFIANCE À ACCORDER À UN MOT DE PASS... par vilfarfadet

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT par kgilbert

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

AYXCOLORPIKER - SÉLÉCTEUR DE COULEURS JAVASCRIPT par alphayax

DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEU... par DARKSIDIOUS

EDITEUR VBSCRIPT (EVBS) par stfou

EDITEUR JAVA par yousfane

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

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

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

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 (<a href="...">), 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 <font color...><p...>.... 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