CSS Image gallery without an option to right click and save as

**matotien** · 02-24-2011, 08:43 AM

I'd like to create an image gallery but i don't want people downloading the image by doing "right-click > save image"
so without using javascript, could someone create a page for me with an image and just using css, make it such that ppl can't download the image?
the final html should work on all browsers - IE, FF, Chrome, Safari

**djr33** · 02-24-2011, 02:12 PM

That's impossible. First, you cannot change browser functionality reliably (across all browsers), and you must use Javascript to even attempt it. There are many discussions about this if you'd like to read more, but there really is no way to make this work well.

You can try it, but what you will really do is make it harder for the regular users and not harder for those who want to steal your images.

By viewing an image, you download an image. You just need to know where to look (or view the source code for the page and save it again).

The only way you could attempt to block this without Javascript would be by placing a transparent-background block element on top of your slideshow so that right clicking activates a menu for that element instead. Possible, but people who understand HTML could still get around it and that would probably interfere with regular users accessing your content.

**matotien** · 03-01-2011, 06:46 AM

Thanks Daniel,
I guess you are talking about the css watermark effect whereby you simply overlaying a transparent 1×1 pixel stretched to fit the size of the protected image. When a user tries to right click and save the image, they are only able to get the blank image that is layered on top. But when you right click the image it still gives you the save as command. I am interested to know if there is a way the right click>>save as command can be disabled without the use of javascript. Yes the user may get around other ways.

Look at the example below. When you click at the image it still gives you the save as option. Is there a way?

http://www.sohtanaka.com/web-design/...es/water-mark/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Watermark Effect</title>
<style type="text/css">
body {
	margin: 0 auto;
	text-align: center;
	padding: 0 0 50px;
	font: 12px Arial, Helvetica, sans-serif normal;
}
.watermark {
	background: #000 url(watermark.jpg);
	width: 500px;
	height: 341px;
	margin: 0 auto;
	display: block;
	position: relative;
}
.watermark img.blank {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left:0;
	top: 0;
	z-index: 1;
}
.watermark img{
	-moz-opacity:.90;
	filter:alpha(opacity=90);
	opacity:.90;
}

/*--Method 2--*/
.watermark img.homeland {
	background: url(homeland-longbeach.jpg) no-repeat;
}
</style>
</head>

<body>	
		<h2>Watermark Effect Method 1</h2>
		<div class="watermark">
			<img class="blank" src="blank.gif" alt="" />

			<img src="homeland-longbeach.jpg" alt="" />
		</div>
		
		<h2>Watermark Effect Method 2</h2>
		<div class="watermark">
			<img class="blank homeland" src="blank.gif" alt="" />
		</div>
</body>
</html>

**Beverleyh** · 03-01-2011, 09:53 AM

Why would you want to hinder your visitors by disabling the right-click menu?

I use my right-clicks all the time to print, create shortcuts and add to favourites.

**djr33** · 03-01-2011, 03:55 PM

The only way I can imagine would be a simple layering switch: put something on top of the "protected" element and disable its menu that way. It could be an image or it could just be a <div> with a transparent background color. There are many possibilities. You could even position it over your entire page. Regardless, it's not really disabling anything.

And Javascript is the only way to approach actually modifying browser behavior, not just modifying content.

You can use Flash or other plugins and get a plugin-specfic context menu. In fact, Flash allows you to customize the context menu, and other plugins may allow that as well. I'm not sure if they allow you to disable it (perhaps).

But I completely agree with Beverley. Aside from theoretical questions, this is not a useful goal, and it actually will likely be more of a problem than a "solution".

What exactly are you attempting to do? Stop people from stealing? Something else? There may be a better way around it if you explain that. If this is just a theoretical question, I believe we've covered all of the options. "Right click" does not exist in HTML or anything else except Javascript. So you can't do anything about it except with Javascript.

**matotien** · 03-19-2011, 11:39 AM

"The only way I can imagine would be a simple layering switch: put something on top of the "protected" element and disable its menu that way."

From the discussion, i believe my options are to use flash and css. That is if flash can allow customization of the context menu or rather be used to disable the menu (save as option) as mentioned. Any practical examples (flash & CSS) of code?

**Skinnybobb** · 03-21-2011, 01:25 PM

Print screen.....Bang.
If you don't want people to potentially steal it then don't put it on the internet. I tried wrestling with this a few years back and found that if someone wants to "grab" it then they will.

A watermark on the image may deter but a good photoshop artist could still get rid of this.

I'm intrigued what images you have now. How about posting one up for us !

**afrid** · 04-14-2011, 06:55 PM

Try this one... put it into /body/ section.

Code:

<body>
<body oncopy="return notcopy()">

 <script language="JavaScript"><!--
 var message='You can't copy this!'; function click(e)
 {if (document.all) {if (event.button == 2) {alert(message);return false;}}
 if (document.layers) {if (e.which == 3) {alert(message);return false;}}}
 if (document.layers) {document.captureEvents(Event.MOUSEDOWN);}
 document.onmousedown=click;

 function notcopy()
 {
 alert(message)
 return false
 }
 // -->
 </SCRIPT>

this one is also good against dragging the picture into the bar for copying...
I would recommend to put both of these codes together.

Code:

<SCRIPT LANGUAGE="JavaScript">
 document.ondragstart = test;
 //no dragging
 document.onselectstart = test;
 //no select
 document.oncontextmenu = test;
 //no context menu
 function test() {
 return false
 }
 </SCRIPT>

Thread: CSS Image gallery without an option to right click and save as

Thread Tools

Search Thread

CSS Image gallery without an option to right click and save as

Bookmarks

Bookmarks

Posting Permissions