<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="code.xsl" ?>
<dns4.nl>
<voorbeeld>
<title>javascript gradient script</title>
<verwijzende_link>http://www.dns4.nl/pagina/javascript_code/javascript_gradient.html</verwijzende_link>
<informatie>


</informatie>
<programma_code>
<![CDATA[
<!-- de code begint vanaf hier.

	<script type="text/javascript">
		// <!--
		var oArr = [],
		a,i,c,
		objs = [],
		deparams,
		hettype,
		x,y,w,h,p,g,
		kleurpad = [],
		cArr,
		kleurprocent,
		tmpDOM,
		disp,
		eenSpann,
		diehtmll;
		function haalobj() {
		    a = document.getElementsByTagName("*");
		    for (i = 0; i < a.length; i++) {
		        c = a[i].className;
		        if (c !== "") {
		            if (c.indexOf("gradient") === 0) {
		                objs[objs.length] = a[i];}}}
		    return objs;}
		function setdeHue(originColor, opacityPercent, maskRGB) {
		    var returnColor = [];
		    for (w = 0; w < originColor.length; w++) {
		        returnColor[w] = Math.round(originColor[w] * opacityPercent) + Math.round(maskRGB[w] * (1.0 - opacityPercent));
		    }
		    return returnColor;}
		function maakdecimaal(hex) {
		    return parseInt(hex, 16);}
		function longHexmaakdecimaal(longHex) {
		    return new Array(maakdecimaal(longHex.substring(0, 2)), maakdecimaal(longHex.substring(2, 4)), maakdecimaal(longHex.substring(4, 6)));}
		function maakkleurpad(color1, color2) {
		    var kleurpad = [];
		    kleurprocent = 1.0;
		    do {
		        kleurpad[kleurpad.length] = setdeHue(longHexmaakdecimaal(color1), kleurprocent, longHexmaakdecimaal(color2));
		        kleurprocent -= 0.01;
		    }
		    while (kleurprocent > 0);
		    return kleurpad;}
		function maakopa(obj) {
		    disp = document.defaultView.getComputedStyle(obj, '').display;
		    disp == "block" ? eenSpann = document.createElement("div") : eenSpann = document.createElement("span");
		    diehtmll = obj.innerHTML;
		    obj.innerHTML = "";
		    eenSpann.innerHTML = diehtmll;
		    eenSpann.setAttribute("style", "position:relative;z-index:10;");
		    obj.appendChild(eenSpann);}
		function maakverloop() {
		    if (!document.getElementById) {
		        return;
		    }
		    oArr = haalobj();
		    if (!oArr.length) {
		        return;
		    }
		    for (i = 0; i < oArr.length; i++) {
		        deparams = oArr[i].className.split(" ");
		        if (document.all && !window.opera) {
		            oArr[i].style.width = oArr[i].offsetWidth + "px";
		            deparams[3] == "horizontal" ? hettype = 1: hettype = 0;
		            oArr[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType=" + hettype + ",StartColorStr=\"#" + deparams[1] + "\",EndColorStr=\"#" + deparams[2] + "\")";
		        } else {
		            cArr = maakkleurpad(deparams[1], deparams[2]);
		            x = 0;
		            y = 0;
		            if (deparams[3] == "horizontal") {
		                w = Math.round(oArr[i].offsetWidth / cArr.length);
		                if (!w) {
		                    w = 1;
		                }
		                h = oArr[i].offsetHeight;
		            } else {
		                h = Math.round(oArr[i].offsetHeight / cArr.length);
		                if (!h) {
		                    h = 1;
		                }
		                w = oArr[i].offsetWidth;
		            }
		            maakopa(oArr[i]);
		            tmpDOM = document.createDocumentFragment();
		            for (p = 0; p < cArr.length; p++) {
		                g = document.createElement("div");
		                g.setAttribute("style", "position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + cArr[p][0] + "," + cArr[p][1] + "," + cArr[p][2] + ");");
		                deparams[3] == "horizontal" ? x += w: y += h;
		                tmpDOM.appendChild(g);
		                if (y >= oArr[i].offsetHeight || x >= oArr[i].offsetWidth) break;
		            }
		            oArr[i].appendChild(tmpDOM);
		            tmpDOM = null;
		        }
		    }
		}
		window.addEventListener ? window.addEventListener("load", maakverloop, false) : window.attachEvent("onload", maakverloop);
		// -->
	</script>
	<style type="text/css">
		#verloop{
			position:absolute;
			margin-left:10%;
			display:block;
			width:10em;
			height:3em;
			line-height:3em;
			text-align:center;
			font-weight:bold;
			font-size:150%;
			color:#ffffff;
			background:transparent;	
		}
	</style>





	<div id="verloop" class="gradient 99ffff 9900ff horizontal">GRADIENT</div>






de code is hier geeindigd.
// -->
]]>
</programma_code>
<code_link>http://www.dns4.nl/pagina/alle_tekst_files.html</code_link>
</voorbeeld>
</dns4.nl>
