Untitled Document

The method consists of just a few steps, but are explained in great detail below.

1. Where-ever there is an image, note the exact width and height in pixels, and wherever you want the image to appear, insert a single-cell table with those exact dimensions. Make certain that the table parameters are "border=0" "cell spacing=0" and "cell padding=0".

2. Next, choose your image as the background for that cell. This way, the choosing "COPY THIS IMAGE" "SAVE THIS IMAGE" "DOWNLOAD IMAGE TO DISK" "OPEN IMAGE IN NEW WINDOW" functions will not appear, as the image is not seen as an image, but as a background, and there is no repeating of the image because the table is exactly the same size as the image. This is beneficial not only for appropriate viewing, but also for step 5 of the plan.

3. Create a "sp.gif" file that is 1 pixel by 1 pixel, and is transparent. Then place this image within the single cell. Once placed, change the dimensions of this graphic to be two pixels smaller on the width and height of the image/table cell.

The 1x1 size makes it load as fast as possible, and changing the dimensions merely stretches an invisible graphic so it does not matter that a 1x1 graphic is filling a much larger space. The purpose of this graphic is so that when a visitor places their mouse over the image and clicks, something happens, as opposed to if you did not have the graphic, you could not interact with the image at all. This graphic allows for the following two actions, which are warning actions.

4. When the image is clicked on, the following message comes up. This message is a courteous one, making the assumption that someone is NOT trying to download the image but rather reacting to the mouse/pointer changing to indicate there is something to click on. Following is the message that appears:

" Thank you for your interest in John Harrington Photography. If you have clicked on this image looking for another link, this informational splash-page is the only link from this image. If you have clicked on this image looking to download this image, please click here."

(The url for this page is "www.johnharrington.com/shared/imagenotice.htm". ) Please feel free to key the URL into your web browser and have a look at the source code. Note- When viewed in your browser the navigation bar and the buttons will appear as the window was not opened by the javascript below.

The HTML and javascript commands below are used on each image, and on each page.

The javascript below should appear in the space just above the </HEAD> line on the top of each page where an image needs to be protected.

<!--

function MM_openBrWindow(theURL,winName,features)

{

//v2.0 window.open(theURL,winName,features);

}

//-->

</script>

Here is exactly what the javascript function is doing:


<script language="JavaScript">	This line tells the browser that it is about to start something that is Javascript

<!--	This line is an indiciation to the browser that if javascript is not enabled, to not follow the instructions enclosed between the opening "<" and the closing ">". The exclamation point immediately following the "<" is how the browser determines that.

function	This tells the browser that a FUNCTION is about to be defined. Defining a function once means that you don't have to define it each and every time you want to use it. The concept is similar to telling your assistant you want a "3 to 1" lighting ratio, with F11 as the main light at 45 degrees. You and your assistant have already determined where the lights should be placed, and the other f-stop falls at F8 because you have told him/her previously what it should be.

MM_openBrWindow	This is simply the name of the function, it could be anything. MM means it was created in MacroMedia, and OpenBrWindow just lets you know which function it is.

