颜色选择器:无法选择颜色

嗨,
我还是个新手,用的是php,javascrip.
我已经完成了调色板的编码.但现在我还会做一些事情,比如通过单击调色板打开的图像.但我的问题是我不能选择我想要的颜色.请告诉我我做错了什么.否则请给我推荐其他代码.我的代码是

选择 | 换行 | 行号
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. function getColor1() { alert("hai");
  6.       var img = document.createElement("img");
  7.       img.src = "img/palette.gif"; 
  8.       //img.height = 75; 
  9.       //img.width = 113;
  10.       //img.style.top=800;
  11.       //img.style.right=100;
  12.       document.body.appendChild(img);
  13.     getColor();
  14.     }
  15. function getColor(block)
  16. {alert("hai1");
  17. var s_url=block.href;
  18. var pColor=s_url.substr(s_url.indexOf("#"));
  19. document.getElementById("colorPalDemo").style.Color=pColor;
  20. //getColor1();
  21. }
  22.  
  23.  
  24.  
  25. </script>
  26. </head>
  27. <body>
  28.         <img  src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" />
  29. <map name="color_pallete" id="color_pallete">
  30.     <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
  31.     <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
  32.     <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />
  33.     <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
  34.     <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>
  35.     <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
  36.     <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
  37.     <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
  38.     <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />
  39.     <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
  40.     <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
  41.     <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />
  42.     <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
  43.     <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
  44.     <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
  45.     <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
  46.    </map>
  47. <span id="colorPalDemo"></span> 
  48.  
  49. </body>
  50. </html>
  51.  
# 回答1


JavaScript区分大小写.第19行应为:

选择 | 换行 | 行号
  1. ...style. c olor = ...
# 回答2


是的,我变了.尽管如此,调色板还是不起作用.
# 回答3


SPAN元素中没有文本.添加一些文本以查看更改.
# 回答4


不,不,我不想看到文本颜色更改.我有一些文本区,我正在输入一些文本,我想要做的是为我在文本框中选择的文本选择颜色.在我的文本框中,它应该是这样的欢迎
# 回答5


使用文本区域显示更新后的代码.您的原始代码没有文本区.
此外,字体标签已被弃用,不应再使用.
# 回答6


以下是我的代码.

