Here's the problem... you spend hours on the perfect graphic for your site... and two days later some poopiehead swipes it! There has to be a way to fight back!
There is... don't put your stuff on the Internet.
Um Joe, got any better advice than that?
Well, yes and no. Yes there are things you can do and no they don't work as well as you might think.
The simplest and most popular defense is to disable right clicking. Try to right click on the cute little puppy at right. With most browsers you'll be blocked.
It's important to know that there are a few problems with the whole "no right click" defense... people can still look at the source of your page, find the URL of the image and grab it directly. Another way to get at your image would be to get a screen capture of your page. (For those not in the know, on most computers you can hit the Print Screen key and a screen capture is copied to your clipboard. From there, you can paste it into whatever you want.)
And know that blocking the right click works with most browsers... maybe even almost all browsers... but not all.
Ok Joe, I hear all that, but I want to do the right click thing anyway. Teach me how.
Fair enough. As long as you know the real scoop I'll hook ya up.
Take your average image tag...
<img src="mypic.gif" height="24" width="100">
Then add the following event handler...
<img src="mypic.gif" height="24" width="100" onContextMenu="return false;">
That basically tells the browser to NOT display a right-click context menu for that image. With this example there is no message box. You can leave it like that, or add a message...
If you want a message, add an alert before the return false...
<img src="mypic.gif" height="24" width="100" onContextMenu="alert('Hi Joe!');return false;">
In the message, note the single quotes...
If you want a single(') or double(") quote within your message... such as in the word don't, precede it with a slash like so...
<img src="mypic.gif" height="24" width="100" onContextMenu="alert('Hi Joe! Don\'t take my pic!');return false;">
If you want a line break, use \n...
<img src="mypic.gif" height="24" width="100" onContextMenu="alert('Hi Joe!\nDon\'t take my pic!');return false;">
You can do multiple line breaks if you wish...
<img src="mypic.gif" height="24" width="100" onContextMenu="alert('Hi Joe!\n\n\nDon\'t take my pic!');return false;">
It's also possible to do this for the entire page if you put the event handler in the body tag. That's probably not a real good idea though. Like most people, I often use the right mouse button to copy text from a page or open a link in a new window, and if the right click is blocked, it makes me just a little annoyed. So, bear that in mind.
Also bear in mind that if you do this with image links, your visitor won't be able to right click and open that link in a new window. Again, I do that all the time and I think right click blocking is a little annoying... especially when I know that I can get the flippin image anyway! Bear that in mind as well.
Are there any other ways to prevent people from swiping my images? One popular method of slowing people down is to visibly watermark your images. This can be done with your average graphics program and a little practice. See the watermark on this puppy pic -->
Another method is to digitally watermark the images. I'm not familiar with various digital watermarking methods, so if you want more info, you'll have to look it up. That said, it doesn't really prevent people from taking them.
If you find someone using your images, you could always pay a lawyer to send them a nasty letter and hope it rattles them into removing it.
Or, you can take the easy way out... don't worry about it too much. Use the right click block if you'd like... it's simple and slows down casual image theft.
One more thing... can I put a copyright© symbol in my message box?
Of course you can...
<img src="mypic.gif" height="24" width="100" onContextMenu="alert('This image copyright© Joe Barta');return false;">