Home Back
   
 

 KLEUR _ EN STYLE GENERATOR :: CODES
  
<html>

<head>
<meta http-equiv="Content-Language" content="nl-be">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Stijlgenerator 1</title>
<style>
body{background:rgb(255,255,247);border: 1pt rgb(244,236,247)}
.hfdkol{border-left-width: 1px; border-right: 1px solid #808080; border-top-width: 1px; border-bottom-width: 1px}
.tekstinfo{font-family:arial;font-size:8pt;font-weight:bold;text-align:center};
#KleurTabel	{ cursor: pointer ; cursor: hand ; border:0;}
#select	{ cursor: pointer ; cursor: hand ;}
#KleurTekst{ font-family:Arial; font-size:8pt;font-style:italic;text-align:center }
.KTcel	{  height: 18px ;width:18px ; }
</style>


<script language=javascript>

var KT=0;//Keurtabel zichtbaar = 1
var AR=0;//aantal rijen

function predefkleur()
{
document.getElementById('K1AG').style.backgroundColor= 'rgb(211,221,221)';
document.getElementById('K2AG').style.backgroundColor= 'rgb(297,209,204)';
document.getElementById('K3AG').style.backgroundColor= 'rgb(255,255,234)';
}

function grijzekleur()
{
document.getElementById('K1AG').style.backgroundColor='rgb(245,245,245)';
document.getElementById('K2AG').style.backgroundColor='rgb(230,230,230)';
document.getElementById('K3AG').style.backgroundColor='rgb(215,215,215)';				
}

function echtekleur()
{
if (document.getElementById('fellekleur').innerHTML == 'EK-ON')
	{document.getElementById('fellekleur').innerHTML = '';}
else
	{document.getElementById('fellekleur').innerHTML='EK-ON';}
}

function reset()
{
for (x = 0; x<AR;x++){document.getElementById('KleurTabel').deleteRow(-1);}
AR=0;
}

function Kleurtabel()
{
if((document.getElementById('selector').value <0)||(document.getElementById('selector').value >255))
{
document.getElementById('selector').value =120
}
if (KT==1){reset();}

var basiskleur = document.getElementById('selector').value;
	var oTable = document.getElementById('KleurTabel') ;
	function KTcelToevoegen( Rij, kleur )
	{
		var oCel = Rij.insertCell(-1) ;
		oCel.className = 'KTcel' ;
		oCel.style.background = kleur;
		oCel.onmouseover = function()
			{
			tempstr=this.style.background.substring(4,this.style.background.length-1);
			var kleuren=tempstr.split(",") //split using blank space as delimiter
			//for (i=0; i<kleuren.length; i++)
			SKR = kleuren[0];SKR6=Math.round(kleuren[0]/6)+240;if (SKR6 >255){SKR6=255};
			SKG = kleuren[1];SKG6=Math.round(kleuren[1]/6)+240;if (SKG6 >255){SKG6=255};
			SKB = kleuren[2].split(")");SKB6=Math.round(SKB[0]/6)+240;if (SKB6 >255){SKB6=255};
			SKBbis = kleuren[2].split(")");SKB = SKBbis[0]; kleuren[2]=SKBbis[0];// voor firefox
			document.getElementById('KleurCel').style.backgroundColor = 'rgb('+ SKR+','+SKG+','+SKB+')';	
			document.getElementById('KleurTekst').innerHTML = 'rgb('+SKR+','+SKG+','+SKB+')';			
			document.getElementById('T1AG').style.backgroundColor='rgb('+(SKR6+30)+','+(SKG6+30)+','+(SKB6+30)+')';
			document.getElementById('T2AG').style.backgroundColor='rgb('+(SKR6-7)+','+(SKG6-7)+','+(SKB6-7)+')';
			document.getElementById('TKader').style.backgroundColor='rgb('+(SKR6-80)+','+(SKG6-80)+','+(SKB6-80)+')';
			if(document.getElementById('fellekleur').innerHTML=='EK-ON')
			{
			document.getElementById('R1AG').style.backgroundColor= 'rgb('+SKR+','+SKG+','+SKB+')';
			document.getElementById('R2AG').style.backgroundColor= 'rgb('+(SKR-40)+','+(SKG-40)+','+(SKB-40)+')';
			document.getElementById('R3AG').style.backgroundColor= 'rgb('+(SKR-80)+','+(SKG-80)+','+(SKB-80)+')';		
			}
			else
			{			
			document.getElementById('R1AG').style.backgroundColor= 'rgb('+Math.round(SKR/1.5)+','+Math.round(SKG/1.5)+','+Math.round(SKB/1.5)+')';
			document.getElementById('R2AG').style.backgroundColor= 'rgb('+Math.round(SKR/2)+','+Math.round(SKG/2)+','+Math.round(SKB/2)+')';
			document.getElementById('R3AG').style.backgroundColor= 'rgb('+Math.round(SKR/3)+','+Math.round(SKG/3)+','+Math.round(SKB/3)+')';
			}
			
			if ((document.getElementById('on').innerHTML=='K-ON')||(document.getElementById('on').innerHTML=='G-ON'))
				{}
				else
				{
				document.getElementById('K1AG').style.backgroundColor='rgb('+(Math.round(kleuren[0])+120)+','+(Math.round(kleuren[1])+120)+','+(Math.round(kleuren[2])+120)+')';
				document.getElementById('K2AG').style.backgroundColor='rgb('+(Math.round(kleuren[0])+100)+','+(Math.round(kleuren[1])+100)+','+(Math.round(kleuren[2])+100)+')';
				document.getElementById('K3AG').style.backgroundColor='rgb('+(Math.round(kleuren[0])+80)+','+(Math.round(kleuren[1])+80)+','+(Math.round(kleuren[2])+80)+')';				
				}
			document.getElementById('R1Tekst').style.backgroundColor= 'rgb('+(230+Math.round(SKR/7))+','+(230+Math.round(SKG/7))+','+(230+Math.round(SKB/7))+')';
			document.getElementById('R2Tekst').style.backgroundColor= 'rgb('+(230+Math.round(SKR/7))+','+(230+Math.round(SKG/7))+','+(230+Math.round(SKB/7))+')';
			document.getElementById('R3Tekst').style.backgroundColor= 'rgb(255,255,255)';
			document.getElementById('KTekst').style.backgroundColor= 'rgb(0,0,0)';
			document.getElementById('KKader').style.backgroundColor= 'rgb('+(170+(SKR/6))+','+(170+(SKG/6))+','+(170+(SKB/6))+')';	
			document.getElementById('R1Kader').style.backgroundColor= 'rgb('+SKR/2+','+SKG/2+','+SKB/2+')';
			document.getElementById('R2Kader').style.backgroundColor= 'rgb('+SKR/3+','+SKG/3+','+SKB/3+')';
			document.getElementById('R3Kader').style.backgroundColor= 'rgb(0,0,0)';
			}
		oCel.onclick = function()
			{
			document.getElementById('selcolor').value = this.style.background ;
			document.getElementById('KleurTabel').style.visibility="hidden";
			//StijlBladTekst
			var SBT;
			SBT = "<style>\n";
			SBT = SBT + "body{background:"+document.getElementById('T2AG').style.backgroundColor+";border: 1pt solid "+ document.getElementById('TKader').style.backgroundColor+  "}\n";
			SBT = SBT + ".T1AG{background:"+document.getElementById('T1AG').style.backgroundColor+";border: 1pt solid "+ document.getElementById('TKader').style.backgroundColor+"}\n";
			SBT = SBT + ".T2AG{background:"+document.getElementById('T2AG').style.backgroundColor+";border: 1pt solid "+ document.getElementById('TKader').style.backgroundColor+"}\n";
			SBT = SBT + "table.menu{background:#2C2C2C; cellpadding:0; cellspacing:0;border: 1px solid #808080}\n";
			SBT = SBT + "td.menuitem{text-align:center; border: 1px solid #000000 ;font-size:10px; font-weight:bold; color:#FFFFFF; font-family:Verdana}\n";
			SBT = SBT + "table.voet{background:"+document.getElementById('T1AG').style.backgroundColor+";border: 1pt solid "+ document.getElementById('TKader').style.backgroundColor+"}\n";
			SBT = SBT + "td.voetitem{text-align:right;font-weight: 400;font-size=10px;font-family:Verdana;color:#FFFFFF; letter-spacing:-2;line-heigt:14px;}\n";

			SBT = SBT + ".TKader{background:"+document.getElementById('T2AG').style.backgroundColor+";border: 1pt solid "+ document.getElementById('TKader').style.backgroundColor+"}\n";			
			SBT = SBT + ".R1AG{background:"+document.getElementById('R1AG').style.backgroundColor+";font-family:Verdana; color:"+document.getElementById('R1Tekst').style.backgroundColor+";font-size:36pt;font-style:bold;text-align:left;border: 1px solid "+document.getElementById('R1Kader').style.backgroundColor+";}\n";
			SBT = SBT + ".R2AG{background:"+document.getElementById('R2AG').style.backgroundColor+";font-family:Verdana; color:"+document.getElementById('R2Tekst').style.backgroundColor+";font-size:14pt;text-align:left;border: 1px solid "+document.getElementById('R2Kader').style.backgroundColor+";}\n";
			SBT = SBT + ".R3AG{background:"+document.getElementById('R3AG').style.backgroundColor+";font-family:Verdana; color:"+document.getElementById('R3Tekst').style.backgroundColor+";font-size:10pt;font-weight:bold;text-align:left;border: 1px solid "+document.getElementById('R3Kader').style.backgroundColor+";}\n";
			
			SBT = SBT + ".K1AG{background:"+document.getElementById('K1AG').style.backgroundColor+";font-family:Arial; color:"+document.getElementById('KTekst').style.backgroundColor+";font-size:10pt;text-align:left;border: 1px solid "+document.getElementById('KKader').style.backgroundColor+";}\n";
			SBT = SBT + ".K2AG{background:"+document.getElementById('K2AG').style.backgroundColor+";font-family:Arial; color:"+document.getElementById('KTekst').style.backgroundColor+";font-size:10pt;text-align:left;border: 1px solid "+document.getElementById('KKader').style.backgroundColor+";}\n";
			SBT = SBT + ".K3AG{background:"+document.getElementById('K3AG').style.backgroundColor+";font-family:Arial; color:"+document.getElementById('KTekst').style.backgroundColor+";font-size:10pt;text-align:left;border: 1px solid "+document.getElementById('KKader').style.backgroundColor+";}\n";			
			SBT = SBT+"</style>\n";
			document.getElementById('stijlblad').value=SBT;
			document.getElementById('editcode').style.visibility='visible';
		}
	}
		
	for ( var r = 0 ; r < 255 ; r++ )
		{
		var oRow = oTable.insertRow(-1) ;
		AR=AR+1;
		for ( var g = 0 ; g < 255 ; g++ )
			{			
			KTcelToevoegen( oRow, 'RGB(' +  r + ',' + g + ','+ basiskleur +')' ) ;
			g=g+60;			
			}								
		r=r+25;
		}	
	KT=1;
	document.getElementById('KleurTabel').style.visibility="visible";
}
</script>
</head>

<body>


<table border="0" width="100%" cellspacing="5" cellpadding="0">
	<tr>
		<td colspan="5"><font face="Verdana"><b>Stijlblad - Kleurengenerator</b></font></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td width="13%">&nbsp;</td>
		<td width="21%" colspan="2">&nbsp;</td>
		<td width="52%">&nbsp;</td>

	</tr>
	<tr>
		<td >
		<p align="left"><b><font size="2" face="Verdana">Controle </font></b></td>
		<td width="13%" ><i><font face="Verdana" size="2">Selectiegebied</font></i></td>
		<td width="16%" style="border:1px solid #000000;">
		<p align="center"><i><font size="2" face="Verdana">Code&nbsp; </font></i></td>

		<td width="5%" id="KleurCel" style="border: 1px solid #000000" >&nbsp;</td>
		<td width="52%">&nbsp;</td>
		</tr>
	<tr>
		<td onclick="Kleurtabel();" width="10%" style="border: 1px solid #000000" bgcolor="#743640" id="select">
		<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Selector</font></b></td>
		<td width="13%"><input  type=text id="selector" value=120  size="10" name="selector"></td>
		<td width="21%" id="KleurTekst" colspan="2" style="border: 1px solid #000000">

		<p>
		</td>
		<td width="52%"><i><font size="2" face="Verdana">Waarden selectiegebied 
		:: max 255 min 0</font></i></td>
	</tr>
	<tr>
		<td height="18" colspan="5"><hr></td>
	</tr>
</table>
<table border="0" width="100%">

	<tr>
		<td style="border-top:1px solid #000000; border-bottom:1px solid #000000; width: 120px; border-left-width:1px; border-right-width:1px" bgcolor="#808080" align="center">&nbsp;</td>
		<td width="40" bgcolor="#808080" style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #000000; border-bottom: 1px solid #000000"><b>
		<font color="#FFFFFF" size="2" face="Verdana">Nr</font></b></td>
		<td bgcolor="#808080" style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #000000; border-bottom: 1px solid #000000" width="120"><b>
		<font color="#FFFFFF" size="2" face="Verdana">AchterGrond </font></b></td>
		<td bgcolor="#808080" style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #000000; border-bottom: 1px solid #000000" width="40"><b>
		<font color="#FFFFFF" size="2" face="Verdana">Tekst</font></b></td>

		<td bgcolor="#808080" style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #000000; border-bottom: 1px solid #000000" width="40"><b>
		<font color="#FFFFFF" size="2" face="Verdana">Kader</font></b></td>
		<td bgcolor="#808080" style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #000000; border-bottom: 1px solid #000000">&nbsp;</td>
		<td bgcolor="#808080" style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #000000; border-bottom: 1px solid #000000">
		&nbsp;</td>
	</tr>	
	<tr>
		<td bgcolor="#FFFFFF" align="center" height="21" width="120">&nbsp;</td>
		<td width="40" bgcolor="#FFFFFF" height="21">&nbsp;</td>

		<td bgcolor="#FFFFFF" width="120">&nbsp;</td>
		<td bgcolor="#FFFFFF" width="40" height="21">&nbsp;</td>
		<td bgcolor="#FFFFFF" width="40" height="21">&nbsp;</td>
		<td bgcolor="#FFFFFF" height="21">&nbsp;</td>
		<td bgcolor="#FFFFFF" height="21">
		&nbsp;</td>
	</tr>	
	<tr>
		<td align="center" width="120">

		<p align="center">
		<font size="2" face="Arial" color="#008000">Tabelkleuren</font></td>
		<td width="40" style="border: 1px solid #008000"><font face="Arial" size="2">1</font></td>
		<td id="T1AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
		<td id="T1Tekst" width="40">&nbsp;</td>
		<td id="TKader" rowspan="2" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="TKader" rowspan="2">&nbsp;</td>
		<td rowspan="7">

		<CENTER>
		<table width=100% style="border: 1px solid #000000" id="KleurTabel" cellspacing="0" cellpadding="0">
		
		</table>
		</CENTER>
		</td>
	</tr>	
	<tr>
		<td  align="center" width="120">&nbsp;</td>
		<td width="40" style="border: 1px solid #008000"><font face="Arial" size="2">2</font></td>

		<td id="T2AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
		<td id="T2Tekst" width="40">&nbsp;</td>
	</tr>	
	<tr>
		<td  align="center" width="120">
		<p align="center">
		<font size="2" face="Arial" color="#993300">Rijkleuren</font></td>
		<td width="40" style="border: 1px solid #993300"><font face="Arial" size="2">1</font></td>

		<td id="R1AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
		<td id="R1Tekst" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="R1Kader" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="R1Kader">&nbsp;</td>
	</tr>	
	<tr>
		<td align="center" width="120">
		<p align="center">
			<button name="B3" onclick="echtekleur();" style="width: 88px; height: 26px">

			<font face="Arial">Felle kleur</font></button>

			</td>
		<td width="40" style="border: 1px solid #993300"><font face="Arial" size="2">2</font></td>
		<td id="R2AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
		<td id="R2Tekst" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="R2Kader" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="R2Kader">&nbsp;</td>

	</tr>	
	<tr>
		<td  align="left" id="fellekleur" class="tekstinfo" width="120">
			<p align="center">

			&nbsp;</td>
		<td width="40" style="border: 1px solid #993300"><font face="Arial" size="2">3</font></td>
		<td id="R3AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
		<td id="R3Tekst" style="border: 1px solid #000000" width="40">&nbsp;</td>

		<td id="R3Kader" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="R3Kader">&nbsp;</td>
	</tr>	
	<tr>
		<td  align="center" width="120">
		<p align="center"><font size="2" face="Arial">Kolomkleuren</font></td>
		<td width="40" style="border: 1px solid #808080"><font face="Arial" size="2">1</font></td>
		<td id="K1AG" style="border: 1px solid #000000" width="120">&nbsp;</td>

		<td id="KTekst" rowspan="3" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="KKader" rowspan="3" style="border: 1px solid #000000" width="40">&nbsp;</td>
		<td id="KKader" rowspan="3">&nbsp;</td>
	</tr>	
	<tr>
		<td  align="center" width="120">
			<p align="center">
			<button name="B6" value="Auto" onclick="javascript:{var oON=document.getElementById('on');if ((oON.innerHTML=='')||(oON.innerHTML=='G-ON')){oON.innerHTML='K-ON';this.innerHTML='Kleur';predefkleur();}else{oON.innerHTML='';this.innerHTML='Auto'}}">
			<font face="Arial">Auto </font></button>

			&nbsp;
			<button name="B4" value="Grijs" onclick="javascript:{var oON=document.getElementById('on');if ((oON.innerHTML=='')||(oON.innerHTML=='K-ON')){oON.innerHTML='G-ON';grijzekleur();}else{oON.innerHTML=''}}">
		<font face="Arial">Grijs</font></td>
		<td width="40" style="border: 1px solid #808080"><font face="Arial" size="2">2</font></td>
		<td id="K2AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
	</tr>	
	<tr>
		<td  id="on" align="left" class="tekstinfo" width="120">

		</td>
		<td width="40" style="border: 1px solid #808080"><font face="Arial" size="2">3</font></td>
		<td id="K3AG" style="border: 1px solid #000000" width="120">&nbsp;</td>
		<td id="selcolor" bgcolor="#743640"><b>
		<font color="#FFFFFF" size="1" face="Verdana">Kleurengenerator&nbsp; </font></b></td>
	</tr>	
</table>


<div style="border-style:solid; border-width:1px; position: absolute; width: 586px; height: 208px; z-index: 1; left: 10px; top: 52px; visibility:hidden; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; background-color:#E2E6C4" id="editcode">

<table border="0" width="586px" cellspacing="7" cellpadding="3" style="border-style:solid; " bordercolor="#E2E6C4">
	<tr>
		<td height="35" width="256"><font face="Verdana"><b>Stijlblad opbouw</b></font></td>
		<td height="35" width="256" align="center">
			<button name="B8" value="ToonCode" onclick="javascript:{var oCode=document.getElementById('editcode').style;if(oCode.visibility == 'hidden'){oCode.visibility='visible'}else{oCode.visibility='hidden'}}" style="width: 70px; height: 26px; float: right">
		<font face="Arial">Sluit</font></td>
	</tr>

	<tr>
		<td width="512" bordercolor="#C0C0C0" style="border: 1px solid #C0C0C0" colspan="2">
		<textarea rows="6" name="S1" cols="67" id="stijlblad" style="border: 1px solid #FFFFFF"></textarea><font size="1" face="Arial">&nbsp;</font></td>
	</tr>
	<tr>
		<td width="543" bordercolor="#C0C0C0" style="border: 1px solid #000000" bgcolor="#743640" colspan="2">
		<font size="2" face="Arial" color="#FFFFFF">Klaar :: Copier hierboven de 
		code.</font></td>
	</tr>

</table>

</div>

<p>&nbsp;</p>

</body>

</html>