Right Click Context Menu on Image ONLY

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:20

Right Click Context Menu on Image ONLY

Poster: bfredett
Dated: Wednesday July 7 2004 - 20:28:12 BST

Greetings,

Just downloaded the context menu. Great look and easy to setup.

Is there a way to configure the scripts so that the right-click menu only appears when the mouse is over an image(s)? If the user right-clicks off an image ... the regular menu shows up.

Regards,
Brian

Poster: kevin3442
Dated: Wednesday July 7 2004 - 22:12:07 BST

Hi Brian,

I'd say yeah, you can do it. I wouldn't want to modify the contextmenu.js script, 'cause I didn't write it and I don't know if it might be updated down the road. But we can make a function to hook into it. contextmenu.js has a flag called conextDisabled that we can use to toggle the context menu active or not active. We'll toggle it active when a user mouses over an image (conveniently, the mouseover must occur before the right-click on the image). We'll toggle the menu inactive when the user mouses out of the image.

Place the following code at the top of your menu_data.js file

Code:

function setContextDisabled(state)
{
  contextDisabled = state;
  if (!contextDisabled) {
    if(ns4){
      _d.captureEvents(Event.MOUSEDOWN);
      _d.onmousedown=rclick;
    }
    else {
      _d.onmouseup=rclick
      _d.oncontextmenu=new Function("return false")
    }
  }
}

setContextDisabled(true);

You'll want to make sure that menu_data.js is loaded into the page after contextmenu.js, as it is in the example you downloaded.

Now, on an image where you want the right-click menu to be availabe, you insert onmouseover and onmouseout handlers, like so:

Code:

<img src="mypic.gif" onmouseover="setContextDisabled(false)" onmouseout="setContextDisabled(true)">

That should do it.

Hope that helps,

Kevin

Industrial Strength JavaScript and DHTML Menus

Right Click Context Menu on Image ONLY