function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
WitteWitte 

how to disable copy/paste function on image

Hello,

 

im quite new with salesforce. Does anyone know how you can disable the menu which is seen if you select an image with and then click with your right mouse button. I want to prevent that someone can copy a image.

 

Does anyone knows how to get this done?

 

Thanking you in front.

 

Greetings,

Paul

bob_buzzardbob_buzzard

This would be a javascript/browser issue rather than Salesforce.

 

You can disable the right click menu (aka the context menu) by adding the following to an image tag:

 

oncontextmenu="return false;"

However, if you are using an apex:image tag to render the image, I don't believe that attribute is supported, so you may need to convert it to a regular HTML image.

WitteWitte

Hi Bob,

 

Thnx for your fast reply. Ive heard it could be done with actionsupport is this true?

 

I was thinking some like:

<apex:actionsupport event="onclick" disabled="true" />

Thanking you in front.

Paul

bob_buzzardbob_buzzard

That's an interesting one.  I've just tried it in my dev org and it has no effect on the context menu.  I suspect that this disables the action from the point of view of stopping VF from hooking the event handler in, rather than disabling that particular event.

WitteWitte

Hi Bob,

 

i also tried this solution. What you said in your reply is indeed true. Thanks for trying this out for me.

 

This gives me a problem, this because i dont see how i can manage to convert the apex image to a een html img component without losing some functionality. The images are a list of images. And onmouseover it`s shown in big on the same page.

See the following code:

 

    <apex:outputpanel id="images" >
    <apex:repeat value="{!imagea}" var="Image" >

      <apex:image value="{!Image}" title="{!Image}" width="75px">
        <apex:actionSupport action="{!Image}" event="onmouseover" rerender="bigimage">
          <apex:param name="ImageID" value="{!Image}"/>
        </apex:actionsupport>
      </apex:image>

    </apex:repeat>
    </apex:outputpanel>

 

Do you perhaps know the answer?

 

Greetings,

Paul

bob_buzzardbob_buzzard

In that case you'll need to locate the DOM component and attach the event handler via Javascript. 

 

The following works for an image with a well known id:

 

window.onload=function()
	{
	document.getElementById('myimage').oncontextmenu = function()
		{
		return false; // Cancel any event from this point forward
		} 
	}

 

The tricky bit in your case is that the images are nested inside a repeat so you'd need to give them a unique id (maybe some common prefix followed by the image name?).  The only bit I'm not sure about is whether the ajax rerendering would have any effect on other elements in the DOM - I wouldn't expect that, but I've not tried this exact scenario myself.