File README for MasterTheftResister
#	-------	Begin: header information and copyright notice	-------
#
# MasterTheftResister Version 1.0
# August 9, 1999
# Author: William Bontrager
# Author's E-mail: william@willmaster.com
# Author's Website: http://www.willmaster.com/
#
# MasterTheftResister is designed to help resist theft of a graphic on a web page.
#
# It is designed to be executed with Perl 5; it won't work with versions prior to 5.
#
# COPYRIGHT NOTICE
# Copyright 1998, 1999 by William Bontrager. All rights reserved.
#
# MasterTheftResister may be used and modified free of charge by anyone so long as
# this header information and copyright notice remain intact. By using and/or
# modifying MasterTheftResister you agree to indemnify William Bontrager and his
# associates from any liability that might arise from its use and/or modification.
#
# Selling the code for MasterTheftResister without prior written consent from the
# copyright owner is expressly forbidden. You must have permission before
# redistributing MasterTheftResister. In all cases, this header information and
# copyright notice must remain intact and this README file must be readily 
# available.
#
#	-------	End: header information and copyright notice	-------
#
#===============================

MasterTheftResister is designed to be easily maintainable.

You need two files:
  		(1) This README file
		(2) The MasterTheftResister.cgi file

STEP-BY-STEP INSTRUCTIONS:

NOTE: If you believe you are missing files or what you have is corrupted, go to 
http://www.willmaster.com/MasterTheftResister and download the latest complete version.

First, ensure that Perl 5 is available on your system. If you don't know, 
your system administrator is the one to ask.

(1) Modify the MasterTheftResister.cgi program code:

  (A)The first line of the MasterTheftResister program code, all the way at the top, 
     must contain the location of Perl 5 on your system. The line begins with 
     "#!" (without the quotes) and ends with the location (no white space). 
     (Note: MasterTheftResister may not work with versions of Perl prior to 5.)

  (B)On the line which says:

$gifFile = '_______';

     replace the underscores between the single quote characters with the file 
     name of the graphic to display.


  (C)Below the line which says:

