Article
About the Author
Dr. Design
Dr Design answers design and development questions for SitePoint readers. Drop him a line today!
Dr Design - Media Player, Validators and More!
Hey guys! Welcome to my regular spot. I'll be here in the first week of each month to answer your questions. So get writing to me at drdesign@sitepoint.com!
Protect What's Yours
Hey Doc! I run a photography site, and I've included a lot of my own shots on the site. How can I stop users from taking these photos from my pages? -- Phillipe
Phillipe, this is probably one of the questions I get asked most often. Authors feel that since they created their pictures they should have the ability to protect others from steeling them, and rightfully so. I wish I could tell you there was a foolproof way to protect your images. Here are some of the normal suggestions and their advantages and pitfalls though:
No Right-Click Script: This little bit of JavaScript will present a little warning which says something to the effect of "Hey, Don't Steal!" when users use the right click button, which is a fairly standard way of saving individual images. The downfall to this is that many people use the right-click for good things such as opening links in new window, getting more information on a web page, etc.
Beyond that though, it has been deemed as "unprofessional" and many Web surfers will wonder what you have to hide, or what you think is so special and may often leave before they're done, out of sheer annoyance. Even if you could protect your images with some kind of no right-click script, the reality is that all Web browsers save a copy of your images to the user's machine for future use, so a savvy user could easily go into their Cache and view your images anyways!
Watermark: Perhaps the best solution, placing a simple watermark into your photos will mean that should people steal them they will either have to crop out your watermark or ignore it, in which case you do get credit. The real drawback with a watermark is that the more you want to protect your image, the less usable your picture becomes. Sure placing a watermark diagonally across your image means nobody can steal it but then the question becomes: will anyone even look at your site?
Embed it in Flash or Java: Many Web authors try and get around using actual images in their sites by putting the images inside a Flash Movie or a Java Applet. Though this means users can't directly save the images to their machines, they can still do a Screen Capture with the PrintScreen button on most modern keyboards.
Though this probably hasn't brought you much optimism, one of the keys to being part of the online community is the ability to share and grow. Why do you want to have a Website with your pictures on it? Probably because you saw someone else's and admired their work. I would encourage you to look at many of the famous photographers that have sites on the Net -- you'll find that few use any kind of protection mechanism as Web photos are of such poor quality for printing that it's unlikely anyone will ever use them outside the Internet. You could of course leverage this tendency: provide small and medium previews of your images, and sell larger prints from your Website!
Hope this helps, Phillipe. For more detail on disabling right click and protecting images or code, be sure to look out for Rosie Wise's article on this very topic -- it'll appear on SitePoint in the coming week!
Timed Popups
Dr. Design, I want to include a pop-up on my site (to increase available space for my advertisers). I want the popup to appear when users access my homepage, but then I want it to disappear again after ten seconds. I'd also like to show a timer on the popup itself that says 'closing in...' and tells the user how many seconds are left until the popup disappears. How is this done? -- James
No problem James! First off, let's take our "Window Opener" code from one of the previous articles (From PopUnders to Rollovers):
<html>
<head>
<script language="JavaScript">
<!-- hide from JavaScript-challenged browsers
function openWindow(url, name) {
popupWin = window.open(url, name, 'width=400,
height=600,left=100,top=100')
}
// done hiding -->
</script>
</head>
<body onLoad="openWindow('myAnnouncer.html','Announce');">
</body>
</html>
This will open up a small window with our myAnnouncer.html file in it. Our myAnnouncer.html file will look something like this:
<html>
<head>
</head>
<body>
<div id="Clock" align="Center"> </div>
<script>
now=10
function tick()
{
timeString=now;
Clock.innerHTML = "Window will close in: " + timeString;
now=now-1;
if(now==0)
{
window.close();
}
window.setTimeout("tick();", 1000);
}
window.onload = tick;
</script>
Put your text here
</body>
</html>