Background
What I'd like to happen to is provide about 100 of these thumbnails. The user clicks on one and the background changes to that image. These images may have to be placed on a new page.
Click on any of the above to change the background
The code to do this is
For the "no image" I've created a transparent GIF.
Is there a shortcut to not have to use two lines of code for each image?
Yes there is, stocznia wrote, use ...
<img src="tile030.jpg" width=130 height=130 onClick="document.body.background='tile030.jpg';">
I tried using this on the second "wood" image above. Unfortunately the code changes the background once only. To test this, click on the second "wood" image. Click on one of the others, click on the second "wood" image again. The background doesn't change back, it does if you click on the first "wood" image.
Is there a way to get rid of the background image without using a transparency?
Can the visitor choose their own image from one on their computer?
An easier way to display the images may be to put them in a JavaScript array. It would be even easier if the images were numbered consecutively (I just used a bunch of images from my computer) as then a simple loop would make up the filenames and add them to the array. The images below are displayed by an array. The script will NOT work in IE v6 or Opera v7.11 but it DOES in Netscape v7.1 and Mozilla v1.4. This isn't quite what I hoped for. Anyone know a cross-browser script that will work? The function that seems to be giving problems is
<script language="JavaScript">
// works in Netscape v7.1 and Mozilla 1.4 NOT IE v6 or Opera v7.11
function ChngBGImg(imgnum){
document.body.background=bgimgarray[imgnum];
}
</script>
However, by changing the line to document.body.style.backgroundImage = "url(\"" + bgimgarray[imgnum] + "\")"; it now works in all the browsers.
The images below above and below have been added programmatically, clicking on any of them makes that particular image the background. As I want to use some of these images for the site, I've added all the ones below to a directory called "common". There is one problem with having this many images and that is they have to be downloaded to the client computer. These 100 images take up around 480Kb - which means there are too many for the average user on a dial-up connection.
It would be far easier if I provided around a dozen background images and find a way for the user to be able to pick a background image from their own machine.
I know that this isn't going to work for everyone but one method may be to ask people to create a place on their computer and let them keep the background image they want to use in that. For example, keep brisray.jpg (a file they want to use as a background) in a folder named webimages on their C: drive.
Although I can get the local image to display from my computer, even when the page is uploaded to the web, I cannot get that image to become a background image. I can get a local image to become background by changing the <BODY> tag to something like <body background="file:///D:/images/backgrounds/brisray.gif">
BillyRayPreachersSon (Dan) on the Tek-Tips forums sent me an excellent piece of code to enable visitors to use their own images as a background. Oddly enough the code, on this page does not work in IE or Opera, but does in Netscape and Mozilla. However when placed on a page on its own CLICK HERE it works on all browsers. I've obviously got too much on this page and will have to investigate why it isn't working.
The JavaScript function to do this is
<SCRIPT LANGUAGE="JavaScript">
function useChosenBG()
{
var bgFilename = document.getElementById('bgFilename').value;
if (bgFilename != '')
{
bgFilename = 'file:///' + escape(bgFilename.split('\\').join('/'));
bgFilename = bgFilename.split('%3A').join(':');
document.body.style.backgroundImage = 'url(' + bgFilename + ')';
}
}
adam0101 also of the Tek-Tips forums suggested this
The code is simply <input type="file" onchange="document.body.style.backgroundImage='url(\''+this.value+'\')'">
On this page it works in IE but not Mozilla, Netscape or Opera. It also only works in IE when the code is placed on a page on its own.
Because variables are going to be set and reset we need some defaults to start with. When the page is loaded we need to call the default script colours in the body tag. The body tag now looks like this <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 happen is to choose a colour from the 216 web safe colour palette, or even input the hex code of their own choosing. Perhaps using something similar to the FrontPage colour picker, a table or a drop down list?
The FrontPage colour picker
BLUE
RED
GREEN
LIGHT GREY
For a demonstration click on the named colours above. The code to do this is <p
align="center"><b><font color="#C0C0C0" size="4">
<Span style onClick="document.body.style.backgroundColor='#C0C0C0';">LIGHT
GREY</span></font></b></p>
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. Other ways are to use a slider control or drop down list.
There are 143 named colours - see http://www.devguru.com/Technologies/html/quickref/color_chart.html ; http://www.w3schools.com/html/html_colornames.asp ; http://www.bigbaer.com/reference/colors/named_colors.htm The site at http://www.w3.org/TR/REC-html40/types.html#h-6.5 recommend 16.
Using a combination of these colours a drop down list box can be made
Of course, the drop down tale can be produced programmatically using the same technique that is used to draw the colour table.
Neither drop-down box works properly in Opera, but they do in IE, Mozilla and Netscape. In Opera, the colours do not display. Neither does the background change when a colour is chosen.
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>");
}
|
|
I've noticed some odd behaviour with the left and right buttons on the above form. The up / down values are controlled by a timer. This starts using the onmousedown function. The timer is stopped using a onmouseup function. If the user holds the mousebutton down then moves the cursor from the button then the onmouseup function is never triggered and can't be regained.
The code is ...
<input type="button" name="redlow" onmousedown="settimer('red','low')" onmouseup="clearInterval(clrtimer);" value=" < " style="background-color:#FF0000">
I've tried changing the onmousedown to onblur and onkeyup but neither work. I solved it my adding a onmouseout function. The code now looks like this ...
<input type="button" name="redlow" onmousedown="settimer('red','low')" onmouseout="clearInterval(clrtimer);" onmouseup="clearInterval(clrtimer);" value=" < " style="background-color:#FF0000">
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.
One of the problems I've got is that I use a unique ID in the tags such as Hd1, Hd2 and so on and then use getElementById the only problem using this method is that the IDs must be unique and if the ID doesn't exist the JavaScript gives an error message. This means that the IDs must be counted by hand and JavaScript amended for each page. As far as I can tell there isn't a way to group tags by ID in a way that will work for this.
FONTS
I'd like the visitor to be able to choose a font type and size from a list or table, or be able to use a font from their own computer.
There isn't a way to collect information about the fonts installed on a user's computer. There is but it only works for Windows based machines - see http://www.gemal.dk/browserspy/fonts.html So probably the best thing to do is to provide a short list of fonts for the user to choose from. I'll also include instructions on how to change the default page colour and fonts using the browser options. The font size should be easier to do, just a drop-down list of point sizes from 8 to 14 or 16. The font tag is depreciated in HTML 4.01 but this is the only way I can see of doing this.
There are other things to think about. Do I give the user the choice to use things like bold, italics or underline styles for the fonts, especially for the headings? Do I make the headings and subheadings 1 or 2 point sizes larger than the main text or do I give the user the opportunity to use what font sizes and styles they like for each individual page element?
MENUS
I'd like the visitor to be able to choose a variety of menus.
In general the code used
MUST
- be cross browser compatible i.e. work on at least IE v6, Mozilla v1.4, Navigator v7.1 and Opera v7.11
- once selected be persistent across the site - i.e. all pages must stick to the chosen options
- unload when people leave the site. The options must not affect other sites
- be selectable for either this viewing session or persistent between visits to the sites (use cookies?)
- be platform independent i.e. be viewable on PCs, Macs, Linux or Unix based machines. This probably rules out VBScript
MUST NOT
- affect sites visited after this one
- use server side scripting (PERL, PHP, ASP or any CGI) It can use JavaScript, CSS, HTML, DHTML, XML and cookies. I think that maybe variables can also be passed using URLs. This site is carried by around 8 different hosts, not all of which allow server side scripting
- allow "black on black" colour schemes - the text will fade into the background
- use frames, iframes may be OK. Frames cause too much hassle for most browsers
IF POSSIBLE
- let the user choose background images and fonts from their own system
- email me with the settings that people are saving as persistent. This is because I am nosey. Actually it's so I can try and gauge what's popular and what's not.
You can view other pages in this work in progress by going to the test directory and looking at the files userxxx.htm and dropxxx.htm
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
Other Websites
These websites offer some ideas on what can be done
A-Ha 2000 - an implantation of DHTML Central's menu system
BrotherCake - a nice menu system
DHTML Central - a very nice menu system
Imagitek Network Graphic Design - Colour picker
FrogStar - a nice menu system
Milton Keynes Wargame Society - customization
Navy Region Hawaii - a nice menu system
Pandemonium - font changer
Rocketman - a nice menu system
Twisty - customization
W3C - standards for HTML and CSS
Webtek Systems - what my site (or anybody else's) must NOT look like
This page created 2nd December 2003, last updated 26th January 2004
