颜色选择器:无法选择颜色
- 作者: admin
- 时间:
- 分类: JavaScript
嗨,
我还是个新手,用的是php,javascrip.
我已经完成了调色板的编码.但现在我还会做一些事情,比如通过单击调色板打开的图像.但我的问题是我不能选择我想要的颜色.请告诉我我做错了什么.否则请给我推荐其他代码.我的代码是
选择 | 换行 | 行号
- <html>
- <head>
- <script type="text/javascript">
- function getColor1() { alert("hai");
- var img = document.createElement("img");
- img.src = "img/palette.gif";
- //img.height = 75;
- //img.width = 113;
- //img.style.top=800;
- //img.style.right=100;
- document.body.appendChild(img);
- getColor();
- }
- function getColor(block)
- {alert("hai1");
- var s_url=block.href;
- var pColor=s_url.substr(s_url.indexOf("#"));
- document.getElementById("colorPalDemo").style.Color=pColor;
- //getColor1();
- }
- </script>
- </head>
- <body>
- <img src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" />
- <map name="color_pallete" id="color_pallete">
- <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
- <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
- <area shape="rect" coords="63,7,87,31" href="#0000FF" onclick="getColor(this);" />
- <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
- <area shape="rect" coords="7,33,30,58" href="#00FFFF" onclick="getColor(this);"/>
- <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
- <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
- <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
- <area shape="rect" coords="8,61,31,85" href="#32CD32" onclick="getColor(this);" />
- <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
- <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
- <area shape="rect" coords="92,61,115,85" href="#008B8B" onclick="getColor(this);" />
- <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
- <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
- <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
- <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
- </map>
- <span id="colorPalDemo"></span>
- </body>
- </html>
# 回答1
JavaScript区分大小写.第19行应为:
JavaScript区分大小写.第19行应为:
选择 | 换行 | 行号
- ...style. c olor = ...
# 回答2
是的,我变了.尽管如此,调色板还是不起作用.
是的,我变了.尽管如此,调色板还是不起作用.
# 回答3
SPAN元素中没有文本.添加一些文本以查看更改.
SPAN元素中没有文本.添加一些文本以查看更改.
# 回答4
不,不,我不想看到文本颜色更改.我有一些文本区,我正在输入一些文本,我想要做的是为我在文本框中选择的文本选择颜色.在我的文本框中,它应该是这样的欢迎
不,不,我不想看到文本颜色更改.我有一些文本区,我正在输入一些文本,我想要做的是为我在文本框中选择的文本选择颜色.在我的文本框中,它应该是这样的欢迎
# 回答5
使用文本区域显示更新后的代码.您的原始代码没有文本区.
此外,字体标签已被弃用,不应再使用.
使用文本区域显示更新后的代码.您的原始代码没有文本区.
此外,字体标签已被弃用,不应再使用.
# 回答6
以下是我的代码.
以下是我的代码.
选择 | 换行 | 行号
- <script type="text/javascript">
- function getColor1(id) {
- var clr = document.getElementById(id);
- if (clr.style.visibility=="visible") {
- clr.style.visibility="hidden";
- }
- else {
- clr.style.visibility="visible";
- }
- }
- function getColor(block)
- {//alert(block);
- var s_url=block.href;
- var pColor=s_url.substr(s_url.indexOf("#"));
- document.getElementById("colorPalDemo").style.Color=pColor;
- //alert(pColor);
- }
- function changeSize(size){
- document.getElementById("ss").value;
- }
- function updateh1family(name) {
- document.getElementById("aa").value;
- }
- function font(elems,tag,size,name,block){//alert(size);
- alert(block);
- var i=0, el, selectedText, newText;
- while(el=elems[i++]){
- selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
- if(selectedText!=''){
- newText='<'+tag+' size='+size+' face='+name+' color='+block+'>'+selectedText+'</'+tag+'>';
- if(document.selection){//IE
- document.selection.createRange().text=newText;
- return;//prevents the double replacement
- }
- else{//Moz
- el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
- }
- }
- }
- }
- </script>
- <form accept-charset="utf-8" action="b.html" method="post" name="fillup" enctype="multipart/form-data" onSubmit="return validate();">
- <table align="center" border="1" width="850" height="500" bgcolor="FFF5EE" >
- <tr><td>
- <table align="center" bgcolor="">
- <tr><td align="center" colspan="10"><img src="img/laugh.gif" alt="Smiley" /></td></tr>
- <tr><td align="center" style="color:#FF0000; text-decoration:blink;" colspan="10" ><b><?php echo $qtype1;?></b></td></tr>
- <tr><td colspan="10"> </td></tr>
- <tr><td align="center" colspan="10"><img src="img/subst.png" title="substring" onclick="formatText ([ques1,ques2,opt1,opt2,opt3,opt4],'sub');">
- <img src="img/supst.png" title="superstring" onclick="formatText1 ([ques1,ques2,opt1,opt2,opt3,opt4],'sup');">
- <!--<input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font');">-->
- <img src="img/mover.png" title="mover,mout" onclick="mover ([ques1,ques2,opt1,opt2,opt3,opt4],'mover','mout');"></td></tr>
- <img src="img/supst.png" id="color" onclick="getColor1('imgclr');" /><br/>
- <img id="imgclr" src="img/palette.gif" usemap="#color_pallete" style="visibility:hidden"/>
- <map name="color_pallete" id="color_pallete">
- <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
- <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
- <area shape="rect" coords="63,7,87,31" href="#0000FF" onclick="getColor(this);" />
- <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
- <area shape="rect" coords="7,33,30,58" href="#00FFFF" onclick="getColor(this);"/>
- <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
- <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
- <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
- <area shape="rect" coords="8,61,31,85" href="#32CD32" onclick="getColor(this);" />
- <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
- <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
- <area shape="rect" coords="92,61,115,85" href="#008B8B" onclick="getColor(this);" />
- <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
- <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
- <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
- <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
- </map>
- <span id="colorPalDemo"></span>
- Font size:
- <select name="sizeselect" id="ss" onchange="changeSize(this.value)">
- <option value="10">10</option>
- <option value="13">13</option>
- <option value="15">15</option>
- <option value="17">17</option>
- <option value="19">19</option>
- <option value="21">21</option>
- <option value="23">23</option>
- <option value="50">50</option>
- </select>
- <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);">
- <select name="selectFontFamily" id="aa" onchange="updateh1family(this.value)">
- <option value="Serif">Serif</option>
- <option value="Arial">Arial</option>
- <option value="Sans-Serif">Sans-Serif</option>
- <option value="Tahoma">Tahoma</option>
- <option value="Verdana">Verdana</option>
- <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
- <option value="Times New Roman">Times New Roman</option>
- <!-- <option> Sans-Serif </option>
- <option> Tahoma </option>
- <option> Verdana </option>
- <option> Lucida Sans Unicode </option>
- </select>-->
- <tr>
- <td>
- Statement1<font color="#0000FF">*</font>
- </td>
- <td>
- :
- </td>
- <td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
- </td>
- <td>
- <table>
- <tr>
- <td width="10">
- <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
- <input type="file" id="quest_wav1" name="quest_wav1" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- <tr>
- <td width="10">
- <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
- <input type="file" id="quest_img1" name="quest_img1" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- </table>
- </td>
- <td> </td>
- <td>
- Statement2<font color="#0000FF">*</font>
- </td>
- <td>
- :
- </td>
- <td><textarea name="ques2" id="ques2" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
- </td>
- <td> </td>
- <td>
- <table>
- <tr>
- <td width="10">
- <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
- <input type="file" id="quest_wav2" name="quest_wav2" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- <tr>
- <td width="10">
- <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
- <input type="file" id="quest_img2" name="quest_img2" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1" />
- </div>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>
- Option1<font color="red">*</font>
- </td>
- <td>
- :
- </td>
- <td>
- <textarea name="opt1" id="opt1" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
- </td>
- <td>
- <table>
- <tr>
- <td width="10">
- <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
- <input type="file" id="opt_wav1" name="opt_wav1" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- <tr>
- <td width="10">
- <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
- <input type="file" id="opt_img1" name="opt_img1" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- </table>
- </td>
- <td> </td>
- <td>
- Option2
- </td>
- <td>
- :
- </td>
- <td><textarea name="opt2" id="opt2" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
- </td>
- <td> </td>
- <td>
- <table>
- <tr>
- <td width="10">
- <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
- <input type="file" id="opt_wav2" name="opt_wav2" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- <tr>
- <td width="10">
- <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
- <input type="file" id="opt_img2" name="opt_img2" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1" />
- </div>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>
- Option3
- </td>
- <td>
- :
- </td>
- <td><textarea name="opt3" id="opt3" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
- </td>
- <td>
- <table>
- <tr>
- <td width="10">
- <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
- <input type="file" id="opt_wav3" name="opt_wav3" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- <tr>
- <td width="10">
- <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
- <input type="file" id="opt_img3" name="opt_img3" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1" />
- </div>
- </td>
- </tr>
- </table>
- </td>
- <td> </td>
- <td>
- Option4
- </td>
- <td>
- :
- </td>
- <td><textarea name="opt4" id="opt4" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
- </td>
- <td> </td>
- <td>
- <table>
- <tr>
- <td width="10">
- <div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
- <input type="file" id="opt_wav4" name="opt_wav4" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1" />
- </div>
- </td>
- </tr>
- <tr>
- <td width="10">
- <div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
- <input type="file" id="opt_img4" name="opt_img4" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1" />
- </div>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>correct Answer<font color="red">*</font></td><td>:</td>
- <td><input type="text" name="corr_ans" id="corr_ans" size="16" onkeypress="return isNumeric(event)"></td>
- <td> </td>
- <td> </td>
- <td>Topic<font color="red">*</font></td><td>:</td>
- <td><input type="text" name="topic" id="topic" size="16" /></td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td>Page No<font color="red">*</font></td><td>:</td>
- <td><input type="text" name="pno" id="pno" size="16" onkeypress="return isNumberKey(event, this.value)"/></td>
- <td> </td>
- <td> </td>
- <td>Chapter No<font color="red">*</font></td><td>:</td>
- <td><input type="text" name="cno" id="cno" size="16" onkeypress="return isNumberKey(event, this.value)"/></td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td>Year<font color="red">*</font></td><td>:</td>
- <td><input type="text" name="year" id="year" size="16" onkeypress="return isNumberKey(event, this.value)" /></td>
- <td> </td>
- <td> </td>
- <td>Standard<font color="red">*</font></td><td>:</td>
- <td><input type="text" name="std" id="std" size="16"/></td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td>Board</td><td>:</td>
- <td><input type="text" name="board_txt" id="board_txt" size="16" readonly="" value="<?php echo $boardname; ?>" style="background-color:#FFFFFF;" /></td>
- <td> </td>
- <td> </td>
- <td>Subject</td><td>:</td>
- <td><input type="text" name="subject_txt" id="subject_txt" size="16" readonly="" value="<?php echo $subjectname; ?>" style="background-color:#FFFFFF;" />
- <input type="hidden" name="language" id="language" value="<?php echo $language_name; ?>" />
- <input type="hidden" name="qtype" id="qtype" value="<?php echo $qtype2; ?>" />
- </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td>Fill Type</td>
- <td>:</td>
- <td>
- <select id="fill_type" name="fill_type" >
- <option value="Fillup" selected="selected">Fillup</option>
- <option value="Abbreviation">Abbreviation</option>
- <option value="Preposition">Preposition</option>
- <option value="Phrases">Phrases</option>
- <option value="Compound">Compound</option>
- <option value="GrammarFill1">GrammarFill1</option>
- <option value="TOF">TOF</option>
- <option value="FrameQues">FrameQuestion</option>
- <option value="Pronoun">Pronoun</option>
- <option value="Pattern">Pattern</option>
- <option value="Auxillary">Auxillary</option>
- <option value="IdPattern">IdPattern</option>
- <option value="Proverb">Proverb</option>
- <option value="Spelling">Spelling</option>
- </select>
- </td>
- <td> </td>
- <td> </td>
- <td>Explanation</td><td>:</td>
- <td><input type="text" name="exp" id="exp" size="16" /></td>
- <td> </td>
- <td> </td>
- </tr>
- <tr><td colspan="10"> </td></tr>
- <tr>
- <td><font color="#FF0000"><b>Note :</b></font></td><td colspan="4" align="center"><font color="#0000FF"> *</font> Mandatory Fields (Either one)</td>
- <td colspan="5" align="center"><font color="#FF0000">*</font> Mandatory Fields</td></tr>
- <td colspan="3" align="left"><img src="img/mic1_30.jpg" alt="Upload Wave" />Upload WAVE</td>
- <td colspan="4" align="left"><img src="img/img1.jpeg" alt="Upload Image" />Upload IMAGE</td>
- <tr>
- <tr><td colspan="10"> </td></tr>
- <td colspan="10" align="center">
- <input type="submit" name="add" value="Add" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"/>
- <input type="reset" name="clear" value="Clear" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000" />
- </td>
- </tr>
- </table>
- </td></tr>
- </table>
- </form>
# 回答7
谢谢你的帮助,阿科德.它现在运行得很好.
谢谢你的帮助,阿科德.它现在运行得很好.
# 回答8
太好了.你能把你的工作代码发布给其他人吗?谢谢.
PS.对不起,没有机会看到您发布的代码...
太好了.你能把你的工作代码发布给其他人吗?谢谢.
PS.对不起,没有机会看到您发布的代码...
# 回答9
相反,下面的函数
相反,下面的函数
选择 | 换行 | 行号
- function getColor(block)
- {
- var s_url=block.href;
- var pColor=s_url.substr(s_url.indexOf("#"));
- document.getElementById("colorPalDemo").style.Color=pColor;
- }
我简单地使用了以下函数
选择 | 换行 | 行号
- function getColor(block1)
- {
- var s_url=block1.href;
- var pColor=s_url.substr(s_url.indexOf("#"));
- document.getElementsByTagName('textarea').value=pColor;
- }
还删除了SPAN标记.
标签: Javascript