Color Schemes in ASP pages - HOWTO ? 1

Deadline · Aug 6, 2001

Hi,
I am developing a Cafeteria Menu entry interface.

So far so good. No problems. But now there is this new requirement:

The client needs to implement color schemes. Like the page background in a color, cafeteria name in a color, the TABLEs of Menus in a different color etc..

And they want it to be editable, so that they can choose different color schemes for every week or so...

How to implement this ?
Thank you...
RR

vasah20 · Aug 6, 2001

define your color scheme via CSS.

create an admin page, where the user can change the color schemes as necessary.

once the admin page is submitted, write a new CSS file via FSO, and there you have it.

fully updatable color schemes, as user defined.

hth
leo leo

Deadline · Aug 6, 2001

That helped Leo... Thanks..
But, how to present a color selection interface to the user ?

Is it possible in ASP to fire that color dialog we see across windows programs ?

Thank you...
RR

Deadline · Aug 7, 2001

Can you point to a site that discusses a similar problem ?

Thank you...
RR

vasah20 · Aug 7, 2001

I coded something very similar to this for an intranet application here. maybe this will help you.

If you want the hex color images, tell me and I'll zip em up to you.

((popup window))
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>choose a color</TITLE>

<script language="javascript">
//plugs in color to the appropriate box
function plugColor(hexCol){
var d = document.chooseColor, light = document.chooseColor.hue[0].checked;
if (light) d.light.value = hexCol;
else d.dark.value = hexCol;
}

