طیفی از رنگ(فوری)

**student91** · سه شنبه 12 اردیبهشت 1391, 12:22 عصر

سلام

من می خوام یک جدول طراحی کنم که رنگ ستون ها از ستون اول تا آخر،برحسب یک طیف رنگی تغییر کنه!
مثلا ستون اول آبی باشه،بعدی کمرنگ تر و می خوام ستون آخر این طیف قرمز بشه!
لطفا کمکم کنید.ممنون.
ستون های جدولم به صورت پویا ساخته میشه،ولی نمی دونم چطوری براشون رنگ به این سبک بدم!

**djsaeedkhan** · سه شنبه 12 اردیبهشت 1391, 12:47 عصر

سلام
این نمونه رو ببینید.



<?php

echo "<table border=0>";

for($i=0;$i<15;$i++)

{

   echo "<tr backcolor='#12345{$i}' height=10px><td></td></tr>";

}

echo "</table>";

?>

**MMSHFE** · سه شنبه 12 اردیبهشت 1391, 15:00 عصر

البته فکر کنم درستش اینطوری باشه:



echo '<table border="0px">';

for($i = 0; $i <= 15; $i++) {

    echo '<tr bgcolor="#12345'.dechex($i).'" height="10px"><td>&nbsp;</td></tr>';

}

echo '</table>';

**Farshid007** · سه شنبه 12 اردیبهشت 1391, 15:29 عصر

اگه Color picker می خواهی از این ها استفاده کن
کد کامل یک صفحه HTML:

کد HTML:

<html>
<script LANGUAGE="JavaScript">
<!-- Begin
addary = new Array();           //red
addary[0] = new Array(0,1,0);   //red green
addary[1] = new Array(-1,0,0);  //green
addary[2] = new Array(0,0,1);   //green blue
addary[3] = new Array(0,-1,0);  //blue
addary[4] = new Array(1,0,0);   //red blue
addary[5] = new Array(0,0,-1);  //red
addary[6] = new Array(255,1,1);
clrary = new Array(360);
for(i = 0; i < 6; i++)
for(j = 0; j < 60; j++) {
  clrary[60 * i + j] = new Array(3);
  for(k = 0; k < 3; k++) {
    clrary[60 * i + j][k] = addary[6][k];
    addary[6][k] += (addary[i][k] * 4);
    }
  }
hexary = new Array("#666666", "#555555", "#545657");
picary = new Array("picka", "pickb", "pickc", "pickd", "picke", "pickf", "pickg");
initary = new Array("#444444", "#777777", "#aaaaaa",  "#bbbbbb", "#cccccc", "#dddddd", "#eeeeee");
pickindex = 0;

function capture() {
 hoverColor();
 initColor();
 if(document.layers) {
  layobj = document.layers['wheel'];
  layobj.document.captureEvents(Event.MOUSEMOVE);
  layobj.document.onmousemove = mouseMoved;
 }
 else if (document.all) {
  layobj = document.all["wheel"];
  layobj.onmousemove = mouseMoved;
   }
 else if (document.getElementById) {
  window.document.getElementById("wheel").onmousemove = mouseMoved;
 }
}

function mouseMoved(e) {
 if (document.layers) {
  x = 4 * e.layerX;
  y = 4 * e.layerY;
 }
 else if (document.all) {
  x = 4 * event.offsetX;
  y = 4 * event.offsetY;
 }
 else if (document.getElementById) {
  x = 4 * (e.pageX - document.getElementById("wheel").offsetLeft);
  y = 4 * (e.pageY - document.getElementById("wheel").offsetTop);
 }
 sx = x - 512;
 sy = y - 512;
 qx = (sx < 0)?0:1;
 qy = (sy < 0)?0:1;
 q = 2 * qy + qx;
 quad = new Array(-180,360,180,0);
 xa = Math.abs(sx);
 ya = Math.abs(sy);
 d = ya * 45 / xa;
 if(ya > xa) d = 90 - (xa * 45 / ya);
 deg = Math.floor(Math.abs(quad[q] - d));
 n = 0;
 sx = Math.abs(x - 512);
 sy = Math.abs(y - 512);
 r = Math.sqrt((sx * sx) + (sy * sy));
 if(x == 512 & y == 512) {c = "000000";}
 else {
   for(i = 0; i < 3; i++) {
     r2 = clrary[deg][i] * r / 256;
     if(r > 256) r2 += Math.floor(r - 256);
     if(r2 > 255) r2 = 255;
     n = 256 * n + Math.floor(r2);
   }
   c = n.toString(16);
   while(c.length < 6) c = "0" + c;
 }
         hexary[1] = "#" + c.charAt(0) + c.charAt(0) + c.charAt(2) + c.charAt(2) + c.charAt(4) + c.charAt(4);
         hexary[2] = "#" + c;
         hexary[0] = safetyFirst(c);
   hoverColor();
   return false;
}

