Palette de couleurs

Soyez le premier à donner votre avis sur cette source.

Vue 6 348 fois - Téléchargée 347 fois

Télécharger le projet
Commenter

Description

Une palette de couleurs dans un bloc de type div. Le script est fait de trois boucles
les unes dans les autres et appliquées à combiner les couples d'un tableau.
Cette source se présente comme une variante des diverses possibilités qui existe
pour la création de palette (ici 216 couleurs).

Source / Exemple : 


<script type="text/javascript">
        //<![CDATA[ 
        function ecrirecouleur() {
            var i, j, k;
            var hexadecimal = new Array('00', '33', '66', '99', 'CC', 'FF');
            i = 0; while (i < 6) {
                couple1 = hexadecimal[i]; if (i > 0) document.write('<br\/>'); i++;
                j = 0; while (j < 6) {
                    couple2 = hexadecimal[j]; j++;
                    k = 0; while (k < 6) {
                        couple3 = hexadecimal[k];
                        codecouleur = couple1 + couple2 + couple3;
                        document.write('<span style="cursor: default; background:#' + codecouleur + '" onmouseover="document.getElementById(\'vision\').style.backgroundColor=\'#' + codecouleur + '\';" onclick="alert(\'#' + codecouleur + '\');">&nbsp;&nbsp;<\/span>');
                        k++;
                    }
                }
            }
        } //Nota: si vous changez le nombre de couples dans le tableau, faites varier les valeurs maximales de i j et k.
        //]]>
    </script>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
cs_Heirem
Messages postés
23
Date d'inscription
dimanche 16 juillet 2006
Statut
Membre
Dernière intervention
25 novembre 2011
 -
Je retiens ton sympathique code avec plaisir.
Il va m'être nécessaire dans un avenir tout proche.
Il sera logé dans une étiquette afin de proposer un choix de couleur.

J'aimerais préciser une petite chose à ton avantage: l'exemple du colopicker de John Dyer, suggéré par LEFAUVE42, comme souvent avec ce genre de goodies, nécessite beaucoup plus qu'un simple script. La plateforme Prototype en l'occurrence ;)
Signaler
LeFauve42
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009
 -
Effectivement c'est un code simple qui peut repondre a certains besoins (tout le monde n'a pas besoin de photoshop :o) ).

un autre petit detail :
//Nota: si vous changez le nombre de couples dans le tableau, faites varier les valeurs maximales de i j et k

Pourquoi tu ne remplaces pas simplement les 6 en durs par hexadecimal.length ?
Signaler
cs_lgh
Messages postés
41
Date d'inscription
vendredi 23 mai 2003
Statut
Membre
Dernière intervention
8 avril 2009
 -
Merci pour le commentaire.
Pour le CDATA, le W3C me l'a demandé pour valider la page.
Pour le niveau initié il m'a semblé surtout que ce n'était plus une fontion de débutant et comme ce n'est pas une fonction d'expert... Mais sans doute cela se discute.
Pour finir, j'ai déjà récupéré un color picker très complet, mais en fait il ne m'est pas très utile pour ce que je fais, comme des modifications de couleurs de polices d'écriture. Le script que je présente là, plutôt court se loge facilement partout et c'est ce qui importe.
Salut
Signaler
LeFauve42
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009
 -
Salut,

Ton source est sympa, mais de nos jours on trouve des color-pickers bien plus complets en JS, comme par exemple celui-ci : http://johndyer.name/lab/colorpicker/

Quelques remarques :
- Utiliser document.write() pour construire du html n'est pas super recommande.
Il vaudrait mieux utiliser le DOM pour ca.

- Je pensais aussi (mais je me trompe peut-etre) que les //<![CDATA[ et //]]> etaient maintenant "deprecated".

- Mettre plusieurs statements sur une meme ligne ne me parrait pas tres "maintenance friendly".

J'ai aussi un peu de mal avec le niveau "initie" pour trois boucles imbriquees et un peu de concatenation de chaines...

Sinon, ce serait bien d'avoir un lien en ligne pour tester ce que ca donne (il y a des milliers de scripts de ce genre. En general j'en essaie quelques uns jusqu'a ce que j'en trouve un qui rende bien, mais ceux qui n'ont pas de lien "demo" sont generalement ilimines d'office...).

Eric
Signaler
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
 3 -
Je t'envoie tout de même l'adresse.

http://www.editeurjavascript.com/scripts/scripts_formulaires_3_505.php

Le résultat est semblable mais pas identique. Il reste que ce code est l'un de mes préférés et l'un que j'ai le plus utilisé dans mes sources.

Have fun ;)

JDMCreator
Afficher les 7 commentaires
S'inscrire maintenant

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.

Du même auteur (cs_lgh)