begin process at 2012 05 28 10:50:05
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > JEU DE COULEURS DANS UN TABLEAU À 3 DIMENSION

JEU DE COULEURS DANS UN TABLEAU À 3 DIMENSION


 Information sur la source

Note :
7 / 10 - par 1 personne
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :Couleurs, 24 bits, Tableau, Tableaux, Couleur Niveau :Débutant Date de création :22/07/2009 Date de mise à jour :22/07/2009 19:18:47 Vu :4 332
Auteur : Niidhogg

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

 Description

Cliquez pour voir la capture en taille normale
Un tableau à 3 dimensions(Plusieurs tableau de 2 dimensions) des couleurs existante sur un PC. Jusqu'à 2^24 soit 16 777 216 couleurs avec leur niveau de rouge vert et bleu(sur 255, 255, 255).

Source

  • <style type="text/css">
  • table
  • {
  • border-collapse: collapse;
  • }
  • {
  • td
  • padding: 10px;
  • }
  • </style>
  • <script type="text/javascript">
  • function initColor( _divContent)
  • {
  • var a=1;
  • var b=12;
  • var max=256;
  • var x=0;
  • var y=0;
  • var z=0;
  • var div=Math.pow(2, (1/3*b));
  • div = Math.round(div)-1;
  • var mult = max/div;
  • mult = Math.round(mult);
  • while(z <= div)
  • {
  • var _table= document.createElement("table");
  • // Ajoute la table
  • document.getElementById(_divContent).appendChild(_table);
  • if(a==1){_table.border="1"}
  • y=0;
  • while(y <= div)
  • {
  • x=0;
  • // insère une ligne
  • var _row = _table.insertRow(y);
  • while(x <= div)
  • {
  • // insère une cellule.
  • var _cell = _row.insertCell(x);
  • _cell.style.backgroundColor = "rgb("+x*mult+", "+y*mult+", "+z*mult+")";
  • _cell.style.color = "rgb("+(max-x*mult)+", "+(max-y*mult)+", "+(max-z*mult)+")";
  • if(a==1)
  • {
  • _cell.innerHTML = (x*mult+"/"+y*mult+"/"+z*mult);
  • }
  • x++;
  • }
  • y++;
  • }
  • z++;
  • }
  • }
  • </script>
  • <body onload="initColor('divContent')">
  • <div id="divContent" ></div>
  • </body>
<style type="text/css">
	
	table
	{
		
		border-collapse: collapse;
		
	}
	
	{
	td
		
		padding: 10px;
		
	}
	
</style>

<script type="text/javascript">

	function initColor( _divContent)
	{
		
		var a=1; 
		var b=12; 
		
		var max=256; 
		var x=0; 
		var y=0; 
		var z=0; 
		
		var div=Math.pow(2, (1/3*b)); 
		div = Math.round(div)-1; 
		var mult = max/div; 
		mult = Math.round(mult); 
		
		while(z <= div) 
		{ 
			
			var _table= document.createElement("table"); 
			// Ajoute la table 
			document.getElementById(_divContent).appendChild(_table); 
			
			if(a==1){_table.border="1"} 
			
			y=0; 
			while(y <= div) 
			{ 
				
				x=0; 
				// insère une ligne 
				var _row = _table.insertRow(y); 
				
				while(x <= div) 
				{ 
					
					// insère une cellule. 
					var _cell = _row.insertCell(x); 
					_cell.style.backgroundColor = "rgb("+x*mult+", "+y*mult+", "+z*mult+")"; 
					_cell.style.color = "rgb("+(max-x*mult)+", "+(max-y*mult)+", "+(max-z*mult)+")"; 
					if(a==1) 
					{ 
						
						_cell.innerHTML = (x*mult+"/"+y*mult+"/"+z*mult); 
						
					}
					
					x++; 
				}
				
				y++; 
			
			}
			
			z++; 
		} 
	}

</script>

<body onload="initColor('divContent')"> 

<div id="divContent" ></div> 
</body>

 Conclusion

/*Pas d'archive Zip*/

var a=1; <- Si 1 alors affichage du tableau, sinon ont affiche juste les couleurs
var b=9; <- De 1 à 24, 2^b couleurs (Plus exactement Math.round(2^(1/3*b)))^3) ATTENTION: Ne mettez pas trop haut sinon pauvre PC..

Merci à Zobibol pour le document.write() ;)


 Historique

22 juillet 2009 13:55:49 :
Corection de certaine fautes d'orthographe + ATTENTION
22 juillet 2009 19:18:47 :
Suppression des document.write()

 Sources du même auteur

Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE
Toutes les sources de Niidhogg

 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip EZEDITTABLE par koalyptus
Source avec Zip PALETTE DE COULEURS par lgh

Commentaires et avis

Commentaire de jdmcreator le 22/07/2009 14:26:43

Bonjour,

Pour remplacer les document.write(), tu peux avoir dans ta page un <div> dont tu modifie le contenu HTML à l'aide de la propriété innerHTML ;)

JDMCreator

Commentaire de Niidhogg le 22/07/2009 14:50:46

Ok, merci. Mais j'aurai encore une petite question. innerHTML() rajouter a la suite du contenue du div, ou le remplace ?

Commentaire de jdmcreator le 22/07/2009 15:03:30

innerHTML est une propriété et non une fonction. On l'écrira ainsi :
document.getElementById(id).innerHTML=nouvellevaleur;
Elle remplace le contenu. Pour l'ajouter, tu peux faire :
document.getElementById(id).innerHTML=document.getElementById(id).innerHTML+nouvellevaleur;

JDMCreator

Commentaire de Niidhogg le 22/07/2009 20:17:52

document.write coriger.

Commentaire de LeFauve42 le 27/07/2009 11:48:22 7/10

Salut,

C'est un bon exemple d'utilisation du DOM, bien que pas super utile (un background png elargi a la bonne taille peut faire la meme chose).
De plus, c'est quoi ces valeurs de 259 pour les composantes ? En principe, ca s'arrete a 255.
Pour info, il est generalement aquis qu'il vaut mieux se limiter aux 216 couleurs "WebSafe" pour plus de portablite, mais pourquoi pas si tu veux vraiment plus de couleurs.

A propos du code, j'ai deux remarques (et demi) :
- document.getElementById() est assez couteux. Tu aurais donc interet a cacher le resultat dans une variable plutot que de le reexecuter a chaque iteration de ta boucle.
- Dans ce type d'utilisation, tu peux remplacer tes while par des for.
Au lieu de :
  y=0;
  while(y <= div)
  {
    // Ton code ici
    y++;
  }
tu peux avoir:
  for(y=0; y <= div; ++y)
  {
    // Ton code ici
  }

- Derniere demi remarque: Quand tu n'utilises pas le code de retour, la preincrementation est plus rapide que la postdecrementation. En clair, utilise "++y" au lieu de "y++" (les navigateurs modernes devraient optimiser ca tout seuls, mais pense aux necessiteux qui n'ont qu'Internet Explorer pour naviguer :o)  )

Eric

Commentaire de LeFauve42 le 27/07/2009 11:52:49

Ah oui... j'ai oublie :
Ton algo pour trouver la couleur avec le meilleur contraste (pour la couleur du texte) n'est pas le plus efficace (regarde les couleurs vers le milieu du spectre).
Au lieu de mettre dans chaque composante "max-c" (si c est la valeur de la composante pour le background), essaie "(c>max/2)?0:max" (sans les "s bien sur :o) ).
En clair, si la composante est superieurs a la moitie de sa valeur, tu la mets a zero, sinon tu la mets au max.

Le rendu sera plus agreable.

Eric

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

2 couleurs d'une cellule sur clic [ par matos_deluxe ] Salut, je voudrais changer la couleur du fond d'une cellule d'un tableau html sur l'action 'clic' MAIS lorsque je reclic sur la cellule un seconde foi Changement de couleur de cellules dans un tableau [ par krevette ] Bonjour tt le mondej'aimerais changer la couleur des cellules d'un tableau (jusque la pas de probleme). Mais ce qu'il y a c'est que je voudrais change changer la couleur des cellules d'un tableau [ par basti ] Bonjour tout le monde,J'aimerais changer la couleur des cellules d'un tableau. Le probleme est que je suis débutant en Javascript alors jai choper la Comment changer la couleur d'un tableau avec Netscape ? [ par nicolos ] BonjourJe voudrais savoir comment pouvoir changer la couleur d'un tableau, ou plutôt d'une cellule à partir de son identifiant pour que cela puisse ma Redimensionnement de tableaux sous javascript/netscape [ par Blasteur ] Bonjour à tous!Je souhaite redimensionner dynamiquement un tableau (du nom de 'CESSION') grâce à une fonction javascript.Le problème c'est que le code Couleur d'une cellule d'un tableau html [ par ypothier ] Est-ce que quelqu'un pourrai m'aider. J'ai un tableau HTML bien simple. Mais j'aimerai être capable de modifier la class à laquel il appartient dans u couleur cellule varie selon valeurs texte [ par jpdeion ] Bonour,voila je d&#233;bute, dans un tableau html avec des donn&#233;es textes (nombres import&#233;es avec ASP ou PHP (je sais d&#233;j&#224; faire c Déclarer Tableaux de taille non connue [ par chour03 ] Bonjour, Je voudrais simplement d&#233;clarer un tableau de deux dimensions, mais je ne connais pas sa taille &#224; l'avance... Je cherche un moyen s Rollover sur une cellule de tableau vers un input type="text" [ par tekyo ] Bonjour, Voil&#224;,j'ai un tableau avec de multiples cellules, dans chaque cellule, une simple couleur&nbsp;dont le code&nbsp;doit &#234;tre renvoyer Modifier couleur lien [ par hlimaiem ] Limaiem heykelBonjour,Mon tableau affiche des donnees depuis ma base mysql. La description de chaque ligne et contenu dans un lien pour ouvrir une fen


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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,998 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)