www.webdeveloper.com
Results 1 to 4 of 4

Thread: Right Click Menu in IMG --> MAP --> AREA --> Cordinates

  1. #1
    Join Date
    Oct 2013
    Posts
    3

    Right Click Menu in IMG --> MAP --> AREA --> Cordinates

    Hello there,

    I am facing a tricky situation. Let me explain it :-)

    I created a IMG tag with that pointing to a bitmap file.

    Now i created a MAP tag and inside that did the AREA tag and defined certain coordinates that's clickable to user. User can click and inside the "onclick" i defined a JS function that gets triggered. Upto this part everything is working awesome.

    The challenge now is, i want to be able to show a custom defined menu when user right click on the coordinates inside the image. How can i do that?

    Left click is handled inside "onclick", but how about right click?

    Is that possible to do? If yes, how?

    Thanks in advance.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,147
    If you search on "javascript right click" you'll find several approaches that should work. Pick the one that most closely matches whatever else you're doing on the page, or, failing that, whichever you understand best so you can easily modify it to suit your needs.

  3. #3
    Join Date
    Oct 2013
    Posts
    3
    The problem is that AREA tag doesn't have an event for oncontextmenu. So am not able to capture the right-click inside the particular coordinates.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,147
    Ah, right. Well then, you'll just have to capture the clicks on the image itself (remove the 'ismap' attribute). If it's a left click, calculate the appropriate link. If it's a right click, do the context menu. You can either hard code the coordinates in your JavaScript or examine the <area> tags. It should be pretty straightforward event handling code, so you can learn from examples online if you need to. Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles