L ike we stated on the previous page:
"I f you follow our tutorial, you will not have any trouble with this script. Do Not deviate from our instructions or it is quite possible you will get totally confused, frustrated and......"
T he first thing you need to do is upload to your editor* the below graphics. The script site makes no mention of this and if you copy and paste the code, you will be quite upset when it does not work and you get a whole bunch of little red X's . Also "Be Sure to save the images with the name that we designate on mouse-over( touch the image with your mouse ). Do not worry about the width and height, all this is already set within the code. This will save you a lot of agravation and reconfigurations if you do.
* Be sure to upload the graphics into the same** directory (top or main) as this script will be located. This will also save you a whole lot of reconfigurations. If by chance you upload the graphics into another directory, you will have to change the path in about 70 locations within the script.
|
Below there are five (5) images you need to upload. 1] →
If you would prefer to get all the 5 images in a zip file, select the below link |
2] →
3] →
4] →
5] →
** If you are unclear about what uploading to the same directory is, it is quite simple. You have all your web pages and a few images in (for example) your main or top directory. The path to your web pages and images would be something like:
Everything In Same ( Top or Main ) Directory
- http://www.mydomain.com
- http://www.mydomain.com/page1.html
- http://www.mydomain.com/page2.html
- http://www.mydomain.com/coloreditor.html
- http://www.mydomain.com/ColorEditor.html
- http://www.mydomain.com/cross.gif
- http://www.mydomain.com/cursor.gif
- http://www.mydomain.com/colors.jpg
- http://www.mydomain.com/blank.gif
- http://www.mydomain.com/arrow.gif
N otice how every page name or image comes directly after the .com with a /, with the exception of your root URL then the page or image name. For an example of the web page in the top or main directory and the images in another directory ( /images ), see below:
Everything In Different Directories
- http://www.mydomain.com
- http://www.mydomain.com/page1.html
- http://www.mydomain.com/page2.html
- http://www.mydomain.com/coloreditor.html
- http://www.mydomain.com/ColorEditor.html
- http://www.mydomain.com/images/cross.gif
- http://www.mydomain.com/images/blank.gif
- http://www.mydomain.com/images/cursor.gif
- http://www.mydomain.com/images/arrow.gif
- http://www.mydomain.com/images/colors.jpg
S o, in a nutshell what we are saying is to avoid many many reconfigurations, have both the HTML documents ( see below ) and the images in the "Same" (top or main) directory.
T
he next thing you need to do is go to the script site and when it opens, select the link for "See the code" and copy and paste it ( partial) anywhere in the <BODY>
section of the document you want this effect to appear.
[ Get Partial Code Here ]
T here is only one reconfiguration you need to do on this part of the code. The code has the URL address with just the page name of "ColorEditor.html". You need to elaborate and add the complete path to that page.
Default Code
<ilayer name="blah">
<form>
<table border=2 cellpadding=10><tr><td id="blah">
Color: <input type=text onChange="oldColor=this.value;setColor(this.value);">
<input type=button
onClick="window.open('ColorEditor.html','Color','height=350,
width=390,dependent=yes,directories=no,location=no,menubar=no,resizable=yes,
scrollbars=no,status=no,toolbar=no')"value="Edit !">
</t></tr></table></form></layer>
Reconfigured Code
<ilayer name="blah">
<form>
<table border=2 cellpadding=10><tr><td id="blah">
Color: <input type=text onChange="oldColor=this.value;setColor(this.value);">
<input type=button
onClick="window.open('http://www.yourdomain.com/ColorEditor.html','Color','height=350,width=390,dependent=yes,
directories=no,location=no,menubar=no,resizable=yes,
scrollbars=no,status=no,toolbar=no')"value="Edit !">
</t></tr></table></form></layer>
No Other Reconfigurations In This Part!
A fter you get this done, Do Not try the "Color Editor" because it Will Not Work!
T
his next part you need to pay particular attention. This is the part that you need to build a blank HTML document and be sure to name it:
ColorEditor.html
Remember!
Everything goes in the same directory
N otice the capitalization of the C and the E. Be sure you name this document just like that with those two letters capitalized.
O
nce you have built this blank HTML document named:
http://www.yourdomain.com/ColorEditor.html
you need to add the below code (and nothing else) into this page. It is a complete HTML document. This is the code for the page that pops-up when you select the
"Edit" button from the page you pasted the partial code from the script site.
O ne last point you should be made aware of. In the above code, before the opening <html> tag there is some text in between the two <!-- -->. This is just some notes from the author ( Sebastian Weber ). He is basically just telling you howto this script works. You should not need to make any reconfigurations because of these statements.
O n the above script you will copy and paste as a complete HTML document, first off like we have said a few times already, be sure both HTML documents and the uploaded images are all in your main or top directory. This will save you the reconfiguring of about 70 or so image paths.
O n the above code, we will show you where you need to reconfigure the image paths if you have the images uploaded to a different directory other than your main or top directory.
<HEAD> Section Image Path Reconfigurations
This is the only reconfiguration done in the <HEAD> section. It is right at the start of the <HEAD> section.
precol=pcoc.split(",",16);
// Predefined Colors Cursor
cursorImg=new Image ();
cursorImg.src="cursor.gif";
blankImg=new Image ();
blankImg.src="blank.gif";
N otice how the image is defined. It is telling the computer that the image(s) are in the main or top directory. If you have them uploaded to another directory, images/ for example, you would have to change the path as follows:
precol=pcoc.split(",",16);
// Predefined Colors Cursor
cursorImg=new Image ();
cursorImg.src="images/cursor.gif";
blankImg=new Image ();
blankImg.src="images/blank.gif";
<BODY> Section Image Path Reconfigurations
B elow you will have the same type of image reconfigurations about 68 more times if your images are are not in the top or main directory. You will notice in the code there are different sections. We have listed the sections that there are image path reconfigurations if needed. You will have to study the code for all the images. They will look something like the below default image paths:
- img src="blank.gif"
- <img src="cross.gif"
- <img src="colors.jpg"
- <img src="cursor.gif"
- <img src="arrow.gif"
T he above default image paths will be in the following sections of the code.
<!-- ************** COLORS PICTURE ******************** -->
<!-- ******************* SLIDER ************************ -->
<!-- ************** BASIC COLORS PALETTE ******************** -->
<!-- ************** Custom Colors ******************** -->
<!-- ************** Display Old Color ******************** -->
<!-- ************** Display New Color ******************** -->
I f you are reconfiguring in these sections and you possibly miss an image path, when you view the pop up window, it will be very evident you missed one. There will be a blank space where the path has not been changed.
T he little "Instructions" form button just below the"Edit" button on the previous page is not part of the code. If you would like to add it, just copy the below code and paste it after the closing </script> tag. This is the part of the code (partial) you get from the script site, not the code you get in the above textarea form box. See below example:
document.getElementById("blah").bgColor=document.forms[0].elements
[0].value=a;
oldColor=a;
}
setColor("FFFFFF");
</script><!------ Start Instructional Alert Button ------>
<FORM>
<input type="button" onClick="alert('Select The \'Edit\' button and a pop up window will appear. Then you can select your colors from the chart. Once you select your color, select \'Apply\' and the color will transition to the original page with the HEX code on it. Then Select \'OK\' and the little pop-up will close. Select \'Cancel\' and the little window will close.')" Value="Instructions">
</FORM><!------ End Instructional Alert Button ------>
O nce you have all this put together, and you did not deviate from our prior instructions, the "Color Editor" should be good to go.
I f you have any problems with this, feel free to contact us.