function hoverColor() {
 if (document.layers) {
  document.layers["wheel"].bgColor = hexary[1];
  document.layers["demoa"].bgColor = hexary[0];
  document.layers["demob"].bgColor = hexary[1];
  document.layers["democ"].bgColor = hexary[2];
  document.layers["demoa"].document.cccform.ccc.value = hexary[0];
  document.layers["demob"].document.aaaform.abc.value = hexary[1];
  document.layers["democ"].document.abcform.abc.value = hexary[2];
 } else if (  document.all) {
  document.all["wheel"].style.backgroundColor = hexary[1];
  document.all["demoa"].style.backgroundColor = hexary[0];
  document.all["demob"].style.backgroundColor = hexary[1];
  document.all["democ"].style.backgroundColor = hexary[2];
  document.all["demoa"].document.cccform.ccc.value = hexary[0];
  document.all["demob"].document.aaaform.aaa.value = hexary[1];
  document.all["democ"].document.abcform.abc.value = hexary[2];
 } else if (document.getElementById) {
  document.getElementById("wheel").style.backgroundColor = hexary[1];
  document.getElementById("demoa").style.backgroundColor = hexary[0];
  document.getElementById("demob").style.backgroundColor = hexary[1];
  document.getElementById("democ").style.backgroundColor = hexary[2];
  document.cccform.ccc.value = hexary[0];
  document.aaaform.aaa.value = hexary[1];
  document.abcform.abc.value = hexary[2];
 }
 return false;
}

function pickColor() {
  thecontents = "<tt class='wtxt'>" + hexary[1] +"</tt><br><tt class='btxt'>" + hexary[1] +"</tt></div>";
  switch (pickindex) {
   case 0:
   document.getElementById("picka").innerHTML = thecontents;
   document.getElementById("picka").style.backgroundColor = hexary[1];
   break;
   case 1:
   document.getElementById("pickb").innerHTML = thecontents;
   document.getElementById("pickb").style.backgroundColor = hexary[1];
   break;
   case 2:
   document.getElementById("pickc").innerHTML = thecontents;
   document.getElementById("pickc").style.backgroundColor = hexary[1];
   break;
   case 3:
   document.getElementById("pickd").innerHTML = thecontents;
   document.getElementById("pickd").style.backgroundColor = hexary[1];
   break;
   case 4:
   document.getElementById("picke").innerHTML = thecontents;
   document.getElementById("picke").style.backgroundColor = hexary[1];
   break;
   case 5:
   document.getElementById("pickf").innerHTML = thecontents;
   document.getElementById("pickf").style.backgroundColor = hexary[1];
   break;
   case 6:
   document.getElementById("pickg").innerHTML = thecontents;
   document.getElementById("pickg").style.backgroundColor = hexary[1];
   break;
  }
  pickindex += 1;
  if (pickindex >= picary.length) pickindex = 0;
}

function initColor() {
 for (i=0; i<7; i++) {
  thecontents = "<tt class='wtxt'>" + initary[i] +"</tt><br><tt class='btxt'>" + initary[i] +"</tt></div>";
  switch (i) {
   case 0:
   document.getElementById("picka").innerHTML = thecontents;
   document.getElementById("picka").style.backgroundColor = initary[i];
   break;
   case 1:
   document.getElementById("pickb").innerHTML = thecontents;
   document.getElementById("pickb").style.backgroundColor = initary[i];
   break;
   case 2:
   document.getElementById("pickc").innerHTML = thecontents;
   document.getElementById("pickc").style.backgroundColor = initary[i];
   break;
   case 3:
   document.getElementById("pickd").innerHTML = thecontents;
   document.getElementById("pickd").style.backgroundColor = initary[i];
   break;
   case 4:
   document.getElementById("picke").innerHTML = thecontents;
   document.getElementById("picke").style.backgroundColor = initary[i];
   break;
   case 5:
   document.getElementById("pickf").innerHTML = thecontents;
   document.getElementById("pickf").style.backgroundColor = initary[i];
   break;
   case 6:
   document.getElementById("pickg").innerHTML = thecontents;
   document.getElementById("pickg").style.backgroundColor = initary[i];
   break;
  }
 }
}

