login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Tekst effecten > [JS] Tekst gradient

[JS] Tekst gradient

Auteur: Stijn - 16 december 2005 - 16:04 - Gekeurd door: nemesiskoen - Hits: 6512 - Aantal punten: 2.83 (3 stemmen)



Uitleg staat in de code, heb ook mijn denkwijze in commentaar erin gelaten, misschien ben je er wat mee.

Dit werkt enkel en alleen in FireFox browsers en Mozilla varianten!

Dit is V1, ik zou hem graag nog uitbreiden met een color-picker enzo

In de volgende versie zal er ook wel IE ondersteuning zijn.

Code:
--Dit zet je in de <head></head> tags--
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. function omzetten(waarde)
  3. {
  4. 	//http://www.homepage-total.de/javascript/archiv/scripte2/hex-dez.html was een goeie bron
  5. 	var hex = "0123456789ABCDEF";
  6.  
  7. 	var inp;
  8. 	var out; 
  9.  
  10. 	inp = parseInt(waarde);
  11. 	//alert(inp);
  12.     out = "";
  13.  
  14.     while(inp != 0) 
  15. 	{
  16. 	  out=hex.charAt(inp%16)+out;
  17. 	  inp=inp >> 4;
  18.     }
  19.  
  20.  
  21. 	if(out == "")
  22. 	{
  23. 		out = "00";
  24. 	}
  25.  
  26. 	if(out.length == 1)
  27. 	{
  28. 		out = "0"+out;
  29. 	}
  30.  
  31. 		return out;
  32. }
  33.  
  34. function gradient_toevoegen(form, field)
  35. {
  36. 	var start_kleur = window.prompt("Geef het hex. getal in van je eerste kleur (FF0000):");
  37. 	var eind_kleur = window.prompt("Geef het hex. getal in van je laatste kleur (0000FF):");
  38.  
  39. 	if(start_kleur.length != 6)
  40. 	{
  41. 		alert("Je eerste kleur is ongeldig! Een voorbeeld is FF0000");
  42. 		location.href = "gradient.php";
  43. 	}
  44.  
  45. 	if(eind_kleur.length != 6)
  46. 	{
  47. 		alert("Je laatste kleur is ongeldig! Een voorbeeld is 0000FF");
  48. 		location.href = "gradient.php";
  49. 	}
  50.  
  51. 	//selectie krijgen en het aantal chars van de selectie tellen
  52. 	if(window.getSelection) //FireFox
  53. 	{
  54. 		var start = document.forms[form].elements[field].selectionStart; //0
  55. 		var end = document.forms[form].elements[field].selectionEnd; //5
  56. 		var aantal = end-start;
  57. 	}
  58.  
  59. 	//als aantal kleiner is dan 0 kunnen er errors ontstaan
  60. 	if(aantal <= 2){
  61.  
  62. 		alert("Je moet tenminste 2 karakters selecteren om een gradient toe te voegen aan je tekst!");
  63.  
  64. 	}else{
  65.  
  66. 	/*
  67. 		We starten bij rood (FF0000) en laatste kleur is blauw (0000FF)
  68. 		we halen de RGB waarden uit
  69.  
  70. 		als aantal 5 is dan moet het scrips 5 stappen uitvoeren
  71. 		hello is het woord
  72.  
  73. 		[font=color1]h[/font]
  74. 		[font=color2]e[/font]
  75. 		[font=color3]l[/font]
  76. 		[font=color4]l[/font]
  77. 		[font=color5]o[/font]
  78.  
  79. 		rood -> blauw
  80.  
  81. 		rgb = new Array(255,0,0,0,0,15);
  82.  
  83. 		standaard definities van de kleur is:
  84. 		color1 = start_kleur
  85. 		-----TUSSENKLEUREN<->GRADIANT-------
  86. 		color5 = eind_kleur
  87.  
  88. 		we hebben nog 3 kleur (5-2 kleuren = 3 kleuren te defineren) te defineren
  89.  
  90. 		voor de RODE kleuren
  91. 		Hoogste R-waarde van de 2 opgegeven kleuren van de laagste R-waarde aftrekken en die delen door het aantal
  92. 		te defineren stappen plus 1 => 4
  93.  
  94. 		voorbeeld: R van rood is 255 en R van blauw is 0
  95. 		255-0 = 255
  96. 		255/4 = 63.75
  97. 		afronden => 64
  98.  
  99. 		dus de R waarden van de grandient worden:
  100. 		255
  101. 		191
  102. 		127
  103. 		63
  104. 		0
  105.  
  106. 		hetzelfde voor de G en B waarden
  107. 	*/
  108.  
  109. 	var rgb = new Array(
  110. 	parseInt("0x"+start_kleur.substr(0,2)),
  111. 	parseInt("0x"+start_kleur.substr(2,2)),
  112. 	parseInt("0x"+start_kleur.substr(4,2)),
  113. 	parseInt("0x"+eind_kleur.substr(0,2)),
  114. 	parseInt("0x"+eind_kleur.substr(2,2)),
  115. 	parseInt("0x"+eind_kleur.substr(4,2))
  116. 	);
  117.  
  118. 	//array's maken
  119. 	var red = new Array();
  120. 	var green = new Array();
  121. 	var blue = new Array();
  122.  
  123. 	//definerende steps bereken
  124. 	var defineren = aantal-1;
  125.  
  126. 	//de R-waarden van de gradient instellen
  127. 	if(rgb[0] > rgb[3]){
  128. 		var r_steps = Math.round(rgb[0] / defineren);
  129. 	}else{
  130. 		var r_steps = Math.round(rgb[3] / defineren);
  131. 		var r_steps = -r_steps;
  132. 	}
  133.  
  134. 	//de G-waarden van de gradient instellen
  135. 	if(rgb[1] > rgb[4]){
  136. 		var g_steps = Math.round(rgb[1] / defineren);
  137. 	}else{
  138. 		var g_steps = Math.round(rgb[4] / defineren);
  139. 		var g_steps = -g_steps;
  140. 	}
  141.  
  142. 	//de B-waarden van de gradient instellen
  143. 	if(rgb[2] > rgb[5]){
  144. 		var b_steps = Math.round(rgb[2] / defineren);
  145. 	}else{
  146. 		var b_steps = Math.round(rgb[5] / defineren);
  147. 		var b_steps = -b_steps;
  148. 	}
  149.  
  150. 	//standaarwaarden
  151. 	red[0] = rgb[0];
  152. 	green[0] = rgb[1];
  153. 	blue[0] = rgb[2];
  154.  
  155.  
  156. 	//het instellen van de R-waarden
  157. 	for(var i = 1 ; i < defineren ; i++)
  158. 	{
  159. 		red[i] = red[i-1] - r_steps; 
  160. 	}
  161.  
  162. 	//het instellen van de G-waarden
  163. 	for(var i = 1 ; i < defineren ; i++)
  164. 	{
  165. 		green[i] = green[i-1] - g_steps; 
  166. 	}
  167.  
  168. 	//het instellen van de B-waarden
  169. 	for(var i = 1 ; i < defineren ; i++)
  170. 	{
  171. 		blue[i] = blue[i-1] - b_steps; 
  172. 	}
  173.  
  174. 	//eindwaarden
  175. 	red[defineren] = rgb[3];
  176. 	green[defineren] = rgb[4];
  177. 	blue[defineren] = rgb[5];
  178.  
  179.  
  180. 	/*
  181. 		Omzetten: 255 0 0 => FF0000
  182. 		FF0000
  183. 		BF0040
  184. 		7F0080
  185. 		3F00C0
  186. 		0000FF
  187. 	*/
  188. 	var einde = new Array();
  189.  
  190. 	for(var i = 0 ; i < aantal ; i++)
  191. 	{
  192. 		einde[i] = omzetten(red[i]);
  193. 		einde[i] += omzetten(green[i]);
  194. 		einde[i] += omzetten(blue[i]);
  195. 	}
  196.  
  197. 	/*
  198. 		DE RETURN VOORBEREIDEN
  199. 	*/	
  200.  
  201. 	var ForStart = document.forms[form].elements[field].value;
  202. 	var Return = ForStart.substr(0, start);
  203. 	Return += "<font color=\"#"+einde[0]+"\">"+ForStart.substr(start, 1)+"</font>";
  204.  
  205. 	for(var i = 1 ; i < aantal ; i++)
  206. 	{
  207. 		Return += "<font color=\"#"+einde[i]+"\">"+ForStart.substr(start + i, 1)+"</font>";
  208. 	}	
  209.  
  210. 	//Return += "[color="+einde[aantal]+"]"+ForStart.substr(start + aantal, 1)+"[/color]";
  211. 	Return += ForStart.substr(end, ForStart.length);
  212.  
  213. 	//terugsturen
  214. 	document.forms[form].elements[field].value = Return;
  215.  
  216. 	}	
  217. }
  218. </script>


--Dit is een voorbeeld van hoe je het kan gebruiken--
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" name="formulier" method="post">
  2. <input type="button" value="G" onclick="gradient_toevoegen('formulier', 'tekstvak');" /><br /><br />
  3. Tekstvak:<br />
  4. <textarea cols="40" rows="10" name="tekstvak">Selecteer tekst en klik op de G en voeg kleur toe. Have fun!</textarea><br /><br />
  5. <input type="submit" value="Versturen" />
  6. </form>
  7.  
  8. <?php
  9. $my_gradient = stripslashes($_POST['tekstvak']);
  10. echo $my_gradient;
  11. ?>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (1)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.055s