选择 | 换行 | 行号
  1. <script type="text/javascript">
  2. function getColor1(id) {
  3.    var clr = document.getElementById(id);
  4.  
  5.    if (clr.style.visibility=="visible") {
  6.           clr.style.visibility="hidden";
  7.      }
  8.      else {
  9.           clr.style.visibility="visible";
  10.      }
  11.  }
  12. function getColor(block)
  13. {//alert(block);
  14. var s_url=block.href;
  15. var pColor=s_url.substr(s_url.indexOf("#"));
  16. document.getElementById("colorPalDemo").style.Color=pColor;
  17. //alert(pColor);
  18. }
  19. function changeSize(size){
  20. document.getElementById("ss").value;
  21. }
  22. function updateh1family(name) {
  23. document.getElementById("aa").value;
  24. }
  25.  
  26. function font(elems,tag,size,name,block){//alert(size);
  27. alert(block);
  28. var i=0, el, selectedText, newText;
  29. while(el=elems[i++]){
  30. selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
  31. if(selectedText!=''){
  32.     newText='<'+tag+' size='+size+' face='+name+' color='+block+'>'+selectedText+'</'+tag+'>';
  33.         if(document.selection){//IE
  34.         document.selection.createRange().text=newText;
  35.         return;//prevents the double replacement
  36.         }
  37.         else{//Moz
  38.         el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
  39.         }
  40.     }
  41. }
  42. }
  43. </script>
  44. <form accept-charset="utf-8" action="b.html" method="post" name="fillup" enctype="multipart/form-data" onSubmit="return validate();">
  45. <table align="center" border="1" width="850" height="500" bgcolor="FFF5EE" >
  46. <tr><td>
  47.     <table align="center" bgcolor="">
  48.         <tr><td align="center" colspan="10"><img src="img/laugh.gif" alt="Smiley" /></td></tr>
  49.         <tr><td align="center" style="color:#FF0000; text-decoration:blink;" colspan="10" ><b><?php echo $qtype1;?></b></td></tr>
  50.         <tr><td colspan="10">&nbsp;</td></tr>
  51.         <tr><td align="center" colspan="10"><img src="img/subst.png" title="substring" onclick="formatText ([ques1,ques2,opt1,opt2,opt3,opt4],'sub');">
  52.         <img src="img/supst.png" title="superstring" onclick="formatText1 ([ques1,ques2,opt1,opt2,opt3,opt4],'sup');">
  53.     <!--<input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font');">-->
  54.  
  55.         <img src="img/mover.png" title="mover,mout" onclick="mover ([ques1,ques2,opt1,opt2,opt3,opt4],'mover','mout');"></td></tr>
  56.  
  57. <img src="img/supst.png" id="color" onclick="getColor1('imgclr');" /><br/>
  58. <img id="imgclr" src="img/palette.gif" usemap="#color_pallete" style="visibility:hidden"/>
  59. <map name="color_pallete" id="color_pallete">
  60.     <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
  61.     <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
  62.     <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />
  63.     <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
  64.     <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>
  65.     <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
  66.     <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
  67.     <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
  68.     <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />
  69.     <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
  70.     <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
  71.     <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />
  72.     <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
  73.     <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
  74.     <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
  75.     <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
  76.    </map>
  77. <span id="colorPalDemo"></span> 
  78. Font size:
  79. <select name="sizeselect" id="ss" onchange="changeSize(this.value)">
  80.  <option value="10">10</option>
  81.  <option value="13">13</option>
  82.  <option value="15">15</option>
  83.  <option value="17">17</option>
  84.  <option value="19">19</option>
  85.  <option value="21">21</option>
  86.  <option value="23">23</option>
  87.  <option value="50">50</option>
  88. </select>
  89. <input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font',document.getElementById('ss').value,document.getElementById('aa').value,document.getElementById('colorPalDemo').style.color);">
  90. <select name="selectFontFamily" id="aa" onchange="updateh1family(this.value)">
  91.     <option value="Serif">Serif</option>
  92.     <option value="Arial">Arial</option>
  93.     <option value="Sans-Serif">Sans-Serif</option>
  94.     <option value="Tahoma">Tahoma</option>
  95.     <option value="Verdana">Verdana</option>
  96.     <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>    
  97.     <option value="Times New Roman">Times New Roman</option>
  98.    <!-- <option> Sans-Serif </option>                                  
  99.     <option> Tahoma </option>
  100.     <option> Verdana </option>
  101.     <option> Lucida Sans Unicode </option>                               
  102.   </select>-->
  103.  
  104.  
  105.         <tr>
  106.             <td>
  107.             Statement1<font color="#0000FF">*</font>
  108.             </td>
  109.             <td>
  110.             :
  111.             </td>
  112.  
  113.             <td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
  114.             </td>
  115.             <td>
  116.                 <table>
  117.                 <tr>
  118.                 <td width="10">
  119.                 <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
  120.                 <input type="file" id="quest_wav1" name="quest_wav1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
  121.                 </div>
  122.                 </td>
  123.                 </tr>
  124.                 <tr>
  125.                 <td width="10">
  126.                 <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
  127.                 <input type="file" id="quest_img1" name="quest_img1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"   />
  128.                 </div>
  129.                 </td>
  130.                 </tr>
  131.                 </table>
  132.             </td>
  133.             <td>&nbsp;</td>
  134.             <td>
  135.             Statement2<font color="#0000FF">*</font>
  136.             </td>
  137.             <td>
  138.             :
  139.             </td>
  140.             <td><textarea name="ques2" id="ques2" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
  141.             </td>
  142.             <td>&nbsp;</td>
  143.             <td>
  144.                 <table>
  145.                 <tr>
  146.                 <td width="10">
  147.                 <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
  148.                 <input type="file" id="quest_wav2" name="quest_wav2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
  149.                 </div>
  150.                 </td>
  151.                 </tr>
  152.                 <tr>
  153.                 <td width="10">
  154.                 <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
  155.                 <input type="file" id="quest_img2" name="quest_img2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
  156.                 </div>
  157.                 </td>
  158.                 </tr>
  159.                 </table>
  160.             </td>
  161.  
  162.         </tr>
  163.         <tr>
  164.             <td>
  165.             Option1<font color="red">*</font>
  166.             </td>
  167.             <td>
  168.             :
  169.             </td>
  170.  
  171.             <td>
  172.             <textarea name="opt1" id="opt1" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
  173.             </td>
  174.             <td>
  175.                 <table>
  176.                 <tr>
  177.                 <td width="10">
  178.                 <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
  179.                 <input type="file" id="opt_wav1" name="opt_wav1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
  180.                 </div>
  181.                 </td>
  182.                 </tr>
  183.                 <tr>
  184.                 <td width="10">
  185.                 <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
  186.                 <input type="file" id="opt_img1" name="opt_img1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"   />
  187.                 </div>
  188.                 </td>
  189.                 </tr>
  190.                 </table>
  191.             </td>
  192.             <td>&nbsp;</td>
  193.             <td>
  194.             Option2
  195.             </td>
  196.             <td>
  197.             :
  198.             </td>
  199.  
  200.             <td><textarea name="opt2" id="opt2" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
  201.             </td>
  202.             <td>&nbsp;</td>
  203.             <td>
  204.                 <table>
  205.                 <tr>
  206.                 <td width="10">
  207.                 <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
  208.                 <input type="file" id="opt_wav2" name="opt_wav2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
  209.                 </div>
  210.                 </td>
  211.                 </tr>
  212.                 <tr>
  213.                 <td width="10">
  214.                 <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
  215.                 <input type="file" id="opt_img2" name="opt_img2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
  216.                 </div>
  217.                 </td>
  218.                 </tr>
  219.                 </table>
  220.             </td>
  221.  
  222.         </tr>
  223.         <tr>
  224.             <td>
  225.             Option3
  226.             </td>
  227.             <td>
  228.             :
  229.             </td>
  230.  
  231.             <td><textarea name="opt3" id="opt3" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
  232.             </td>
  233.             <td>
  234.                 <table>
  235.                 <tr>
  236.                 <td width="10">
  237.                 <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
  238.                 <input type="file" id="opt_wav3" name="opt_wav3"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
  239.                 </div>
  240.                 </td>
  241.                 </tr>
  242.                 <tr>
  243.                 <td width="10">
  244.                 <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
  245.                 <input type="file" id="opt_img3" name="opt_img3"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
  246.                 </div>
  247.                 </td>
  248.                 </tr>
  249.                 </table>
  250.             </td>
  251.             <td>&nbsp;</td>
  252.             <td>
  253.             Option4
  254.             </td>
  255.             <td>
  256.             :
  257.             </td>
  258.  
  259.             <td><textarea name="opt4" id="opt4" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
  260.             </td>
  261.             <td>&nbsp;</td>
  262.  
  263.             <td>
  264.                 <table>
  265.                 <tr>
  266.                 <td width="10">
  267.                 <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
  268.                 <input type="file" id="opt_wav4" name="opt_wav4"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
  269.                 </div>
  270.                 </td>
  271.                 </tr>
  272.                 <tr>
  273.                 <td width="10">
  274.                 <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
  275.                 <input type="file" id="opt_img4" name="opt_img4"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
  276.                 </div>
  277.                 </td>
  278.                 </tr>
  279.                 </table>
  280.             </td>
  281.  
  282.         </tr>
  283.         <tr>
  284.             <td>correct Answer<font color="red">*</font></td><td>:</td>
  285.             <td><input type="text" name="corr_ans" id="corr_ans"  size="16" onkeypress="return isNumeric(event)"></td>
  286.             <td>&nbsp;</td>
  287.             <td>&nbsp;</td>
  288.             <td>Topic<font color="red">*</font></td><td>:</td>
  289.             <td><input type="text" name="topic" id="topic" size="16"  /></td>
  290.             <td>&nbsp;</td>
  291.             <td>&nbsp;</td>
  292.         </tr>
  293.  
  294.         <tr>
  295.             <td>Page No<font color="red">*</font></td><td>:</td>
  296.             <td><input type="text" name="pno" id="pno"  size="16" onkeypress="return isNumberKey(event, this.value)"/></td>
  297.             <td>&nbsp;</td>
  298.             <td>&nbsp;</td>
  299.             <td>Chapter No<font color="red">*</font></td><td>:</td>
  300.             <td><input type="text" name="cno" id="cno" size="16"  onkeypress="return isNumberKey(event, this.value)"/></td>
  301.             <td>&nbsp;</td>
  302.             <td>&nbsp;</td>
  303.         </tr>
  304.         <tr>
  305.             <td>Year<font color="red">*</font></td><td>:</td>
  306.             <td><input type="text" name="year" id="year" size="16" onkeypress="return isNumberKey(event, this.value)" /></td>
  307.             <td>&nbsp;</td>
  308.             <td>&nbsp;</td>
  309.             <td>Standard<font color="red">*</font></td><td>:</td>
  310.             <td><input type="text" name="std" id="std" size="16"/></td>
  311.             <td>&nbsp;</td>
  312.             <td>&nbsp;</td>
  313.         </tr>
  314.         <tr>
  315.             <td>Board</td><td>:</td>
  316.             <td><input type="text" name="board_txt" id="board_txt" size="16" readonly="" value="<?php echo $boardname; ?>" style="background-color:#FFFFFF;" /></td>
  317.             <td>&nbsp;</td>
  318.             <td>&nbsp;</td>
  319.             <td>Subject</td><td>:</td>
  320.             <td><input type="text" name="subject_txt" id="subject_txt" size="16" readonly="" value="<?php echo $subjectname; ?>" style="background-color:#FFFFFF;" />
  321.  
  322.             <input type="hidden" name="language" id="language" value="<?php echo $language_name; ?>" />
  323.  
  324.             <input type="hidden" name="qtype" id="qtype" value="<?php echo $qtype2; ?>" />
  325.             </td>
  326.             <td>&nbsp;</td>
  327.             <td>&nbsp;</td>
  328.         </tr>
  329.         <tr>
  330.             <td>Fill Type</td>
  331.             <td>:</td>
  332.             <td>
  333.             <select id="fill_type" name="fill_type" > 
  334.             <option value="Fillup" selected="selected">Fillup</option>
  335.             <option value="Abbreviation">Abbreviation</option>
  336.             <option value="Preposition">Preposition</option>
  337.             <option value="Phrases">Phrases</option>
  338.             <option value="Compound">Compound</option>
  339.             <option value="GrammarFill1">GrammarFill1</option>
  340.             <option value="TOF">TOF</option>
  341.             <option value="FrameQues">FrameQuestion</option>
  342.             <option value="Pronoun">Pronoun</option>
  343.             <option value="Pattern">Pattern</option>
  344.             <option value="Auxillary">Auxillary</option>
  345.             <option value="IdPattern">IdPattern</option>
  346.             <option value="Proverb">Proverb</option>
  347.             <option value="Spelling">Spelling</option>        
  348.             </select>
  349.             </td>
  350.             <td>&nbsp;</td>
  351.             <td>&nbsp;</td>
  352.             <td>Explanation</td><td>:</td>
  353.             <td><input type="text" name="exp" id="exp" size="16"  /></td>
  354.             <td>&nbsp;</td>
  355.             <td>&nbsp;</td>
  356.         </tr>
  357.         <tr><td colspan="10">&nbsp;&nbsp;</td></tr>
  358.         <tr>
  359.           <td><font color="#FF0000"><b>Note :</b></font></td><td  colspan="4" align="center"><font color="#0000FF"> *</font> Mandatory Fields (Either one)</td>
  360.           <td colspan="5" align="center"><font color="#FF0000">*</font> Mandatory Fields</td></tr>
  361.           <td colspan="3" align="left"><img src="img/mic1_30.jpg" alt="Upload Wave" />Upload WAVE</td>
  362.           <td colspan="4" align="left"><img src="img/img1.jpeg" alt="Upload Image" />Upload IMAGE</td>
  363.         <tr>
  364.         <tr><td colspan="10">&nbsp;&nbsp;</td></tr>
  365.             <td colspan="10" align="center">
  366.             <input type="submit" name="add" value="Add" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"/>&nbsp;&nbsp;&nbsp;&nbsp;
  367.             <input type="reset" name="clear" value="Clear" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"  />
  368.             </td>
  369.         </tr>
  370.  
  371.     </table>
  372.  
  373. </td></tr>
  374. </table>
  375. </form>
  376.  
# 回答7


谢谢你的帮助,阿科德.它现在运行得很好.
# 回答8


太好了.你能把你的工作代码发布给其他人吗?谢谢.
PS.对不起,没有机会看到您发布的代码...
# 回答9


相反,下面的函数

选择 | 换行 | 行号
  1.  function getColor(block)
  2. {
  3. var s_url=block.href;
  4. var pColor=s_url.substr(s_url.indexOf("#"));
  5. document.getElementById("colorPalDemo").style.Color=pColor;
  6. }
  7.  

我简单地使用了以下函数

选择 | 换行 | 行号
  1. function getColor(block1)
  2. {
  3. var s_url=block1.href;
  4. var pColor=s_url.substr(s_url.indexOf("#"));
  5. document.getElementsByTagName('textarea').value=pColor;
  6. }
  7.  

还删除了SPAN标记.

标签: Javascript

添加新评论