Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

HTML / webserver question ??

5300cs

5300cs

macrumors 68000
Original poster
Nov 24, 2002
1,862
0
japan
Let's say I wanted to keep people from right-clicking anywhere on my website (to save images, for example.) How would I go about disabling this? Is this server side or a little Javascript magic?

Thanks in advance.
 
Just a little client side JavaScript does the trick, try this one:
Code: 
<script>
// DISSABLE RIGHT CLICK - START SCRIPT
if (window.Event)
  document.captureEvents(Event.MOUSEUP);
 
function nocontextmenu()
{
 event.cancelBubble = true
 event.returnValue = false;
 
 return false;
}
 
function norightclick(e)
{
 if (window.Event)
 {
  if (e.which == 2 || e.which == 3)
   return false;
 }
 else
  if (event.button == 2 || event.button == 3)
  {
   event.cancelBubble = true
   event.returnValue = false;
   return false;
  }
 
}
document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
// DISSABLE RIGHT CLICK - END SCRIPT
</script>
 
hmmm... I may be putting it the wrong place within the index.html file. Where exactly should this go?

(and thanks for the code :) )
 
grrr... it's not working :mad:

what am I doing wrong ??
 

Attachments

  • html.jpg
    html.jpg
    78.5 KB · Views: 124
What browser are you testing with. In my experience these scripts that disable context menus only work in IE (and often only IE/Win). This is because the oncontextmenu is not part of the standard (iirc) and the onmousedown event is not fired on the document object (or perhaps that the onmousedown is not inherited by the images that are children of some elements in the DOM tree back up to the document object).

Thinking about it the DOM explanation seems most likely. You have a structure something like

Code: 
document
 + head
 ...
 + body
    + p
     ....
    + image

You attach the mouse handlers to the document object. Handlers are not an inherited property so they do not attach to it's children. As the image is on top of the document (sort of I realise it's actually contained by it) it gets the mouse events and does not pass them on.

Personally I find this sort of tampering with the expected UI of an app on my computer very annoying to say the least. It also takes very little to get round (view source? or open the document properties in OmniWeb).
 
OK I have thought of one really ugly way of stopping right clicks from effecting images anywhere on the page but still allowing things like back and forward from the context menus.

Create a gigantic DIV that covers the whole page (absolutly positioned) that is forced to be on top of all other elements (z-index) and is transparent. It will get ALL mouse clicks!

Of course you will not be able to select any text on the page...
 
I have made this a little better. See the example below:

Code: 
<html>
<head>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;">
<div style="border:0px;width:200px;height:200px;z-index:0;">
<img src="http://a1600.g.akamai.net/7/1600/51/63d2ba975a17f6/www.apple.com/macosx/images/jagbox06232003.jpg" width="200" height="200">
</div>
<div style="border:0px;width:200px;height:200px;z-index:1;background:transparant;position:relative;left:0px;top:-200px;"><!-- This div protects the image --></div>
</div>
</body>
</html>

How this works: Basically it puts a div that you can't see over the top of your image. As the div gets all the mouse clicks your image cannot be clicked on with the right mouse button. You could easily expand this to a JavaScript function and a set of defined images that protect the image from the casual view source user as well.

You need to replace the 200px by the correct width and height for the image being protected. Obviously you need to replace the relative offset of -200 with your height as well.
 
Originally posted by Cuckoo
Couln't reisist on my wintel, XP pro.. with the latest IE...

and i could just access the picture and it's source
http://homepage.mac.com/robbieduncan/galleries/christmas2000/thumbnails/008.jpg

is the image...

not to rain on your parade, but i was wandering, that you might want to improve the HTML.

Or am i missing the point... In that case, im sorry for the misperception.
Click to expand...

You have not missed the point! I obviously need to look into what is different in the way IE handles the nested layers/ objects on the screen compared to Safari. Perhaps I can add some handlers to the overlay div to deal with IE/Win...

Just tried IE/Mac. The protection worked on that too. I'll give IE/Win a try now...
 
Very nice robbie, it also does work under Firebird (Windows), but as Cuckoo said, it doesn't seem to work under IE 6. The image even aligns differently, in IE it is centered on the page, in Firebird it is on the left, maybe that has something to do with it?
 

Attachments

  • imageprotect.jpg
    imageprotect.jpg
    52 KB · Views: 83
its impossible to stop people looking at your code - most (if not all) browsers have a "view source" link from one of the main menus. probably the best way to stop people from snooping around its to get rid of all whitespace and line breaks in the code so its all on one line. Yeah, it might be a pain to edit but thats the idea!

As for your images, try digitally watermark'ing them?

Putting a polite notice on the site saying that you'll sue any ass that half-inches your pix is the best way to stop people from pilfering stuff.

There's no 100% reliable way of protecting your images as afterall, people can always do a screenshot and manipulate that!
 
Originally posted by edesignuk
Very nice robbie, it also does work under Firebird (Windows), but as Cuckoo said, it doesn't seem to work under IE 6. The image even aligns differently, in IE it is centered on the page, in Firebird it is on the left, maybe that has something to do with it?
Click to expand...

I think it should be centered on everything (although this could be throwing in off actually). I did notice that the centering was not working but thought nothing of it. I'll try taking out the centering...

Took off the centering but still no dice. I'll look into this another day! I think that the events are bubbling through somehow.
 
Originally posted by mrjamin
its impossible to stop people looking at your code - most (if not all) browsers have a "view source" link from one of the main menus. probably the best way to stop people from snooping around its to get rid of all whitespace and line breaks in the code so its all on one line. Yeah, it might be a pain to edit but thats the idea!
Click to expand...
Very true, but the average joe wouldn't know what the hell they were looking for in the source code.
 
Originally posted by edesignuk
Very true, but the average joe wouldn't know what the hell they were looking for in the source code.
Click to expand...

That's why everything is loaded from external JavaScript files (including the image location). Your average joe will not know what to do with this.
 
Originally posted by mrjamin
its impossible to stop people looking at your code - most (if not all) browsers have a "view source" link from one of the main menus. probably the best way to stop people from snooping around its to get rid of all whitespace and line breaks in the code so its all on one line. Yeah, it might be a pain to edit but thats the idea!

...

...

There's no 100% reliable way of protecting your images as afterall, people can always do a screenshot and manipulate that!
Click to expand...

Yeah, I had some pics I'd like to put on my site, but I don't want people DLing them .. I suppose the logical thing to do would be just not uploading them in the first place. I went to a site a long time ago though, where when one right-clicked anywhere on the page, it popped up a message box with only an 'OK' button on it. I wanted to do that, so I thought it was a Javascript thing. But then as you said, there's always a screen-grab :(
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back