Funktionen & Template » Colorpicker

03.09.2009 22:52

F�r alle, die schon lange eine bessere Farbauswahl wollten...

Dieser Colorpicker erweitert schlicht und einfach die gesamte Farbpalette.
Er ist leicht in die Symbolbar einzubauen, zeigt eine Vorschau der aktuell �berfahrenen Farbe an und erm�glicht auch eine Wiederauswahl der zuletzt ausgew�hlten Farbe.
Falls der Farbcode ben�tigt wird, steht dieser auch gleich dabei.

Getestet wurde der Quellcode mit der neuen Symbolbar, die seit dem letzten Update eingef�hrt wurde.
Am besten wird der direkt nach der letzten vorgegebenen Farbe eingebaut.
Das Farbmen� wird auch automatisch nach der Farbauswahl wieder geschlossen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<br />
<!-- http://www.interclasse.com/scripts/colorpicker.php -->
<table style="background-color:#f6f6f6;border:1px dotted #666;padding:5px;margin:0px auto;">
	<tr>
		<td>
			<script language="Javascript" type="text/javascript">
addColorPicker();
var ns6=document.getElementById&&!document.all;
var ie=document.all;
// http://www.interclasse.com/scripts/colorpicker.php
var artabus='';
function addColorPicker() {
	var total=1657;
	var X=Y=j=R=G=B=0;
	var aR=new Array(total);
	var aG=new Array(total);
	var aB=new Array(total);
	for (var i=0; i<256; i++) {
		aR[i+510]=aR[i+765]=aG[i+1020]=aG[i+5*255]=aB[i]=aB[i+255]=0;
		aR[510-i]=aR[i+1020]=aG[i]=aG[1020-i]=aB[i+510]=aB[1530-i]=i;
		aR[i]=aR[1530-i]=aG[i+255]=aG[i+510]=aB[i+765]=aB[i+1020]=255;
		if (i<255) {aR[i/2+1530]=127;aG[i/2+1530]=127;aB[i/2+1530]=127;}
	}
	var hexbase=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
	var i=0;
	var jl=new Array();
	for (x=0;x<16;x++) for (y=0;y<16;y++) jl[i++]=hexbase[x]+hexbase[y];
	document.write('<'+'table border="0" cellspacing="0" cellpadding="0" onmouseover="showColor(event);" onclick="pickColor();">'); // width="126" height="126"
	var H=W=63;
	for (Y=0; Y<=H; Y++){
		s='<'+'tr height="2">';
		j=Math.round(Y*(510/(H+1))-255);
		for (X=0; X<=W; X++){
			i=Math.round(X*(total/W));
			R=aR[i]-j;if(R<0)R=0;if(R>255||isNaN(R))R=255;
			G=aG[i]-j;if(G<0)G=0;if(G>255||isNaN(G))G=255;
			B=aB[i]-j;if(B<0)B=0;if(B>255||isNaN(B))B=255;
			s=s+'<'+'td width="2" bgcolor=#'+jl[R]+jl[G]+jl[B]+'><'+'/td>';
		}
		document.write(s+'<'+'/tr>');
	}
	document.write('<'+'/table>');
}
function pickColor() {
	var jla=document.getElementById('chosenColor');
	jla.innerHTML=artabus;
	jla.style.backgroundColor=artabus;
	insert('[style=color:'+artabus+']','[/style]');
	document.getElementById('tab_color').style.display='none';
}
function showColor(e){
	source=ie?event.srcElement:e.target;
	if(source.tagName=="TABLE")return;
	while(source.tagName!="TD" && source.tagName!="HTML")source=ns6?source.parentNode:source.parentElement;
	document.getElementById('previewColor').style.backgroundColor=artabus=source.bgColor;
}
function lastColor(choose) {
	if (choose.innerHTML != "") {
		insert('[style=color:'+choose.innerHTML+']','[/style]');
		document.getElementById('tab_color').style.display='none';
	}
}
</script>
		</td>
	    <td id="previewColor" style="width:40px;height:128px;"></td>
	</tr>
	<tr>
		<td colspan="2" id="chosenColor" style="height:24px;" onclick="lastColor(this);"></td>
    </tr>
</table>

P.S.:
In einem Kommentar am Quellcode-Anfang steht die Seite, welche die Grundlage des Colorpickers bereitstellt. (Generieren des Farbfeldes)
Und nicht erschrecken, wenn in der Symbolbar-Vorschau das Farb-Men� etwas vergr��ert ausklappt, bei der normalen Benutzung im Forum sollte das Farbfeld kleiner sein.

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

Colorchooser.png

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Bitte geben Sie einen Grund f�r die Verwarnung an