Palette de couleur

Télécharger le projet
Commenter

Description

il s'agit d'une palette de couleur je me suis efforce de la rendre designe et compatible avec touts les navigateurs dont ie 5.5 meme si le rendu n'est pas le meme qu'avec un navigateur moderne sa fonctionne

Source / Exemple : 


function selecte(ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}

function couleur(e){

var tabcode=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
dde=(navigator.vendor) ? document.body : document.documentElement;
var setX =e.clientX + dde.scrollLeft;
var lui=(navigator.appName.substring(0,3)=="Mic") ? event.srcElement : e.currentTarget;
var dec=(navigator.appName.substring(0,3)=="Ope") || (navigator.userAgent.substring(30,31)==8) ? 0 : 3;
lui.childNodes[0].nodeValue=setX-lui.parentNode.parentNode.offsetLeft-lui.offsetLeft-dec;  //3 est la taille de la bordure du div genecoul
var el=lui.childNodes[0].nodeValue;
document.getElementById('cur'+lui.id).style.left=setX-lui.parentNode.parentNode.offsetLeft-lui.parentNode.offsetLeft-lui.offsetLeft-2.5-dec+'px';  //5 est la taille de la bordure du div genecoul plus la taille de l'aiguille divisé par deux
if(el>=0 && el<=255){
var el2=tabcode[Math.floor((el/16))];
el=tabcode[Math.round((el%16))];
el=el2+el;
var ch=document.getElementById('chiffre').value;

switch (lui.id){
  case "rouge": el=ch.substring(0,1)+el+ch.substring(3,7); break;
  case "vert": el=ch.substring(0,3)+el+ch.substring(5,7); break;
  case "bleu": el=ch.substring(0,5)+el; break;
  }
document.getElementById('chiffre').value=el;
document.getElementById('divcoul').style.backgroundColor=el;
}
}

function evenements(lui){

if(navigator.appName.substring(0,3)=="Mic"){
var luie=event.srcElement;
luie.attachEvent('onmousemove',couleur);
luie.attachEvent('onmouseout',fin);
luie.attachEvent('onmouseup',fin);
document.documentElement.attachEvent("onmousemove",selecte);
}
else{
lui.setAttribute("onmouseup","fin(this)", false);
lui.setAttribute("onmouseout","fin(this)", false);
lui.setAttribute("onmousemove","couleur(event)", false);
document.documentElement.addEventListener("mousedown", selecte, false);
}
}

function fin(lui){

if(navigator.appName.substring(0,3)=="Mic"){
luilui=event.srcElement;
luilui.detachEvent('onmouseout',fin);
luilui.detachEvent('onmouseup',fin);
luilui.detachEvent('onmousemove',couleur);
document.documentElement.detachEvent("onmousemove",selecte);
}
else{
lui.removeAttribute("onmousemove","couleur(event)", false);
lui.removeAttribute("onmouseout","fin(this)", false);
document.documentElement.removeEventListener("mousedown", selecte, false);
lui.removeAttribute("onmouseup","fin(this)", false);
}
}

function fade(element,sens,vitesse){

if(arguments.length>=1){
this.el=typeof (arguments[0])=='string' ? document.getElementById(arguments[0]).style : document.getElementById(element.id).style;
this.sens=arguments[1];
this.setvit=arguments[2];
this.sens=='plus' ? this.prog=0 : this.prog=1;
}
this.sens=='plus' ? this.prog+=0.1 : this.prog-=0.1;

if(document.all && !window.opera){
this.el.filter = 'alpha(opacity='+(this.prog*100)+')';
} 
else{
this.el.opacity=this.prog;
}
if(this.prog>=1 && this.sens=='plus'){
return false;
}
if(this.prog<=0 && this.sens=='moins'){
return false;
} 
setTimeout('fade()',this.setvit);
}

function creation(elem,parent){

var ddc=(arguments[1]=='body') ? document.body : document.getElementById(parent);

var constrution=document.createElement(elem);
if((arguments.length>2)){
var arle=2;
while (arle<arguments.length){
constrution.setAttribute(arguments[arle],arguments[arle+1]);
arle+=2;
}
}
ddc.appendChild(constrution);
}

