leeyoung
03-20-2004, 01:03 AM
<html>
<head>
<title>A Simple Color Picker</title>
<style>
td {color:black; background-color:ivory}
</style>
<script language="JavaScript" type="text/javascript"><!-- Hide
var handlesDHTML = false;
function test_browser() {
if (document.getElementById || document.all || document.layers)
handlesDHTML = true;
else {
alert("Sorry. Your browser does not\nseem to support this method.");
return;
}
if (document.layers)
alert("Users of Netcape version 4.7 and earlier can only change the background color.");
document.colors.backred.focus(); // position cursor
document.colors.backred.select();
}
function applyColor() {
var f=document.colors;
var back_red_index=f.backred.selectedIndex; //which are equal to the index //numbers of the selected options from the backred
var back_green_index=f.backgreen.selectedIndex;
var back_blue_index=f.backblue.selectedIndex;
var text_red_index=f.textred.selectedIndex;
var text_green_index=f.textgreen.selectedIndex;
var text_blue_index=f.textblue.selectedIndex;
// Store the text of the selected color
var back_red=f.backred.options[back_red_index].value;
var back_green=f.backgreen.options[back_green_index].value;
var back_blue=f.backblue.options[back_blue_index].value;
var text_red=f.textred.options[text_red_index].value;
var text_green=f.textgreen.options[text_green_index].value;
var text_blue=f.textblue.options[text_blue_index].value;
var backcolor = "#" + back_red + back_green + back_blue;
var textcolor = "#" + text_red + text_green + text_blue;
var nodestyle;
if (document.getElementById) {
nodeStyle = document.getElementById('colors').style;
nodeStyle.color = textcolor;
nodeStyle.backgroundColor = backcolor;
}
else if (document.all) { // for IE 4+, Opera 6, ...
nodeStyle = document.all['colors'].style;
nodeStyle.color = textcolor;
nodeStyle.backgroundColor = backcolor;
}
else if (document.layers) { // for NS 4 only
nodeStyle = window.document.layers['colors'];
nodeStyle.document.fgColor = textcolor;
nodeStyle.document.bgColor = backcolor;
}
document.colors.backred.focus(); // reposition cursor
document.colors.backred.select();
}
// --></script>
</head>
<body>
<center>
<img src="wd.gif" alt="Web Design"><hr><br>
<h2 style="font-family:Arial, Helvetica, sans-serif">
Choosing Colors from the Safety Palette
</h2>
<p>Click the drop-down list boxes to change the background and text color
of the Web page to the indicated hexadecimal color values. To restore the page to
its original appearance, click <b>restore</b>.
</p>
<p>Note that users of Netscape version 4.7 or earlier, will not be able to change the
text color of the page.</p>
<form name="colors">
<table border="10" cellpadding="5">
<tr>
<td colspan="3" align="center">Background Color</td>
</tr>
<tr>
<td>Red:
<select name="backred">
<option>00<option>33<option>66<option>99<option>CC<option selected>FF
</select>
</td>
<td>Green:
<select name="backgreen">
<option>00<option>33<option>66<option>99<option>CC<option selected>FF
</select>
</td>
<td>Blue:
<select name="backblue">
<option>00<option>33<option>66<option>99<option>CC<option selected>FF
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">Text Color</td>
</tr>
<tr>
<td>Red:
<select name="textred">
<option selected>00<option>33<option>66<option>99<option>CC<option>FF
</select>
</td>
<td>Green:
<select name="textgreen">
<option selected>00<option>33<option>66<option>99<option>CC<option>FF
</select>
</td>
<td>Blue:
<select name="textblue">
<option selected>00<option>33<option>66<option>99<option>CC<option>FF
</select>
</td>
</tr>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<INPUT TYPE=BUTTON VALUE="Reload" onClick="location.reload()">
</TD>
</TR>
</table>
</form>
</center>
</body>
</html>
Anyone help me to solve this here what I want to solve:
I cannot run the apply_color() function:
Run the apply_color() function whenver the user changes the selected item in any of the six list boxes on the webpage.
More, instead of using the button to reload the page, if I want the user click the Restore hypetext link in the paragraph at the top of the page verify it reload the page. How can I set a hypetext link to this!
<head>
<title>A Simple Color Picker</title>
<style>
td {color:black; background-color:ivory}
</style>
<script language="JavaScript" type="text/javascript"><!-- Hide
var handlesDHTML = false;
function test_browser() {
if (document.getElementById || document.all || document.layers)
handlesDHTML = true;
else {
alert("Sorry. Your browser does not\nseem to support this method.");
return;
}
if (document.layers)
alert("Users of Netcape version 4.7 and earlier can only change the background color.");
document.colors.backred.focus(); // position cursor
document.colors.backred.select();
}
function applyColor() {
var f=document.colors;
var back_red_index=f.backred.selectedIndex; //which are equal to the index //numbers of the selected options from the backred
var back_green_index=f.backgreen.selectedIndex;
var back_blue_index=f.backblue.selectedIndex;
var text_red_index=f.textred.selectedIndex;
var text_green_index=f.textgreen.selectedIndex;
var text_blue_index=f.textblue.selectedIndex;
// Store the text of the selected color
var back_red=f.backred.options[back_red_index].value;
var back_green=f.backgreen.options[back_green_index].value;
var back_blue=f.backblue.options[back_blue_index].value;
var text_red=f.textred.options[text_red_index].value;
var text_green=f.textgreen.options[text_green_index].value;
var text_blue=f.textblue.options[text_blue_index].value;
var backcolor = "#" + back_red + back_green + back_blue;
var textcolor = "#" + text_red + text_green + text_blue;
var nodestyle;
if (document.getElementById) {
nodeStyle = document.getElementById('colors').style;
nodeStyle.color = textcolor;
nodeStyle.backgroundColor = backcolor;
}
else if (document.all) { // for IE 4+, Opera 6, ...
nodeStyle = document.all['colors'].style;
nodeStyle.color = textcolor;
nodeStyle.backgroundColor = backcolor;
}
else if (document.layers) { // for NS 4 only
nodeStyle = window.document.layers['colors'];
nodeStyle.document.fgColor = textcolor;
nodeStyle.document.bgColor = backcolor;
}
document.colors.backred.focus(); // reposition cursor
document.colors.backred.select();
}
// --></script>
</head>
<body>
<center>
<img src="wd.gif" alt="Web Design"><hr><br>
<h2 style="font-family:Arial, Helvetica, sans-serif">
Choosing Colors from the Safety Palette
</h2>
<p>Click the drop-down list boxes to change the background and text color
of the Web page to the indicated hexadecimal color values. To restore the page to
its original appearance, click <b>restore</b>.
</p>
<p>Note that users of Netscape version 4.7 or earlier, will not be able to change the
text color of the page.</p>
<form name="colors">
<table border="10" cellpadding="5">
<tr>
<td colspan="3" align="center">Background Color</td>
</tr>
<tr>
<td>Red:
<select name="backred">
<option>00<option>33<option>66<option>99<option>CC<option selected>FF
</select>
</td>
<td>Green:
<select name="backgreen">
<option>00<option>33<option>66<option>99<option>CC<option selected>FF
</select>
</td>
<td>Blue:
<select name="backblue">
<option>00<option>33<option>66<option>99<option>CC<option selected>FF
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">Text Color</td>
</tr>
<tr>
<td>Red:
<select name="textred">
<option selected>00<option>33<option>66<option>99<option>CC<option>FF
</select>
</td>
<td>Green:
<select name="textgreen">
<option selected>00<option>33<option>66<option>99<option>CC<option>FF
</select>
</td>
<td>Blue:
<select name="textblue">
<option selected>00<option>33<option>66<option>99<option>CC<option>FF
</select>
</td>
</tr>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<INPUT TYPE=BUTTON VALUE="Reload" onClick="location.reload()">
</TD>
</TR>
</table>
</form>
</center>
</body>
</html>
Anyone help me to solve this here what I want to solve:
I cannot run the apply_color() function:
Run the apply_color() function whenver the user changes the selected item in any of the six list boxes on the webpage.
More, instead of using the button to reload the page, if I want the user click the Restore hypetext link in the paragraph at the top of the page verify it reload the page. How can I set a hypetext link to this!