Show Color Palette

M

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
 
V

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 <td> will
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.backgroundColor;

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Changing a background-color 2
How can I fix my pattern coding error in c++ 0
<Button ...> display is fine, except for two things 1
How to position the *tooltip* comment on these buttons? 9
Change color of drawing when clicked 2
Color for hover over 1
Sending data from web page to Raspberry Pi 0
Slideshow not working properly 2

Members online

Total: 16 (members: 2, guests: 14)
Robots: 210

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top