Left/right click on an image

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Bill H
DevNet Resident
Posts: 1136
Joined: Sat Jun 01, 2002 10:16 am
Location: San Diego CA
Contact:

Left/right click on an image

Post by Bill H »

Consider the two following actions:

Code: Select all

<a href=&quote;http://www.foo.com&quote;><img src=&quote;foo.jpg&quote;></a>
<a href=&quote;javascript:firstWindow('bash.htm',170,315)&quote;><img src=&quote;foo.jpg&quote;></a>
I would like to combine both actions into one displayed image such that if the viewer left-clicks he is sent to "www.foo.com" while if he right-clicks the popup window containing "bash.htm" is activated.

Doable? If so, how is it coded?
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

i'm assuming you want to know how to tell if the user right clicks or left clicks? is this right? if so, then you would need to write a script to handle it via javascript...

here is an example of the right mouse button..

Code: Select all

<html>
<head><title>something</title>
<script language="Javascript">
function RightMouseWasClicked()
{
   if (event.button==2)
   {
        alert('Right Mouse button was pressed...');
   }
}

document.onmousedown=RightMouseButtonWasClicked;
document.oncontextmenu=new Function("return false")
</script>
</head>
<body bgcolor="#000000" onmousedown=RightMouseButtonWasClicked;>
</body>
</html>
hope this helps.
User avatar
Bill H
DevNet Resident
Posts: 1136
Joined: Sat Jun 01, 2002 10:16 am
Location: San Diego CA
Contact:

Post by Bill H »

Thanks for the guidance. I'm something of a rookie with javascript, so bear with me here.

The statement in the <body> tag line would seem to say that this functionality would apply universally throughout the page. I guess I can deal with that if I need to, but I really need it only to apply to a few links. (Leaving quite a few to which it would not apply.) Is this going to be an "all or nothing" situation?

Also that tag references "RightMouseButtonWasClicked" and the function has "RightMouseWasClicked" for its name. Can I assume that to be a typo?

If I understand, the statements on lines 12 & 13 replace the normal mouse button functionality with the new function and render the normal context menu inactive. So within the new function "RightMouseWasClicked" I would need to accomodate both buttons, redirecting the user if the left button was clicked, and invoking the popup for the right button.


My mind tells me those two things should not be done within the function, but should be done outside of it based on return values sent by the function.

Code: Select all

function RightMouseWasClicked()
{
   if (event.button==2)
        return 1;         // tell caller to show popup
   else return 0;         // tell caller to redirect
}
Something like that?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

Bill H wrote:If I understand, the statements on lines 12 & 13 replace the normal mouse button functionality with the new function and render the normal context menu inactive. So within the new function "RightMouseWasClicked" I would need to accomodate both buttons, redirecting the user if the left button was clicked, and invoking the popup for the right button.
Yeah!
Bill H wrote:My mind tells me those two things should not be done within the function, but should be done outside of it based on return values sent by the function.
It depends. If you want to send them to different places if different images are clicked then it has to be this way. otherwise, it is perfectly ok to have redirecting mechanism inside function's body.

One thing more... the example given by infolock was only an intro so that you may get the hang of it. you now only have to do is modify function to include redirecting capabilities and add the onmousedown directive to every single image you want this functionality to have. Simple enough!
Post Reply