Archivlink: javarea.de Forum > JavaScript > Color-Box realisieren
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Color-Box realisieren

Pages: [1]
geschrieben von AlexD am 21.07.2007 - 10:41
Jetzt brauch ich nochmal Eure Hilfe,

Im Zuge der Funktionserweiterung des Newsletters den ich für einen Bekannten erstelle, möchte ich unter anderem dass er Hintergrundfarben/Rahmenfarben usw. selbst auswählen kann. Heißt er soll mehrere Farbtabellen innerhalb eines bestehenden Formulars haben wo er auswählen kann.
Ich hab mir so eine bestehende Farbtabelle (aus dem WYSIWYG) geschnappt und möchte diese nun für meine Zwecke nutzen/umschreiben.
Ich möchte einfach mit der Mouse eine Farbe auswählen wo die ausgewählte Farbe in einem kleinen Rechteck angezeigt und dann weiter im Formular verarbeitet wird (z.B. über ein hidden Textfeld)

hier ein Link wie die Farbtabelle aussieht:
http://privatwebarea.dyndns.org/select_color.html


Zu realisieren sicherlich mit den Eventhandler "onClick".
Die Funktionen die hier aufgerufen werden funktionieren natürlich nicht da ich diese gelöscht, hab auf 'onMouseOver' kann ich verzichten bzw benötige ich nicht zwingend.
Ich möchte es so einfach wie möglich handeln, auf eine Farbe klicken diese wird angezeigt und dann

Hier auch ein kleiner Teil des Codes:
Das ganze spielt sich dann innerhalb eines Formulars ab, d.h. innerhalb eines bestehenden <form></form>-Tags!
HTML-Quelltext
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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Select Color</title>
</head>

<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table border="0" cellspacing="0" cellpadding="4" width="100%">
 <tr>
  <td valign=center><div style="background-color: #000000; padding: 1; height: 21px; width: 50px; border: 1px solid #666666"><div id="enterColor" style="height: 100%; width: 100%"></div></div></td>
  <td valign=center></td>
  <td width="100%"></td>
 </tr>
</table>

<table border=0 cellspacing=1 cellpadding=0 bgcolor="#000000" style="cursor: hand;" >
 <tr>
  <td bgcolor="#000000" onMouseOver="previewColor('#000000')" onClick="selectColor('#000000')" height="10" width="10"></td>
  <td bgcolor="#000000" onMouseOver="previewColor('#000000')" onClick="selectColor('#000000')" height="10" width="10"></td>
  <td bgcolor="#000000" onMouseOver="previewColor('#000000')" onClick="selectColor('#000000')" height="10" width="10"></td>
  <td bgcolor="#000000" onMouseOver="previewColor('#000000')" onClick="selectColor('#000000')" height="10" width="10"></td>
  <td bgcolor="#003300" onMouseOver="previewColor('#003300')" onClick="selectColor('#003300')" height="10" width="10"></td>
  <td bgcolor="#006600" onMouseOver="previewColor('#006600')" onClick="selectColor('#006600')" height="10" width="10"></td>
  <td bgcolor="#009900" onMouseOver="previewColor('#009900')" onClick="selectColor('#009900')" height="10" width="10"></td>
  <td bgcolor="#00CC00" onMouseOver="previewColor('#00CC00')" onClick="selectColor('#00CC00')" height="10" width="10"></td>
  <td bgcolor="#00FF00" onMouseOver="previewColor('#00FF00')" onClick="selectColor('#00FF00')" height="10" width="10"></td>
  <td bgcolor="#330000" onMouseOver="previewColor('#330000')" onClick="selectColor('#330000')" height="10" width="10"></td>
  <td bgcolor="#333300" onMouseOver="previewColor('#333300')" onClick="selectColor('#333300')" height="10" width="10"></td>
  <td bgcolor="#336600" onMouseOver="previewColor('#336600')" onClick="selectColor('#336600')" height="10" width="10"></td>


Hoffe ihr könnt mir da helfen....

geschrieben von Micha am 21.07.2007 - 10:59
Hi,

Zitat
 Ich möchte es so einfach wie möglich handeln, auf eine Farbe klicken diese wird angezeigt und dann

und dann?

HTML-Quelltext
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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>ColorPicker v0.5 || derletztekick.com</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	</head>
	<body>

		<script type="text/javascript">
		<!--
		function parseHEX(dez){
			return dez.toString(16)
		}

		var r = '', g = '', b = '';
		var color = '';
		var countcolor = 0;
		document.write("<center><table border='0' cellspacing='1' cellpadding='0'>");
		document.write("<tr>");

		for (var i=0; i<16; i=i+3){
			for (var j=0; j<16; j=j+3){
				for (var k=0; k<16; k=k+3){
					r = parseHEX(i);
					g = parseHEX(j);
					b = parseHEX(k);
					color = r +"" + r +"" + g +"" + g + "" +b +"" +b;

					countcolor++; 
					document.write("<td style='cursor:help;' onclick='setColor(\"#" + color+ "\");'  bgcolor='#"+ color+"'><font title='#"+color+"' size='-2'>&nbsp;&nbsp;&nbsp;<\/font><\/td>");
	
				}
			}
			document.write("<\/tr><tr>");
		}
		document.write("<\/tr><\/table>");

		document.write("<p><font size='-1'>Es wurden "+countcolor+ " Farben dargestellt!<br>");
		document.write("<a href='http://www.derletztekick.com'>derletztekick.com<\/a><\/font><\/p><\/center>");

		function setColor(HexColor) {
			document.getElementById('output').value = HexColor;
			document.getElementById('output').style.backgroundColor =  HexColor; 
		}
		</script>
		

		<center>
			<input type="text" title="Gew&auml;hlte Farbe" id="output" size="20" style="border-width: 1px; border-color: #000;">
		</center>
	</body>
</html>


Micha

P.S. das ich dieses alte Ding noch mal rauskrame - wer hätte das gedacht...

geschrieben von AlexD am 21.07.2007 - 12:58
Hi Micha,

vielen dank für die schnelle Hilfe.
Ist schon das was ich suche wenn leider auch die Graustufen nicht enthalten sind.

Ein Problem hab ich noch, wenn ich 2 bzw. 3 solcher Farbtabellen habe. Ich bekomm es ned hin das diese seperat funktionieren.
Habs ned geschafft.

geschrieben von Micha am 21.07.2007 - 16:54
Hallo,

das Script ist uralt und die Umsetzung ist, nun...., bescheiden
Bau Dir bitte aus den entsprechenden Teilen selbst was zusammen.

HTML-Quelltext
1: 
2: 
3: 

function parseHEX(dez){
  return dez.toString(16)
}


Diese Funktion macht aus einer dezimalen Zahl eine Hexadezimalzahl, da Farbwerte unter anderen in Hex.-Zahlen angegeben werden können.

Da die Basis also 16 ist, gehen die drei Schleifen, die je einen Kanal (Rot, Grün,Blau) darstellen auch bis 16. Wenn Du mehr farben willst, ist das Inkrement zu verkleinern:

HTML-Quelltext
1: 
2: 
3: 
4: 