function arcenciel(){
var nav=parseInt(navigator.userAgent.substring(30,31))<=7 ? true : false
var j=0
var el=document.getElementById('arccoul')
for (var i=0; i<=255; i+=6){
creation('div','arccoul','class','Style1','style','background-color:rgb(255,'+i+',0);left:'+j+'px','onclick','gesticoul(this)')
if(nav){
el.getElementsByTagName('div')[j].style.backgroundColor='rgb(255,'+i+',0)'
}
j++
}
for (var i=255; i>=0; i-=6){
creation('div','arccoul','class','Style1','style','background-color:rgb('+i+',255,0);left:'+j+'px','onclick','gesticoul(this)')
if(nav){
el.getElementsByTagName('div')[j].style.backgroundColor='rgb('+i+',255,0)'
}
j++
}
for (var i=0; i<=255; i+=6){
creation('div','arccoul','class','Style1','style','background-color:rgb(0,255,'+i+');left:'+j+'px','onclick','gesticoul(this)')
if(nav){
el.getElementsByTagName('div')[j].style.backgroundColor='rgb(0,255,'+i+')'
}
j++
}
for (var i=255; i>=0; i-=6){
creation('div','arccoul','class','Style1','style','background-color:rgb(0,'+i+',255);left:'+j+'px','onclick','gesticoul(this)')
if(nav){
el.getElementsByTagName('div')[j].style.backgroundColor='rgb(0,'+i+',255)'
}
j++
}
for (var i=0; i<=255; i+=6){
creation('div','arccoul','class','Style1','style','background-color:rgb('+i+',0,255);left:'+j+'px','onclick','gesticoul(this)')
if(nav){
el.getElementsByTagName('div')[j].style.backgroundColor='rgb('+i+',0,255)'
}
j++
}
for (var i=255; i>=0; i-=6){
creation('div','arccoul','class','Style1','style','background-color:rgb(255,0,'+i+');left:'+j+'px','onclick','gesticoul(this)')
if(nav){
el.getElementsByTagName('div')[j].style.backgroundColor='rgb(255,0,'+i+')'
}
j++
}
if(nav){
var allElements = el.getElementsByTagName('div'); 
for (var i = 0; i< allElements.length; i++){
allElements[i].className='Style1'
allElements[i].style.left=i
allElements[i].onclick=function(){gesticoul(this)}
}
}
}

function gesticoul(ev){

var tabcode=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var val=ev.style.backgroundColor;

if(val.substr(0,1)=='#'){
val=[parseInt(val.substr(1,2),16),parseInt(val.substr(3,2),16),parseInt(val.substr(5,2),16)]
}
else{
val=val.replace(/rgb\(/gi,"");
val=val.replace(/\)/gi,"");
val=val.split(",");
}
document.getElementById('rouge').childNodes[0].nodeValue=parseInt(val[0]);
document.getElementById('vert').childNodes[0].nodeValue=parseInt(val[1]);
document.getElementById('bleu').childNodes[0].nodeValue=parseInt(val[2]);
document.getElementById('divcoul').style.backgroundColor=ev.style.backgroundColor;
document.getElementById('currouge').style.left=parseInt(val[0])-3+'px';
document.getElementById('curvert').style.left=parseInt(val[1])-3+'px';
document.getElementById('curbleu').style.left=parseInt(val[2])-3+'px';
var valcoul='';
for (var i=0; i<=2; i++){
var el2=tabcode[Math.floor((val[i]/16))];
var el=tabcode[Math.round((val[i]%16))];
valcoul+=el2+el;
}
document.getElementById('chiffre').value='#'+valcoul;
}

function initcoul(){

if(document.getElementById('genecoul')==null){
creation('div','body','id','genecoul');
creation('div','genecoul','id','genebar');
creation('div','genebar','id','rouge','onmousedown','evenements(this)');
document.getElementById('rouge').appendChild(document.createTextNode('00'));
creation('div','rouge','id','currouge');
creation('div','genebar','id','vert','onmousedown','evenements(this)');
document.getElementById('vert').appendChild(document.createTextNode('00'));
creation('div','vert','id','curvert');
creation('div','genebar','id','bleu','onmousedown','evenements(this)');
document.getElementById('bleu').appendChild(document.createTextNode('00'));
creation('div','bleu','id','curbleu');
creation('div','genebar','id','arccoul','onmousedown','evenements(this)');
creation('div','genecoul','id','chtb');
creation('input','chtb','id','chiffre','value','#000000','readonly','readonly');
creation('table','chtb','id','tbcoul');
creation('div','genecoul','id','divcoul');
creation('div','genecoul','class','bout','onclick','initcoul()');
if(parseInt(navigator.userAgent.substring(30,31))<=7){
document.getElementById("tbcoul").className='ie'
document.getElementById('rouge').onmousedown=evenements;
document.getElementById('vert').onmousedown=evenements;
document.getElementById('bleu').onmousedown=evenements;
}

var couleur=['#A0522D','#A52A2A','#696969','#FFDEAD','#000000','#ffffff','#000080','#808000','#FFE4C4','#FF1493','#FFA500','#DEB887','#D2691E','#FF7F50','#00FA9A','#D8BFD8','#9ACD32','#4682B4','#FFE4E1','#FFD700']
document.getElementById("tbcoul").insertRow(0);
for(var i=0;i<=couleur.length-1;i++){
document.getElementById("tbcoul").rows[0].insertCell(i);
document.getElementById("tbcoul").rows[0].cells[i].style.backgroundColor=couleur[i]
document.getElementById("tbcoul").rows[0].cells[i].onclick=function(){gesticoul(this)};
}

arcenciel()
fade('genecoul','plus',30)
}
else{
document.getElementById('genecoul').parentNode.removeChild(document.getElementById('genecoul'));
}
}

Conclusion :


sa en fait du code
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.

Du même auteur (@karamel)