Creador de Paletas de colores en JavaScript
Hace mucho tiempo hice un método para el objeto MovieClip de Flash, el cual te creaba una paleta de colores en el lugar indicado de la película (ideal para CMSs entre otras utilidades).
Hoy rascando en el baúl de los recuerdos me he encontrado con el script en la página de proto.layer51.com y ni corto ni perezoso me he decidido a rehacerlo para que funcione en javascript.
El resultado es el siguiente:
Podéis pulsar sobre los colores para que se ejecute la función de retorno (callBack).
El código es muy sencillo, un tiple bucle con tirabuzón y mortal para atrás :P
-
var ancho=10;
-
var alto=10;
-
var sep=1;
-
creaPaleta=function(element,callBack){
-
var clip,col,top,left;
-
var aColors=["00","33","66","99","CC","FF"];
-
for(var x=0;x<6;x++){
-
for(var y=0;y<6;y++){
-
for(var z=0,d=0;z<6;z++,d++){
-
col="#"+aColors[z]+aColors[x]+aColors[y];
-
-
clip=document.createElement("a");
-
clip.href="Color: "+col;
-
clip.funcio=callBack;
-
clip.onclick=function(){
-
this.funcio(this.color);
-
return false;
-
}
-
cs=clip.style;
-
cs.backgroundColor=clip.color=col;
-
top=sep+y*(alto+sep);
-
cs.top=top+"px";
-
left=sep+(z*((sep+ancho)*6))+(x*(ancho+sep));
-
cs.left=left+"px";
-
cs.width=ancho+"px";
-
cs.height=alto+"px";
-
cs.position="absolute";
-
cs.overflow="hidden";
-
-
element.appendChild(clip);
-
}
-
}
-
}
-
element.style.position="relative";
-
element.style.height=(6*(alto+sep)+1)+"px";
-
element.style.width=(6*6*(ancho+sep)+1)+"px";
-
}
-
function funcionRetorno(e){alert(e);}
-
creaPaleta(document.getElementById("paleta"),funcionRetorno);
Los parámetros configurables son:
ancho y alto: para definir el tamaño de los botones
sep: para definir la separación entre botones
Para crear una paleta se tiene que ejecutar la función creaPaleta pasandole dos argumentos:
element: el cual requiere un elemento HTML (si puede ser un DIV mejor :))
callBack: la función que se ejecutará al pulsar sobre del color seleccionado.
La función es MUY escalable, si queréis añadir efectos rollOver y rollOut solo tenéis que añadirlo en donde figura "clip.onclick=function(){" y ahí le podéis pasar cualquier evento válido para javascript.
Oh! que no lo he dicho! es compatible con FF1.0+,IE5.0+,Opera7.0+ y Safari beta 3 windows, si podéis probarlo con otros navegadores y comentarme si va o no me haréis un grato favor :)
¿Que os parece? :P
Comentarios
emm
muy bueno, me pareciera q es lo q necesito sin embargo
¿Como se ocupa?
¿Que necesito?
Quizas podrias explicarte mejor, no todos somos buenos en javascript.
por ejemplo, como hacer que cuando haga click al color aparezca en un textbox html.
cual es el jpg de la paleta…
etc…
gracias
Juan, el tema es que el javascript en cuestión te genera los colores y no hace falta tener un JPG ni nada parecido con los colores.
Lo que puedes hacer es configurar lo que sería funcionRetorno() para que te introdujese el código devuelto por la paleta de color en el campo de texto que desees.
Para ocultarl la paleta se tendría que tirar de CSS con algo parecido a “document.getElementById(“paleta”).style.display=’none’”.
Espero que te sea de ayuda.
saludos
Deja un comentario