function processForm(){
var d = document.chooseColor, lightHex = escape(d.light.value), darkHex = escape(d.dark.value);
window.open("index.asp?dkC=" + darkHex + "&ltC=" + lightHex,"template&quot

;
}
</script>
</HEAD>
<BODY>
<form name="chooseColor">
Show as: light <input type="radio" name="hue" value="light" checked> or dark <input type="radio" name="hue" value="dark"><p>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="javascript

lugColor('#330000')">
<img src="images/330000.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#660000')">
<img src="images/660000.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#663333')">
<img src="images/663333.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#996666')">
<img src="images/996666.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc9999')">
<img src="images/cc9999.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffcccc')">
<img src="images/ffcccc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff9999')">
<img src="images/ff9999.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc6666')">
<img src="images/cc6666.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff6666')">
<img src="images/ff6666.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff3300')">
<img src="images/ff3300.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff3333')">
<img src="images/ff3333.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff0000')">
<img src="images/ff0000.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc3333')">
<img src="images/cc3333.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc3300')">
<img src="images/cc3300.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc0000')">
<img src="images/cc0000.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#993300')">
<img src="images/993300.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#990000')">
<img src="images/990000.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#993333')">
<img src="images/993333.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc6633')">
<img src="images/cc6633.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc6600')">
<img src="images/cc6600.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff6633')">
<img src="images/ff6633.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff6600')">
<img src="images/ff6600.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff9900')">
<img src="images/ff9900.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff9933')">
<img src="images/ff9933.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff9966')">
<img src="images/ff9966.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffcc99')">
<img src="images/ffcc99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc9966')">
<img src="images/cc9966.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc9933')">
<img src="images/cc9933.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc9900')">
<img src="images/cc9900.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#996633')">
<img src="images/996633.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#996600')">
<img src="images/996600.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#663300')">
<img src="images/663300.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#ffcc00')">
<img src="images/ffcc00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffcc33')">
<img src="images/ffcc33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffcc66')">
<img src="images/ffcc66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffff00')">
<img src="images/ffff00.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffff66')">
<img src="images/ffff33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffff66')">
<img src="images/ffff66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffff99')">
<img src="images/ffff99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffffcc')">
<img src="images/ffffcc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cccc66')">
<img src="images/cccc66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cccc33')">
<img src="images/cccc33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cccc00')">
<img src="images/cccc00.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#999900')">
<img src="images/999900.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#999933')">
<img src="images/999933.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cccc99')">
<img src="images/cccc99.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#999966')">
<img src="images/999966.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#333300')">
<img src="images/333300.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#666600')">
<img src="images/666600.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#666633')">
<img src="images/666633.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccff00')">
<img src="images/ccff00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccff33')">
<img src="images/ccff33.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccff66')">
<img src="images/ccff66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ff00')">
<img src="images/99ff00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ff33')">
<img src="images/99ff33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ff00')">
<img src="images/66ff00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ff66')">
<img src="images/99ff66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccff99')">
<img src="images/ccff99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99cc66')">
<img src="images/99cc66.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99cc33')">
<img src="images/99cc33.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99cc00')">
<img src="images/99cc00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#669933')">
<img src="images/669933.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#669900')">
<img src="images/669900.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#336633')">
<img src="images/336633.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#336600')">
<img src="images/336600.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#339900')">
<img src="images/339900.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66cc00')">
<img src="images/66cc00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66cc33')">
<img src="images/66cc33.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ff33')">
<img src="images/66ff33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ff00')">
<img src="images/33ff00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ff33')">
<img src="images/33ff33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ff00')">
<img src="images/00ff00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ff66')">
<img src="images/66ff66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ff99')">
<img src="images/99ff99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccffcc')">
<img src="images/ccffcc.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66cc66')">
<img src="images/66cc66.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33cc33')">
<img src="images/33cc33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00cc00')">
<img src="images/00cc00.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33cc00')">
<img src="images/33cc00.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#339933')">
<img src="images/339933.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#003300')">
<img src="images/003300.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#006600')">
<img src="images/006600.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#009900')">
<img src="images/009900.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#009933')">
<img src="images/009933.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#339966')">
<img src="images/339966.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#669966')">
<img src="images/669966.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99cc99')">
<img src="images/99cc99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ff33')">
<img src="images/00ff33.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ff66')">
<img src="images/00ff66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ff66')">
<img src="images/33ff66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ff99')">
<img src="images/66ff99.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ff99')">
<img src="images/33ff99.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ff99')">
<img src="images/00ff99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00cc66')">
<img src="images/00cc66.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33cc66')">
<img src="images/33cc66.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00cc33')">
<img src="images/00cc33.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#006633')">
<img src="images/006633.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#009966')">
<img src="images/009966.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00cc99')">
<img src="images/00cc99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33cc99')">
<img src="images/33cc99.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66cc99')">
<img src="images/66cc99.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ffcc')">
<img src="images/99ffcc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ffcc')">
<img src="images/66ffcc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ffcc')">
<img src="images/33ffcc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ffcc')">
<img src="images/00ffcc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ffff')">
<img src="images/00ffff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ffff')">
<img src="images/33ffff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ffff')">
<img src="images/66ffff.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ffff')">
<img src="images/99ffff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66cccc')">
<img src="images/66cccc.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33cccc')">
<img src="images/33cccc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00cccc')">
<img src="images/00cccc.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#006666')">
<img src="images/006666.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#336666')">
<img src="images/336666.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#009999')">
<img src="images/009999.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#339999')">
<img src="images/339999.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#669999')">
<img src="images/669999.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99cccc')">
<img src="images/99cccc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccffff')">
<img src="images/ccffff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#99ccff')">
<img src="images/99ccff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#66ccff')">
<img src="images/66ccff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#33ccff')">
<img src="images/33ccff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#00ccff')">
<img src="images/00ccff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0099ff')">
<img src="images/0099ff.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3399ff')">
<img src="images/3399ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0099cc')">
<img src="images/0099cc.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3399cc')">
<img src="images/3399cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#006699')">
<img src="images/006699.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#003333')">
<img src="images/003333.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#003366')">
<img src="images/003366.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#003399')">
<img src="images/003399.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0033cc')">
<img src="images/0033cc.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0033ff')">
<img src="images/0033ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0066cc')">
<img src="images/0066cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3366cc')">
<img src="images/3366cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#336699')">
<img src="images/336699.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6699cc')">
<img src="images/6699cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6699ff')">
<img src="images/6699ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0066ff')">
<img src="images/0066ff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3366ff')">
<img src="images/3366ff.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3333ff')">
<img src="images/3333ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3333cc')">
<img src="images/3333cc.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#333399')">
<img src="images/333399.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#333366')">
<img src="images/333366.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#000033')">
<img src="images/000033.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#000066')">
<img src="images/000066.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#000099')">
<img src="images/000099.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0000cc')">
<img src="images/0000cc.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#0000ff')">
<img src="images/0000ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6666ff')">
<img src="images/6666ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6666cc')">
<img src="images/6666cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#666699')">
<img src="images/666699.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9999cc')">
<img src="images/9999cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ccccff')">
<img src="images/ccccff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9999ff')">
<img src="images/9999ff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6633ff')">
<img src="images/6633ff.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6600ff')">
<img src="images/6600ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3300ff')">
<img src="images/3300ff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#3300cc')">
<img src="images/3300cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#330099')">
<img src="images/330099.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#330066')">
<img src="images/330066.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6633cc')">
<img src="images/6633cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#6600cc')">
<img src="images/6600cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9900cc')">
<img src="images/9900cc.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9933cc')">
<img src="images/9933cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc00ff')">
<img src="images/cc00ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc33ff')">
<img src="images/cc33ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc66ff')">
<img src="images/cc66ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc99ff')">
<img src="images/cc99ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9966ff')">
<img src="images/9966ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9933ff')">
<img src="images/9933ff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9900ff')">
<img src="images/9900ff.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#9966cc')">
<img src="images/9966cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#663399')">
<img src="images/663399.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#660099')">
<img src="images/660099.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#330033')">
<img src="images/330033.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#660066')">
<img src="images/660066.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#663366')">
<img src="images/663366.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#990099')">
<img src="images/990099.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#993399')">
<img src="images/993399.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc00cc')">
<img src="images/cc00cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc33cc')">
<img src="images/cc33cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc66cc')">
<img src="images/cc66cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#996699')">
<img src="images/996699.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc99cc')">
<img src="images/cc99cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffccff')">
<img src="images/ffccff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff99ff')">
<img src="images/ff99ff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff66ff')">
<img src="images/ff66ff.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff33ff')">
<img src="images/ff33ff.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff00ff')">
<img src="images/ff00ff.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff33cc')">
<img src="images/ff33cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff00cc')">
<img src="images/ff00cc.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#660033')">
<img src="images/660033.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#990066')">
<img src="images/990066.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#993366')">
<img src="images/993366.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc0099')">
<img src="images/cc0099.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc3399')">
<img src="images/cc3399.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff66cc')">
<img src="images/ff66cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc6699')">
<img src="images/cc6699.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff99cc')">
<img src="images/ff99cc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff6699')">
<img src="images/ff6699.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff3399')">
<img src="images/ff3399.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff0099')">
<img src="images/ff0099.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff3366')">
<img src="images/ff3366.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff0066')">
<img src="images/ff0066.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ff0033')">
<img src="images/ff0033.gif" width=13 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc0033')">
<img src="images/cc0033.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#90033')">
<img src="images/990033.gif" width=10 height=12 border=0></a></td>
</tr>
<tr>
<td>
<a href="javascript

lugColor('#cc0066')">
<img src="images/cc0066.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cc3366')">
<img src="images/cc3366.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#000000')">
<img src="images/000000.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#333333')">
<img src="images/333333.gif" width=11 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#666666')">
<img src="images/666666.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#999999')">
<img src="images/999999.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#cccccc')">
<img src="images/cccccc.gif" width=12 height=12 border=0></a></td>
<td>
<a href="javascript

lugColor('#ffffff')">
<img src="images/ffffff.gif" width=12 height=12 border=0></a></td>
<td>
<img src="images/web216grid_217.gif" width=12 height=12></td>
<td>
<img src="images/web216grid_218.gif" width=12 height=12></td>
<td>
<img src="images/web216grid_219.gif" width=13 height=12></td>
<td>
<img src="images/web216grid_220.gif" width=11 height=12></td>
<td>
<img src="images/web216grid_221.gif" width=12 height=12></td>
<td>
<img src="images/web216grid_222.gif" width=13 height=12></td>
<td>
<img src="images/web216grid_223.gif" width=12 height=12></td>
<td>
<img src="images/web216grid_224.gif" width=10 height=12></td>
</tr>
</table>
</p>
<table cellpadding="0" cellspacing="0">
<tr><td>Light color:</td><td><input type="text" name="light" size="10" value="#ffffff"></td></tr>
<tr><td>Dark color:</td><td><input type="text" name="dark" size="10" value="#000000"></td>
<tr><td colspan="2" align="right">
<input type="button" value="Show changes" onclick="javascript

rocessForm();"></td></tr>
</table>
</form>
</BODY>
</HTML>

((parent ASP page))
<%
Dim color1, color2
color1 = Request("dkC&quot

color2 = Request("ltC&quot

if color1 = "" then color1 = "#FF3333"
if color2 = "" then color2 = "#CCCCCC"
%>
<html>
<head>
<title>Template</title>
<STYLE>
A:link {text-decoration:none; color:#000000}
A:visited {text-decoration:none; color:#333333}
A:hover {text-decoration:underline; color:red}
.BL
{
BACKGROUND-COLOR: #ffffff;
COLOR: #0000FF;
TEXT-DECORATION: none
}
.Color1
{
BACKGROUND-COLOR: <%=color1%>;
}
.Color2
{
BACKGROUND-COLOR: <%=color2%>;
}

</STYLE>
<script language="javascript">
window.name = "template";
</script>
</head>

<body class="color1"> 
<table border="0" width="95%" bgcolor="#FFFFFF" valign=top align="center">
<tr>
<td align=center colspan=2>
<table border="0" width="100%">
<tr>
<td width="100%" align=center>
some image
<form name="thisForm" Method=post action=deptX.htm>
<TABLE border=0 cellPadding=0 cellSpacing=0 align=center width="100%" height="50">
<tr align="center">
<TD height=15 noWrap vAlign=bottom width="31%"> </TD>
<TD height=15 noWrap vAlign=bottom width="69%"><B><FONT color=#000000 face=Verdana size=2><A href="#"
style="COLOR: #000000; TEXT-DECORATION: none"> Home</A> </FONT></B> <B><FONT color=#000000 face=Verdana size=2>|
<A href="deptX.htm" style="COLOR: #000000; TEXT-DECORATION: none">Departments</A> |
<A href="deptX.htm" style="COLOR: #000000; TEXT-DECORATION: none">Specials</A> |
<a href="deptX.htm"><img src="cart.gif" width="19" height="15" border="0"></a><A href="deptX.htm"
style="COLOR: #000000; TEXT-DECORATION: none">Cart</A> | <A href="deptX.htm"
style="COLOR: #000000; TEXT-DECORATION: none">Help</A></FONT></B>
</TD>
</TR>
<TR> 
<TD colSpan=2 height=25 noWrap vAlign=top>
<TABLE bgColor=#000000 border=0 cellPadding=0 cellSpacing=0 height=11 width="100%">
<TR class="color2"> 
<TD height=25 nowrap><B><font color="#ffffff" face="Verdana, Arial, Helvetica, sans-serif">   <font color="#CC0000">Search</font></font><FONT color=#ffffff>
<INPUT name=queryFld type="text" width="25">
</FONT></B></TD>
<TD height=25 nowrap><B><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="2">By:</font><FONT color=#ffffff>
<INPUT name=vendor type=radio value=0>
<font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="2">Product</font></FONT></B></TD>
<TD height=25 nowrap><B><FONT color=#ffffff>
<INPUT name=vendor type=radio value=1>
<font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="2">Manufacturer</font></FONT></B></TD>
<TD align=right height=25 nowrap>
<INPUT name=Find type=submit value="Find!">
</TD>
<TD align=right height=25 width=185> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="25%" valign=top>
<table border="0" width="100%" cellspacing="3" valign=top class="color1" height="215"> 
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 1</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 2</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 3</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 4</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 5</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 6</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 7</a></td>
</tr>
<tr class="color2"> 
<td width="100%" height="21">   <a href="deptX.htm">Dept 8</a></td>
</tr>
</table>
</td>
<td width="75%">this is the content section </td>
</tr>
<tr>
<td colspan="2">
<table border="0" width="100%">
<tr>
<td width="100%">
<table border="0" width="100%">
<tr>
<td width="100%" align="center">
<font size="3" color="#FF0000">Your Company</font><font size="2"><br>
123 Anywhere St.<br>
Someplace, USA<br>
(800) 555-1212</font>
</td>
</tr>
<tr>
<td>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size=-2>
<a href="deptX.htm">my account</a>
| <a href="deptX.htm">my cart</a>
| <a href="deptX.htm">products</a>
| <a href="mailto:someone@?.com">contact us</a>
| <a href="deptX.htm">search</a>
| <a href="deptX.htm">about us</a>
| <a href="deptX.htm">home</a></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script>
</script>
<a href="#" onclick="javascript:window.open('chooseColors.htm','colorChoose','height=350,width=225');">spawn colors</a>
</body>
</html>

hth
leo

Deadline · Aug 7, 2001

Leo,
Thank you very much for the time and patience, but the code got chopped off at the end.. Could you please send the code again to festivista97@Yahoo.com ?

This too is a requirment for Intranet and hence, Client-side VBScript is ok with me..

Thank you...
RR

vasah20 · Aug 7, 2001