for (var i=0; i<16; i=i+1){
  for (var j=0; j<16; j=j+1){
    for (var k=0; k<16; k=k+1){
...

liefert also 16 * 16 * 16 = 4096 Farben; hier sind dann auch die Graustufen mit drin zB #666666


Das Script hat aber nur Anschauungswert. Mit document.write() sollte heute (aus meiner Sicht) keiner mehr unbedingt arbeiten. Scripte sollten unauffällig sein...

Aus diesem Grund solltest Du das Script lieber neu verfassen und dabei dann Deine Wünsche berücksichtigen.

Micha

geschrieben von okley am 21.07.2007 - 19:49
Hallo AlexD

Es gibt bereits fertige ColorPicker im Internet frei verfügbar. Auf webreference gibt es ein Tutorial um zu verstehen wie ein (aus meine sicht, sehr guter ColorPicker) funktioniert: http://www.webreference.com/program....k/column3/

Einfach bei google nach "javascript color picker" suchen.

Das nur als Hinweis, wenn es dir wichtig ist Erfahrung zu sammeln und du genügend Zeit hast, kannst du natürlich auch selbst einen schreiben ;)

geschrieben von Micha am 22.07.2007 - 10:19
Hi,

hmm, sieht chic aus. Da man am Ende auch gleich das Paket runterladen kann, ist wohl auch nicht mehr viel Hand anzulegen.

Micha

geschrieben von AlexD am 23.07.2007 - 01:46
Hallo,

danke für den Link, der sieht wirklich sehr gut aus!

Hab mir das Paket mal runtergeladen und jetzt schon ne ganze Weile versucht das einfach mal in eine leere Seite einzubauen.
Leider wird in dem Torturial nicht beschrieben wie man es dann einbindet.

Hab mal die vorhandenen Dateien wie folgt in die Seite eingebunden:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

<html>
<head>
       <title>Title here!</title>
<STYLE>IMG {
	BEHAVIOR: url("js/colorpicker/pngbehavior.htc")
<link rel="stylesheet" type="text/css" href="js/colorpicker/png.css">

}
</STYLE>
<SCRIPT src="js/colorpicker/colorpicker.js" type=text/javascript></SCRIPT>

</head>
<body>
<input id="input1">
</body>
</html>


Funktioniert so anscheinend nicht.... bin da wohl zu doof.
In der colorpicker.js hab ich das image-verzeichnis geändert, die png-datein liegen ebenfalls im Verzeichnis 'js/colorpicker/' da war die Variabel imgBase = 'images/' definiert, jetzt imgBase = 'js/colorpicker/'.

geschrieben von AlexD am 28.07.2007 - 12:55
Ich häng hier noch...

wie bindet man diesen Picker ein das er funktioniert bzw. dann an 3 stellen auf der Seite funktionsfähig ist.
Steh echt am schlauch.

geschrieben von okley am 28.07.2007 - 14:37
Als Person die dir den Picker vorgeschlagen hat, bin ich natürlich auch dafür verantwortlich dir zu helfen ;)
Ich hab ein Beispiel gemacht (Anhang).

Wenn du jetzt bei "attachColorPicker(element,bool) im zweiten Parameter true angibst, dann wird das Icon um die vergrösserte Farbpallette zu öffnen nicht angezeigt. Wenn du ein anderes Icon willst, kannst du einfach das Bild /images/cp_mini_icon.png ändern.


Hier einfach der Code der Datei ColorPicker.html

HTML-Quelltext
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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <STYLE>
	img {
		behavior: url("pngbehavior.htc")
	}
	</STYLE>

<SCRIPT src="colorpicker.js" type=text/javascript></SCRIPT>

<script>

function init(){
	var inp1 = document.getElementById('input1');
	var inp2 = document.getElementById('input2');
	var inp3 = document.getElementById('input3');
	var inp4 = document.getElementById('input4');

	if(inp1) attachColorPicker(inp1, true);
	if(inp2) attachColorPicker(inp2);
	if(inp3) attachColorPicker(inp3);
	if(inp4) attachColorPicker(inp4);
}

window.onload = init;

</script>

</head>
<body>
  
  <h3>Demo</h3>
  <input id="input1" />
  <input id="input2" />
  <input id="input3" />
  <input id="input4" />
  
</body>
</html>


Viel Spass!

geschrieben von AlexD am 29.07.2007 - 13:24
Hallo okley,

naja verantwortlich würd ich das jetzt nicht nennen, ist ja doch alles freiwillig.

Also funktionieren tut er, aber mit kleinen Einschränkungen.

Folgende Problemchen:
- Internet Explorer (v6 und v7) zeigen einen Grafikfehler bzw. in roten Bereichen das Kästchen als wenn eine Grafik nicht geladen werden könnte bzw. nicht verfügbar ist
- FireFox: hier wird alles korrekt dargestellt, nur setzt er den ColorPicker ans Ende der Seite nicht unter den input-tag.

Noch eine Frage zum weiteren Verarbeiten des input-tags.

Diesen kann noch einfach noch namen zuweisen zum weitergeben als Variable?!
Beispiel: <input name="hintergrundfarbe" id="input1"> Value brauch ich ja ned, das macht der ColopPicker.

so hätte ich dann nach dem Abschicken: der Variabelen $hintergrundfarbe den Wert der Farbe aus dem ColorPicker zugewiesen.

Sorry wenns ne blöde Frage is, aber ich frag lieber gleich ob mein Gedankengang richtig ist.

geschrieben von okley am 29.07.2007 - 16:25
Das Problem mit dem IE kann ich nachvollziehen. Weiss allerdings nicht gerade woher das kommt. Im FireFox funzts bei mir tadellos.

Deine Frage habe ich nicht ganz verstanden. Wenn du aber den Feldwert nach abschicken des Formulars erhalten möchtest sollte das mit $_POST['input1'] möglich sein.

geschrieben von AlexD am 01.08.2007 - 14:18
Danke das werd ich dann testen und wird schon klappen.

Hier nochmal das Problem mit FireForx.
Hab einfach mal einen Link angehängt der das Problem darstellt. Die Seite ist normal noch mit CSS formatiert, durch das wegkopieren funktioniert das natürlich nicht mehr.
http://privatwebarea.dyndns.org/newsletter.php

die Datei kann man hier Downloaden.
Die PHP-Codes kann man ignorieren, hab die Datenbankabfragen usw. entfernt da diese hier ja nicht relevant sind.
http://privatwebarea.dyndns.org/onl....letter.zip

Gruß
Alex

[Edit]
Seltsamerweise sind beim oben genannten Link beim IE (6/7) die Grafikfehler nicht mehr vorhanden... in der downgeloadeten Test-Datei sowie im eingebauten Zustand sind diese vorhanden.

oh mann, da ist wohl noch etwas dediktiv-arbeit nötig....
[/Edit]

geschrieben von okley am 02.08.2007 - 18:39
Soweit ich das nachvollziehen kann, wird im script ColorPicker.js in der Funktion showColorPicker bei cp.ColorPicker.style.left = inpPos.x; die Position nicht korrekt gesetzt. Ausgelesen wird sie allerdings korrekt.
Probier doch mal die Position statisch zu setzen. Also änder die Zeile in:
cp.ColorPicker.style.left = "372px";
und die nächste in
cp.ColorPicker.style.top = "374px";

Dann sagst du mir ob der ColorPicker an der richtigen Position angezeigt wird.

geschrieben von AlexD am 03.08.2007 - 11:46
Also wenn ich diese Punkte Fix eingebe dann wird der CololPicker scheinbar richtig positioniert, in beiden Fällen IE und FireFox.

Hab ich auch im Link oben geändert.... dort kann man es sehn.


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.