Show Color Palette

[mrajanikrishna]

Hello,

I am developing an application in which the user has to select his
choice of colors and displaying the images with that color. How can I
display color palette to the user and return the selected color?

thanx in advance

[ValliM]

Hi,

You can create a colorpalette as the UserControl. ColorPalette is a table
structure .when you choose a color , the background color in the <tdwill
be changed.

The Code for colorpallete:

<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="ColourPicker.ascx.cs" Inherits="ColourPicker" %>

<style.CPCell { border:1px #FFFFFF solid; padding:2px; }

..CPCell_Over { border:1px #4B4B6F solid; background-color:#FFEEC2;
padding:2px; }

..CPImg { border:1px #999999 solid; }

..CPChosen { background-color:#FFC06F; border:1px #4B4B6F solid;
font-family:tahoma; font-size:11px; padding:2px; }

</style>

<script language="JavaScript">

function SetColor(colImg)

{

var chosen = document.getElementById('ChosenColor');

chosen.style.backgroundColor=colImg.style.backgrou ndColor;

chosen.innerHTML = colImg.alt;

}

</script>

<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td id="ChosenColor" colspan="8" class="CPChosen" align="center">No
Fill</td>

</tr>

<tr>

<td colspan="8"><img src="images/spacer.gif" width="100" height="1"
border="0"></td>

</tr>

<tr>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Black"
style="BACKGROUND-COLOR:#000000"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Brown"
style="BACKGROUND-COLOR:#993300"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Olive Green"

style="BACKGROUND-COLOR:#333300" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Dark Green"

style="BACKGROUND-COLOR:#003300" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Dark Teal"

style="BACKGROUND-COLOR:#003366" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Dark Blue"

style="BACKGROUND-COLOR:#000080" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Indigo"
style="BACKGROUND-COLOR:#333399"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Gray-80%"
style="BACKGROUND-COLOR:#333333"

width="12" height="12" border="0"></td>

</tr>

<tr>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Dark Red"
style="BACKGROUND-COLOR:#800000"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Orange"
style="BACKGROUND-COLOR:#ff6600"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Dark Yellow"

style="BACKGROUND-COLOR:#808000" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Green"
style="BACKGROUND-COLOR:#008000"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Teal"
style="BACKGROUND-COLOR:#008080"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Blue"
style="BACKGROUND-COLOR:#0000ff"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Blue-Gray"

style="BACKGROUND-COLOR:#666699" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Gray-50%"
style="BACKGROUND-COLOR:#808080"

width="12" height="12" border="0"></td>

</tr>

<tr>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Red"
style="BACKGROUND-COLOR:#ff0000"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Light Orange"

style="BACKGROUND-COLOR:#ff9900" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Lime"
style="BACKGROUND-COLOR:#99cc00"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Sea Green"

style="BACKGROUND-COLOR:#339966" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Aqua"
style="BACKGROUND-COLOR:#33cccc"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Light Blue"

style="BACKGROUND-COLOR:#3366ff" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Violet"
style="BACKGROUND-COLOR:#800080"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Gray-40%"
style="BACKGROUND-COLOR:#969696"

width="12" height="12" border="0"></td>

</tr>

<tr>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Pink"
style="BACKGROUND-COLOR:#ff00ff"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Gold"
style="BACKGROUND-COLOR:#ffcc00"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Yellow"
style="BACKGROUND-COLOR:#ffff00"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Bright Green"

style="BACKGROUND-COLOR:#00ff00" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Turquoise"

style="BACKGROUND-COLOR:#00ffff" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Sky Blue"
style="BACKGROUND-COLOR:#00ccff"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Plum"
style="BACKGROUND-COLOR:#993366"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Gray-25%"
style="BACKGROUND-COLOR:#c0c0c0"

width="12" height="12" border="0"></td>

</tr>

<tr>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Rose"
style="BACKGROUND-COLOR:#ff99cc"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Tan"
style="BACKGROUND-COLOR:#ffcc99"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Light Yellow"

style="BACKGROUND-COLOR:#ffff99" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Light Green"

style="BACKGROUND-COLOR:#ccffcc" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Light Turquoise"

style="BACKGROUND-COLOR:#ccffff" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Pale Blue"

style="BACKGROUND-COLOR:#99ccff" width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="Lavander"
style="BACKGROUND-COLOR:#cc99ff"

width="12" height="12" border="0"></td>

<td class="CPCell" onmouseover="this.className='CPCell_Over'"
onmouseout="this.className='CPCell'"><img src="images/spacer.gif"
class="CPImg" onclick="SetColor(this);" alt="White"
style="BACKGROUND-COLOR:#ffffff"

width="12" height="12" border="0"></td>

</tr>

</table>

Place this in our .aspx file and get it work.

Let me know if you have any doubts.

Regards,

Valli.

www.syncfusion.com


<mr************@gmail.comwrote in message
news:11**********************@b68g2000cwa.googlegr oups.com...

Hello,

I am developing an application in which the user has to select his
choice of colors and displaying the images with that color. How can I
display color palette to the user and return the selected color?

thanx in advance