Palette de couleurs

Télécharger le projet
Commenter

Description

Voici une palette de couleur en javascript. Cette palette de couleur sous le style de celle de skyrock à quelques fonction supplémentaires. A vous d'en juger.

Source / Exemple : 


function palette(id) {
	/* Définition des variables */
	var rouge    = 15; /* Indice du rouge */
	var vert     = 0;  /* Indice du vert */
	var bleu     = 0;  /* Indice du bleu */
	var longueur = 50; /* longueur de dégradé */
	var palette  = document.getElementById('palette_table_'+id); /* Emplacement de la palette */
	
	/* Préparation du rendu */
	var rendu    = "<table style=\"border : 1px solid #000000; border-collapse : collapse;\"><tr>";
	
	/* Rendu de la colonne blanche */
	rendu += "<td style=\"height : 12px; width : 10px; background : #ffffff; border : 0px; padding : 1px; border-right : 1px solid #000000;\"";
	rendu += "onClick=\"finaliz('15', '15', '15', '"+id+"'); affiche_color('ffffff', '"+id+"');\"";
	rendu += "></td>";
	
	/* Dégradé du rouge au magenta */
	while(rouge == 15 && bleu < 15) {
		rendu += generate_couleur(rouge, vert ,bleu, id);
		bleu++;
	}
	
	/* Dégradé du magenta au bleu */
	while(bleu == 15 && rouge > 0) {
		rendu += generate_couleur(rouge, vert ,bleu, id);
		rouge--;
	}
	
	/* Dégradé du bleu au bleu ciel */
	while(bleu == 15 && vert < 15) {
		rendu += generate_couleur(rouge, vert ,bleu, id);
		vert++;
	}
	
	/* Dégradé du bleu ciel au vert */
	while(vert == 15 && bleu > 0) {
		rendu += generate_couleur(rouge, vert ,bleu, id);
		bleu--;
	}
	
	/* Dégradé du vert au jaune */
	while(vert == 15 && rouge < 15) {
		rendu += generate_couleur(rouge, vert ,bleu, id);
		rouge++;
	}
	
	/* Dégradé du jaune au rouge */
	while(rouge == 15 && vert >= 0) {
		rendu += generate_couleur(rouge, vert ,bleu, id);
		vert--;
	}
	/* Fermeture du rendu */
	rendu += "</tr></table>";
	
	/* Affichage du rendu */
	palette.innerHTML = rendu;
	finaliz('15', '15', '15', id);
}
function finaliz(r, v, b, id) {
	var palette  = document.getElementById('palette_finaliz_'+id); /* Emplacement de la palette */
	
	/* Préparation du rendu */
	var rendu    = "<table style=\"border : 1px solid #000000; border-collapse : collapse;\"><tr>";
	
	/* Définition des couleur en héxa */
	var Hexa     = new Array('00','11','22','33','44','55','66','77','88','99','aa','bb','cc','dd','ee','ff');
	
	while ( r > 0 || v > 0 || b > 0 ) {
		color = Hexa[r]+Hexa[v]+Hexa[b];
		
		/* Rendu de la colonne avec le fond */
		rendu += "<td style=\"height : 12px; width : 1px; border : 0px; padding : 1px; background : #"+color+"\"";
		
		/* Interaction en javascript */
		rendu += "onMouseOver=\"this.style.background = '#ffffff';\"";
		rendu += "onMouseOut=\"this.style.background = '#"+color+"';\"";
		rendu += "onClick=\"affiche_color('"+color+"', '"+id+"');\"";
		rendu += "></td>";
		if ( r != 0 ) {
			r--;
		}
		if ( v != 0 ) {
			v--;
		}
		if ( b != 0 ) {
			b--;
		}
	}
	/* Rendu de la colonne avec le fond */
	rendu += "<td style=\"height : 12px; width : 1px; border : 0px; padding : 1px; background : #000000\"";
	
	/* Interaction en javascript */
	rendu += "onMouseOver=\"this.style.background = '#ffffff';\"";
	rendu += "onMouseOut=\"this.style.background = '#000000';\"";
	rendu += "onClick=\"affiche_color('000000', '"+id+"');\"";
	rendu += "></td>";
	/* Fermeture du rendu */
	rendu += "</tr></table>";
	
	/* Affichage du rendu */
	palette.innerHTML = rendu;
}
function generate_couleur(r, v ,b, id) {
	/* Définition des couleur en héxa */
	var Hexa     = new Array('00','11','22','33','44','55','66','77','88','99','aa','bb','cc','dd','ee','ff');
	color = Hexa[r]+Hexa[v]+Hexa[b];
	
	/* Rendu de la colonne avec le fond */
	colonne =  "<td style=\"height : 12px; width : 1px; border : 0px; padding : 1px; background : #"+color+"\"";
	
	/* Interaction en javascript */
	colonne += "onMouseOver=\"this.style.background = '#ffffff';\"";
	colonne += "onMouseOut=\"this.style.background = '#"+color+"';\"";
	colonne += "onClick=\"finaliz('"+r+"', '"+v+"', '"+b+"', '"+id+"');\"";
	colonne += "></td>";
	
	/* Renvoi du rendu */
	return colonne;
}
function affiche_color(color, id) {
	var affiche  = document.getElementById('palette_color_'+id);
	affiche.value = "#"+color;
}
Télécharger le projet

Codes Sources

A voir également

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.