function safetyFirst(c) {
    cary = new Array(c.charAt(0),c.charAt(2),c.charAt(4));
    for (ci = 0; ci < 3; ci++) {
       switch (cary[ci]) {
         case "1":
         cary[ci]="0";
         break;
         case "2":
         cary[ci]="3";
         break;
         case "4":
         cary[ci]="3";
         break;
         case "5":
         cary[ci]="6";
         break;
         case "7":
         cary[ci]="6";
         break;
         case "8":
         cary[ci]="9";
         break;
         case "a":
         cary[ci]="9";
         break;
         case "b":
         cary[ci]="c";
         break;
         case "d":
         cary[ci]="c";
         break;
         case "e":
         cary[ci]="f";
         break;
      }
   }
  safecolor = "#" + cary[0]+cary[0] + cary[1]+cary[1] + cary[2]+cary[2];
  return safecolor;
}

//  End -->
</script>


<style type="text/css">
h1 {position:absolute; visibility:visible; top:30px; left:80px; font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif; font-size: x-large;}
div#wheel {position:absolute; visibility:visible; top:90px; left:80px; width: 256px; height: 256px;}
div#demoa, div#demob, div#democ {position:absolute; visibility:visible; top:360px; width: 85px; height: 150px; text-align: center; padding-top: 15px; padding-bottom: 200px;}
div#demoa {left:80px; margin-right: 0px;}
div#demob {left:165px; margin-left: 0px;  margin-right: 0px;}
div#democ {left:250px; margin-left: 0px;}

div#rights {position:absolute; visibility:visible; top:140px; left:375px;}
div#picks {padding-left: 35px; border-left: 1px dotted grey;}
div#picka, div#pickb, div#pickc, div#pickd, div#picke, div#pickf, div#pickg {width: 200px; height: 40px; padding: 10px;}
div#instructs {padding-bottom: 30px; font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif;}
div#notes {padding-top: 30px; font-size: smaller;}

.btxt {color: #000000;}
.wtxt {color: #ffffff;}
</style>
</head>

<body onLoad="capture()">

<h1>Color Picker</h1>

<!-- on the left, the wheel and display -->
<div id="wheel">
<a href="javascript://" onClick="javascript:pickColor(); return false"><img src="colorwheel.png" alt="color wheel" width="256" height="256" border="0"></a></div>

<div id="demoa">
<form name="cccform">
<input type="text" name="ccc" size="9">
</form>
<span class="btxt">web-safe</span><br>
<span class="wtxt">web-safe</span></div>

<div id="demob">
<form name="aaaform">
<input type="text" name="aaa" size="9">
</form>
<span class="btxt">web-smart</span><br>
<span class="wtxt">web-smart</span></div>

<div id="democ">
<form name="abcform">
<input type="text" name="abc" size="9">
</form>
<span class="btxt">unsafe</span><br>
<span class="wtxt">unsafe</span></div>

<!-- on the right, the picks and instructions -->

<div id="rights">
<div id="instructs">

</div>

<div id="picks">
<div id="picka"></div>
<div id="pickb"></div>
<div id="pickc"></div>
<div id="pickd"></div>
<div id="picke"></div>
<div id="pickf"></div>
<div id="pickg"></div>
</div>

</div>
</div>
</body>
</html>

نام تاپیک: طیفی از رنگ(فوری)

ابزار های تاپیک

نمایش

طیفی از رنگ(فوری)

نقل قول: طیفی از رنگ(فوری)

نقل قول: طیفی از رنگ(فوری)

نقل قول: طیفی از رنگ(فوری)

تاپیک های مشابه

طیفی از رنگ

تغییر رنگ قسمتی از زمینه (پیکچر باکس)

نحوه تغییر رنگ نوشته رکوردها بصورت یکی در میان (فوری)

BroadCast(فوری)

فوری فوری خواهش میکنم جواب بدید!!!!!!

قوانین ایجاد تاپیک در تالار