@validURLs = qw( # leave this line alone

     list every variation of valid, complete, and exact URL to every web page which will 
     call this script. Variations could be with and without the "www.", for example.
     List the URLs one URL per line (blank lines are allowed).

     Examples:

          http://www.willmaster.com/possibilities/demo/trfwpg.html
          http://willmaster.com/possibilities/demo/trfwpg.html

(3) Upload the MasterTheftResister.cgi and the graphic specified in (B), above, 
	into a directory/folder which is allowed to execute CGI programs. Be sure 
	to upload the script as an ASCII text file and the graphic as a binary file.

(4) Set the file permissions:
	CHMOD MasterTheftResister.cgi to 755.
	755 translates to "read/write/execute - read/execute - read/execute"
	If you don't have telnet access to your system, some FTP programs, 
	such as WS_FTP95 LE (possibly available at www.tucows.com), allow 
	changing file and directory permissions. (With WS_FTP95 LE, select 
	a file or directory; right-click; select "chmod UNIX"; check 
	owner/read, owner/write, owner/execute, group/read, group/execute, 
	other/read, and other/execute; and click "OK".)

(5) Place the graphic protection code on your HTML page and upload it:

Please see http://willmaster.com/possibilities/demo/trfwpg.html for a working 
demonstration of how the Master Web Graphic Theft Resister Kit works when installed.
You may also view the source code of the page to see how that one was done.

The resistance is by means of JavaScript which you code right into your page.

1. Above the "<body ..." tag are several JavaScript functions.

2. Below the "<body ..." tag is code to hide/display the graphic.

Optionally, you can also place JavaScript code with information for 
browsers without "mouseover" capability and/or HTML code with 
information for browsers without JavaScript capability.

Here is the HTML example code we will use (line numbers are for documentation only):

    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 1: <html>
 2: <head>
 3: <title>Master Web Graphic Theft Resister</title>
 4: 
 5: <script language="JavaScript">
 6: <!-- 
 7:  
 8: GraphicSequence = 3;
 9: 
10: browser = new Image();
11: if(browser) {
12: 	graphics = new MakeArray(3);
13: 	graphics[1].src = "transparent.gif";
14: 	graphics[2].src = "MasterTheftResister.cgi";
15: }
16: GraphicSequence = (GraphicSequence - 1); // Do not change this line.
17: 
18: function MakeArray(n) {
19: this.length = n;
20: for (var i = 1; i<=n; i++) {
21:      this[i] = new Image();
22:      }
23: return this;
24: }
25: 
26: function g_over() {
27: document.images[GraphicSequence].src = graphics[1].src;
28: }
29: 
30: function s_over() {
31: document.images[GraphicSequence].src = graphics[2].src;
32: }
33: // -->
34: </script>
35: 
36: </head>
37: <body>
38: <a name="placeholder"></a>
39: 
40: <script language="Javascript">
41: <!-- 
42: if(browser) {
43:      document.write('<A HREF="#placeholder" onmouseover="s_over(); return true">');
44:      document.write('<IMG SRC="transparent.gif" width="143" height="33" border="0">');
45:      document.write('</A><br>');
46:      document.write('<A HREF="#placeholder" onmouseover="s_over(); return true">');
47:      document.write('<IMG SRC="transparent.gif" width="33" height="71" border="0">');
48:      document.write('</A>');
49:      document.write('<A HREF="#placeholder" onmouseover="g_over(); return true">');
50:      document.write('<IMG SRC="MasterTheftResister.cgi" width="77" height="71" border="0" alt="crazy :)">');
51:      document.write('</A>');
52:      document.write('<A HREF="#placeholder" onmouseover="s_over(); return true">');
53:      document.write('<IMG SRC="transparent.gif" width="33" height="71" border="0">');
54:      document.write('</A><br>');
55:      document.write('<A HREF="#placeholder" onmouseover="s_over(); return true">');
56:      document.write('<IMG SRC="transparent.gif" width="143" height="33" border="0">');
57:      document.write('</A>');
58: }
59: else {
60:      document.write('Sorry, it seems your browser is unable to display the sample image.<p>Versions 4 of both Internet Explorer and Netscape are able to display the image (provided JavaScript is enabled).');
61: }
62: // -->
63: </script>
64: 
65: <noscript>
66: <p>Must have JavaScript enabled to view graphic.
67: </noscript>
68: 
69: </body>
70: </html>
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


	The lines above number 5 you are standard HTML tags. (You'll change the title to 
your own web page's title.)

	Line 5 is the HTML script tag. Some browsers recognize the tag and some don't. For 
those that do, the tag is required. For those that don't, it doesn't matter. So, use the tag.

	Line 6 is the beginning of an HTML comment area. All JavaScript code must be 
within HTML comment areas.

	Line 8 can be a tricky one. It specifies which graphic on your page is the image 
you are protecting. Just count the "<img ..." tags on your page from your "<body ..." 
tag to the image your are protecting.

	(Yes, count the transparent images. No, do not count any body "background" images.)

	Your count is your graphic sequence. Use that number on line 8. (If your count is 
off, you'll notice it when you try your page. Just adjust that number up or down until it 
works okay.

	Line 9 assigns a value to the variable "browser". The value is either true or false.
If your visitor's browser can handle the JavaScript version which includes mouseover 
capabilities, then the value is true. Otherwise, the value is false.

	Lines 10 through 15 are executed if the variable "browser" is true. Otherwise, they're 
ignored. This is where the browser places your transparent image and MasterTheftResister.cgi 
image into it's memory. It is these which are used to create the pop-up effect.

	Verify that the name of your transparent graphic is between the quotes near the end of
line 13.

	If MasterTheftResister.cgi is not in the same directory/folder as your HTML page, then 
you will need to include the server location information with the name on line 14. For example:
graphics[2].src = "../cgi-bin/MasterTheftResister.cgi";

	Line 16 adjusts the number you specified on line 8. (When writing the kit, I thought 
it would be easier to insert this line than to explain that the image count really begins at 
zero and that image four is really image three; and so forth.)

	Lines 18 through 24 make room in computer memory to hold the images specified in lines
13 and 14.

	Lines 26 through 28 is a function which places your transparent image over your 
protected image.

	Lines 30 through 32 is a function which places your protected image over your 
transparent image.

	Line 33 ends the HTML comment area for the above block of JavaScript. The line starts 
with two slash characters so the JavaScript itself will ignore the HTML code.

	Line 34 is the script end HTML tag.

	Line 36 ends the HTML head.

	Line 37 begins the HTML body.

	Line 38 is a target for the anchors used later on. In order to use mouseovers, the 
graphics must be within HTML anchor tags. Anchor tags usually have the href="..." code in 
them. Some browsers may be okay without the href="..." and others may balk. So we use the 
code. The href="..." must refer to something. This line 38 is what it refers to. When 
clicked, the page just jumps up to the top (where this target is located).

	Line 40 begins another script tag.

	Line 41 begins another HTML comment area within which some JavaScript resides.

	Line 42 tells the JavaScript interpreter to execute the following code only if 
the variable "browser" is true. (See Line 9.)

	If the variable browser is true, the interpreter executes lines 43 through 57.

	For maximum protection, the graphic you are protecting is bordered with transparent 
graphics. (The reason for this and other aspects of this method of graphics theft resistance 
is explained in WillMaster Possibilities ezine, issue #3, in the article, "Web Graphic Theft 
Resister". The ezine issue is linked from the WillMaster Possibilities archive page: 
http://www.willmaster.com/possibilities/archives/ )

This is the layout:
+-------------------+
|         C(1)      |
+-------------------+
+---++---------++---+
|   ||         ||   |
| C ||    V    || C |
|(2)||         ||(3)|
+---++---------++---+
+-------------------+
|         C(4)      |
+-------------------+
with the cloaking graphics marked "C" and the visible graphic marked "V".

	This example HTML uses 33 pixel transparent graphic borders around the visible graphic. 
This border can be changed. You would use a narrower border when you're in a situation where 
the visible graphic is in a tight fit among other graphics or text. I suggest that your border 
is no less than 5 pixels. Even then, your visitor might move their mouse move over the border 
too fast for their operating system to record the fact. You see, your visitor's operating 
system must recognize the mouse over the transparent graphic before it will display the visible 
graphic. If the mouse moves too fast then the graphic won't popup. This is why you want to use 
wider transparent graphic borders when you can.

	The left and right cloaking graphics should be the same height as the visible graphic.

	The width of top and bottom cloaking graphics should span the entire middle line.

	In our example, the protected (visible) graphic is 77 pixels wide and 71 pixels high. 
And it uses 33 pixel transparent graphic borders.

	Thus, the cloaking graphics (C)(1) and (C)(4) are 143 pixels wide (33 + 33 + 77 = 143) 
and 33 pixels high.

	And cloaking graphics (C)(2) and (C)(3) are 33 pixels wide and 71 pixels high.

	NOTE: These cloaking graphics can be the same one as you specified on line 13 or they 
can be different. Doesn't really matter except that your page will usually load faster with 
the number of individual graphics is less.

	Lines 43 through 45 place the top cloaking graphic. This is the (C)(1) position. Ensure 
the graphic's name is correct.

	Lines 46 through 48 place the cloaking graphic in position (C)(2). Ensure the graphic's 
name is correct.

	Lines 49 through 51 place your visible graphic. It disappears when the mouse travels 
over it, replaced by the graphic specified on line 13.

	Lines 52 through 54 place the cloaking graphic in position (C)(3). Ensure the graphic's 
name is correct.

	Lines 55 through 57 place the bottom cloaking graphic. This is the (C)(4) position. 
Ensure the graphic's name is correct.

	For all the above lines 43 through 57, ensure that the width and height of your graphics 
in the "<img ..." tag are specified correctly.

	Line 58 ends the effectiveness of line 42's stipulation.

	Line 59 through line 61 execute only if line 42's "browser" is false. Some browser can 
execute JavaScript yet no be able to execute mouseovers. In that case, lines 59 through 61 
will display. You may change line 60 to reflect your custom message.

	NOTE: Lines 59 through 61 are optional. If you do not want to display a message for those 
cases, simply delete those lines.

	Lines 64 through 67 execute when the browser can not do JavaScript at all. You may place 
your own custom message on line 66.

	NOTE: Lines 64 through 67 are optional. If you do not want to display a message for those 
cases, simply delete those lines.

	Lines 69 and 70 end your HTML page.

Okay, upload and have fun :)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	Thank you for using MasterTheftResister. And thank you in advance for 
	spreading the word of its availability.

	If you have any kudos, constructive criticism, or suggestions you wish 
	to share, feel free to write to me at william@willmaster.com with 
	"MasterTheftResister Comment" in the subject line.
	<mailto:william@willmaster.com?Subject=MasterTheftResister%20Comment>

	I do get quite a bit of mail, so please be patient. Eventually, I should 
	get back to you.

	When you have the time to enjoy a bit of leisure, please visit our business 
	website at http://www.willmaster.com/ and our other unique websites which 
	are linked from http://www.willmaster.com/connection/

	Sincerely,

	William Bontrager
	Programmer of Screaming Hot CGI -- see http://www.willmaster.com/hotcgi/
	Publisher of WillMaster Possibilities -- see http://www.willmaster.com/possibilities/

