Hi,
I am new to use the php,javascript.
I have done the coding for color palette.But now i also do something like by clicking the image the palette get open. But what my problem is i cann't able to select the color i want. Please tell me what i am doing wrong.Otherwise please suggest me some other code.My code is -
<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>
-
9 1612
JavaScript is case-sensitive. Line 19 should be:
Ya i changed. Still the palette is not working.
There's no text in the span element. Add some text to see the change.
No no i don't want to see the text color change.I am having some textarea and i am entering some text,what i want to do is for my selected text in my textbox i want to select the color. And inside my textbox it should seen like this <font color=#FF4500>welcome</font>
Show your updated code with the textarea. Your original code has no textarea.
Also, font tags are deprecated and should no longer be used.
The following is my code. -
<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>
-
Thanks for the help acoder. It works fine now.
That's great. Can you post your working code please for the benefit of others? Thanks.
PS. sorry, didn't get the chance to look at your posted code...
Instead the following function -
function getColor(block)
-
{
-
var s_url=block.href;
-
var pColor=s_url.substr(s_url.indexOf("#"));
-
document.getElementById("colorPalDemo").style.Color=pColor;
-
}
-
I simply used the following function -
function getColor(block1)
-
{
-
var s_url=block1.href;
-
var pColor=s_url.substr(s_url.indexOf("#"));
-
document.getElementsByTagName('textarea').value=pColor;
-
}
-
Also removed the span tag.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: lasterix |
last post by:
Hi,
I wanted to know if it is possible to do a "color picker" with PHP ?
thanks
|
by: LPA |
last post by:
Hi,
I am searching for a color picker.
Thanx for your help
LPA
|
by: Dayne |
last post by:
It seem the color picker is not working the way it should. Usually , I am
able to define the color under "Custom Color", however, I don't see the
"define" button . Any ideas?
DT
|
by: Morten Wennevik |
last post by:
The color dialog in Visual Studio is ok, but I would like to display the
framework color picker (like the color picker in Visual Studio).
Is there a class for this, or do I have to create a list of...
|
by: Stephan Ainley |
last post by:
Is there a control so I can use the same type of color picker as the
PropertyGrid does? Almost like a combo box?
thanks
|
by: mr.mike.ward |
last post by:
I'm looking for a color picker control similar to the one that appears
in the Windows XP Display Properites | Advanced Appearance dialog. Any
suggestions?
|
by: Charles Law |
last post by:
Does anyone know if there is an accessible Color Picker Dialog in VB.NET,
similar to the one in the VS HTML page designer? It has a nice range of web
specific colours and palettes. The standard...
|
by: sajin |
last post by:
Hi all,
I am a new comer in VB .net windows forms , i need to implement a color
picker which is used to select color anywhere from the screen , i
searched in the net but no info
Plz give me...
|
by: SpaceyFace |
last post by:
i don't know what the problem is. i have a color picker component and a movie clip. i want the movie clip to change color once i use the picker. and have a easy variable to store the color value as...
|
by: SpaceyFace |
last post by:
hellooooo. i'm havin a real hard time tryin to find a color picker that i can easily use. I'm making an interactive flash file that has a color picker for different colors of an object. the object...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |