Disabling the right-click menu for an image
Page: prev. | 1 | next
Select method and then right-click:
✔✖ oncontextmenu
✔✖ onmousedown
You've spent time creating your signature, avatar, or tag for use in a chatroom and would prefere to keep it for your own use. But is there something you can do to stop other chatters saving and using it?
Yes and no. Yes in that it is possible to hinder the attempt to save the image, but no in that it does not make it impossibe, as if an image in
on the screen there's always a way to save it, even if it means using the humble PrtScn keyboard button.
The best you can hope for is to make the effort required more than what someone is willing to expend.
Although specifically I'm talking here about images posted on an HTML-based chat site, the same situation can apply to your images on your website or blog, and the solutions I suggest apply to either; but what is taken as given from this point on is that you are able to:
- Format the HTML markup yourself (BBCode or such just will not do)
- Use Javascript (most HTML-based chat sites will allow some but prohibit other Javascript functions)
Using Javascript to disable the image's right-click context menu
An image displayed within a webpage is saved via right-clicking on the image and selecting (depending on the browser used)
Save picture/image as from the context menu that is displayed.
It is not possible to disable the Save picture/image as command on the menu, but it is possible using Javascript to disable
the context menu itself, preventing it from appearing.
oncontextmenu
Modern browsers support the oncontextmenu event handler.
Using this within the img tag it is possible to disable the display of the context menu when the image is right-clicked (left-clicking
is ignored) by supplying return false as an argument. This instructs the browser to ignore the events default behaviour, which is displaying
the context menu.
- <img src="image.jpg" oncontextmenu="return false;" />
This will cause nothing to occur when the image is right-clicked. You could, if you wished, add other Javascript commands to the oncontextmenu
event. Lets say for example that you wished to display a message instead of the context menu.
- <img src="image.jpg" oncontextmenu="alert('Thanks but I would like to keep this avatar for myself.');return false;" />
A message box would now be displayed in the center of the browser window containing the message set.
The oncontextmenu event is best suited for this task, but older browsers may not support it, and some older HTML-based chat sites may prohibit it.
In which case an older event handler, the onmousedown event may be used.
onmousedown
The onmousedown event will trigger when either the left or right mouse button is clicked on the image. Supplying return false as a
argument will prevent the context menu from being displayed on right-click but any other commands will trigger if if the image is left or right clicked, so if a
message is set to appear as above it will be displayed if the image is left or right clicked.
- <img src="image.jpg" onmousedown="alert('Thanks but I would like to keep this avatar for myself.');return false;" />
It works fine, but is not as specific as the newer oncontextmenu event. However, as said, it will work with older HTML-based chat sites that
prohibit the oncontextmenu event.
So if you feel the need to protect your creative work, I hope that may help.
Page: prev. | 1 | next