Javascript context menu for images

Question

I have a website where lots of people copy images off it, which is fine. What I do want to do, however, is help them embed it on the target website they are going to.

Ideally this would take the form where when a user right clicks the image a context menu will appear giving them easy options to embed or share the image.

What is the best way to do this?

P.s. I don't care about them hotlinking, or saving the images at all, all I want to do is provide the user with an easier way to share the images!

Answer 1

No. You can prevent the common user from bothering, but the fact is the URL is sent to the browser to download. So at the very least I could view the source and figure it out.

If you really want to try to annoy the user, though, you can attach an oncontextmenu event which will capture the right-click in some browsers.

edit:

In response to your comment..

Since you're using jQuery, you can use this plugin to detect right clicks. It has been tested on most browsers.

You can then use something like SimpleModal to display the modal box you want to show the user..

$('img').rightClick(function (e) {
    $.modal(...);
});

Answer 2

Don't send the image to their browser.

Answer 3

You can actually render HTML as embedded mime data in all major browsers except for IE:

http://jimbojw.com/wiki/index.php?title=Data_URIs_and_Inline_Images

Another weird, but workable solution is to convert the image to CSS:

http://elliottback.com/wp/convert-image-to-css/

Neither is really that great a solution, but it highlights the fact that you need to be willing to lose an image by just putting on the web.

Even if you use a plug-in, people can just do a screen capture.