(theURL,winName,features)	These are the variables that will be needed when the function is referred to later. Each has a name, which could be anything. For ease of use, they were defined as what they are. The most important name is the FEATURES name. By defining the width (464) and heighth (464) of the new window opening (when the function is referred to later in the html page, you only get the web page screen and not any standard buttons or other distractions. 464 was chosen for the width because that is the width of my logo, and I decided I wanted it a square window so I made the height the same.

{	This tells the browser that the beginning of the function starts after this character.

//v2.0	This tells the browser which version of Java is being used

window.open(theURL,winName,features);	WINDOW.OPEN is a command to the browser to open a new window. The variables are passed to the browser here so it knows exactly what to open and display.

}	This tells the browser that the function is now completely defined

//-->	This is the closing indicator to the browser to ignore everything between the first "<!--" and this "//-->" so an error does not appear if you don't have javascript enabled.

</script>	This means that the javascript is over.

Next is the command used around the image itself. It's treated by the web browser af it was a link which linked to any other URL or html page.

<TR>

<TD>

</a>

</TD>

</TR>

</TABLE>

Here's exactly what it is doing:


<table width="485" border="1" cellspacing="0" cellpadding="0" height="331" bordercolor="#FFFFFF" background="protectme.jpg">	This line defines the table and it's attributes. Note that the height is exactly the same size as the actual image as is the width. The key is that the image is the background of the table.

<TR>	This line tells the browser that this is the first line of the first row TR stands for "TABLE ROW"

<TD>	This tells the browser that the first cell in the table is about to begin.

<a href="#"	This is where the URL for another page would appear. The "#" simply is a null, and will link nowhere. However, having this allows for the functionality that lets you open the window with the warning.

onMouseDown="MM_openBrWindow	This is where the function is referenced. The browser recognizes the command "onMouseDown" which means that when the mouse button is depressed, do the following action after the "=" sign. In this case, it calls into action the function defined at the top of the html page.

('imagenotice.htm','ImageNotice','width=464,height=464')	Here is where the variables are passed to the function. "imagenotice.htm" is the variable "theURL" "ImageNotice" is the variable "winName" and "width=464,height=464" is passed to the function to set the features of the window. By setting ONLY the width and height, all other features, such as the navigation bar (where you would key in a web site address) and the button bar (with the back, forward, home, refresh buttons) are turned off.

<img src="sp.gif" width="483" height="329" border="0" align="middle">	This is where the spacer GIF is loaded. Here, it is loaded into the one cell in the table. It's two pixels smaller than the actual image, because I chose to set a border of "1" on the table. IF you choose not to have that border, then set the width and height on the sp.gif file to be exactly the same as the table size.

</a>	This ends the link command.

</TD>	This ends the cell.

</TR>	This ends the row.

</table>	This ends the table.

4 - Upon clicking on the image, the "nice" splash screen below loads:

Thank you for your interest in John Harrington Photography.

If you have clicked on this image looking for another link, this informational splash-page is the only link from this image.

If you have clicked on this image looking to download this image, please click here.

This page merely tells people there is nothing further to see, but there is a hook which catches people who ARE trying to download the image. If someone clicks on the link "If you have clicked on this image looking to download this image please click here." Eventually this link that people will click will activate a java applet called "Devious Visitor Monitor" which will extract the visitors e-mail and last 6 sites visited from the visitors browser. Or, it may prompt them for their e-mail address which will automatically send them an e-mail warning about copyright violation. Your level of nastiness may vary. However, at present, clicking on this "download" link loads another small splash page, which reads:

"You've indicated that you have clicked on this image looking to download this image. Please review the copyright information at the bottom of each page. Use of any image outside of viewing on this website without written permission is a violation of copyright.

Therefore, while viewing images on our website, we have temporarily modified the "COPY THIS IMAGE", "SAVE THIS IMAGE", "DOWNLOAD IMAGE TO DISK", and "OPEN IMAGE IN NEW WINDOW" functions. If you download the image outside of this website, it will not be visable.

------------------------------------------------------------------------

For information on the fees for using images in your brochures, publications, or advertising, click here. For information on our website policy regarding copyright, click here. For information on US Copyright law and why you cannot just use these images without permission, click here."

The URL for the first "nice" page is:

www.johnharrington.com/shared/imagenotice1.htm

The URL for the second "warning" page is:

www.johnharrington.com/shared/imagenotice2.htm

This page is educational and nice, and links to pricing pages, our policy, and the copyright office. There is a bit of a fudge in the "modified...functions" as the functions are not actually available when there is no image to download, and if someone somehow gets the "image" downloaded what they will actually have downloaded will be the sp.gif file so it will be an invisible file.

Step 5

This has not been implemented by me yet.

The photo above needs to be protected. I've had people steal it before, and called to offer only photo credit, then when I tell them I need to bill them for usage, they refuse to pay, and use it. No way to trace them.

One of the problems I have is the distracting "© John Harrington" text when it's placed in the image area. It's distracting, and begins to look paranoid.

One of the benefits of putting an image in the background of a table is that if the table is not big enough to display the image, it will display whatever it can. So, if the image size is 200 x 300, and the table is 200 x 300, the image will fit. But, suppose you now increase the size of the image by 60 pixels on the right? You've now got extra space to place copyright notice information, which will ONLY be visible if someone maliciously extracts the image from the table cell background. This means someone has to actually cut off the copyright notice which is a malicious violation of copyright.

The photo has copyright text posted on the right side. This too looks paranoid. However, hiding the text on the right "under" a table means that someone will ONLY see the text IF they view the image outside of the table, and if they are viewing the image outside of the table, they are viewing it off your website, and therefore violating your copyright. See how it looks below.

The photo with the protection text on the right has a dimension of 360 x 197 pixels. The picture without the protection text is 300 x 197, that is, 60 pixels smaller. So, by setting the size of this table to be exactly 300 pixels wide, (as this table is) you cannot see the text.

Here, I've left the image protection off so you can not see the copyright protection text, and, infact, when you place the mouse over it and right-mouse-click (on a PC) or click-and-hold (on Mac's) you can't drag it to the desktop.

The photo now has image protection added.

So there you have it. Steps 1~4 make it easy. Step 5 will take time to reformat images. I have implemented steps 1~4 on all my images except the magazine covers and images in the PR section of my website, so you can check out just how it works there.