Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryWeb Content Preparation

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Prevent Content Copying

A fairly effective way to discourage content copying is to place a transparent image over the top of the content.

The content can not be selected by dragging the mouse over the text. Thus, no selection is available to copy.

Please understand that all web page copy protection schemes have their failings. A screenshot image and retyping what appears on the screen are two of the failings of every web page content protection method I am aware of.

The method presented in this article will not discourage someone from selecting surrounding content that includes the content being protected. The source code may also be viewed. (Further protection can be non-caching instructions to browsers and/or obfuscating the content in the source code, but those actions are outside the scope of this article.)

This copy protection method covers up links so they can't be clicked. Thus, content with links that must be clickable can not be protected in this way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis eleifend tristique. Maecenas sodales, ipsum non pulvinar fringilla, nisi dolor semper nulla, in fringilla.

For specific content areas without links, this method does provide some protection from copying.

On the right is an example. The text can not be selected for copying without also selecting surrounding content.

The copy-protected content is in a div containing CSS style position:relative; and the img tag for the transparent image, in the same div following the content, has CSS style position:absolute; top:0; left:0;

Here is the format for the copy protection:

<div style="position:relative;" 
            width:130px; 
            height:140px; 
            padding:5px;">
Content to be protected.
<img style="position:absolute; top:0; left:0;" 
            width="140" 
            height="150" 
            src="transparent_image.gif">
</div>

The div with the content needs to have a width and height specified so the image can be sized accordingly. Other elements may be added to the style, like a border and font or background colors.

The width and height of the image is specified to be the width and height of the div plus the amount of padding doubled in order to cover all of the div in gecko browsers like Firefox. In the above format, the width is 200 pixels and the padding is 5 pixels. Thus, the image width is 210 pixels.

Here is the complete code for the earlier example.

<div style="position:relative; 
            width:130px; 
            height:140px; 
            padding:5px; 
            border:1px solid black;
            overflow:hidden;
            font-family:sans-serif;
            font-size:14px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis
eleifend tristique. Maecenas sodales, ipsum non pulvinar fringilla, nisi
dolor semper nulla, in fringilla.
<img style="position:absolute; top:0; left:0;" 
            border="0" 
            width="140" 
            height="150" 
            src="//www.willmaster.com/4proofing/GlassImage.gif">
</div>

Placing a transparent image over the top of content is one way to discourage copying.

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC