GoStats stats counter
<body onload="defaults()">
The defaults JavaScript function looks like this
<script language="JavaScript">
// *** Set the colour and image defaults ***
function defaults(){
if (imgnum==0) {document.body.style.backgroundImage = "url(trnsprnt.gif)"};
if (BGclr=="") {document.bgColor="#COCOCO"};
}
</script>
What I'd like to do is allow the user to change the text colour, heading text colour, emphasized text (for quotes and code), link colours (active and visited), menu text colour and menu background colour. I'd also like the visitor not to be able to select something like black on black.
I'll try a table first. The background colours can be added programmatically or literally, I'll try literally first
The cells all have a HTML coding of <td width="4%" bgcolor="#CCFFFF" onclick="ChngClr('CCFFFF')"> </td>
The function ChngClr is
<script language="JavaScript">
function ChngClr(clrnum){
document.body.style.backgroundImage = "url(trnsprnt.gif)";
document.bgColor=clrnum;
}
</script>
Notice that the transparent background GIF must be applied for the background colours to work.
This is fine except that every cell must be coded differently. There is some pattern to the codes so it shouldn't be too difficult to create a table, fill the cells and create the onclick link function.
There are a couple of other ways to display these colours. I could use an image map but I don't fancy having to type in all the coordinates. Another way is to use a slider control.
The radio buttons below lets the user decide which particular element is changed. When a colour is clicked on the javascript funtion checks which of the radio buttons is checked.
The function ChngClr now becomes
<script language="JavaScript">
// *** depending on which radio button is checked, change the colour of that element ***
function ChngClr(clrnum){
if (document.clrchk.clrelement[0].checked==true) {
document.body.style.backgroundImage = "url(trnsprnt.gif)";
document.bgColor=clrnum};
if (document.clrchk.clrelement[1].checked==true) {document.fgColor=clrnum};
}
</script>
Now to this programmatically. The JavaScript function creates a table and fills each cell with a colour and makes each of them clickable.
<script language="JavaScript">
// *** Draw a colour table ***
function JSclrtable(){
// Create array to hold the colour hex values
var hexclr = new Array ("00", "33", "66", "99", "CC", "FF");
document.write("<div align='center'>");
document.write("<center>");
document.write("<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse' bordercolor='#111111' width='50%' id='AutoNumber4'>");
document.write('<tr>');
for (red=0; red<=5; red++){
document.write('</TR>');
document.write('<tr>');
for (grn=0; grn<=5; grn++){
for (blu=0; blu<=5; blu++){
document.write('<TD BGCOLOR="#' + hexclr[red] + hexclr[grn] + hexclr[blu] + '"');
document.write('onclick="ChngClr(\'' + hexclr[red] + hexclr[grn] + hexclr[blu] + '\')"> </td>');
}
}
}
document.write('</tr>');
document.write("</table>");
document.write("</center>");
document.write("</div>");
document.write("<div align='center'>");
document.write("<center>");
document.write("<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse' bordercolor='#111111' width='50%' id='AutoNumber4'>");
document.write('<tr>');
for (count=0; count<=5; count++){
document.write('<TD BGCOLOR="#' + hexclr[count] + hexclr[count] + hexclr[count] + '"');
document.write('onclick="ChngClr(\'' + hexclr[count] + hexclr[count] + hexclr[count] + '\')"> </td>');
}
document.write('</tr>');
document.write("</table>");
document.write("</center>");
document.write("</div>");
}
The page originally had a table cell to show the changing colours from the above buttons. Unfortunately neither Mozilla nor Netscape like manipulating the background colours of these from Javascript. The table was replaced with a button which can change colour in all browsers.
Suppose the user wants to use a particular colour. I'll give them the opportunity to type in the hex for that number and validate it. This can be done by using the onclick event of a submit button. The JavaScript will take each digit in turn and check that it between 0 and F inclusive and 6 characters long, the maxlength property in the form is set so that only 6 characters can be entered anyway.
The validation code is
<script language="JavaScript">
// *** check the input hex colour value ***
function valhex(){
var validchars="1234567890ABCDEF";
var userclr=document.gethex.usernum.value;
var txtlen = userclr.length;
var usrerr=0
if (txtlen != 6) {usrerr = 1;}
for (count = 0; count<=6; count++){
var digit = userclr.charAt(count).toUpperCase();
if (validchars.indexOf(digit) == -1){usrerr=1;}
}
if (usrerr !=0) {
alert("The value you entered is not correct");
document.gethex.usernum.focus();}
else {ChngClr(userclr);}
}
</script>
Using if (document.clrchk.clrelement[3].checked==true) {document.getElementById("Emph").style.color=clrnum;} and then in the body using <H4 ID="Emph"> then only the first instance is found and changed.
If you've any suggestions, help, advice, bits of code, whatever please email me at brisray@yahoo.co.uk
Images - the page where the best of the image selection code ends up
Test Page - where most of the testing is done
Colours - Page 2 - page for testing CSS and other groupings
Other Websites
Webtek Systems - what my site (or anybody else's) must NOT look like
This page created 2nd December 2003, last updated 31st December 2003