Make my right click context menus occur only in selected divs

Question

Hi
I want to make some context menus for certain divs in my website page. So the person viewing the site sees a link to a music file and they right click on the link to get more options but instead of the default browser options coming up, a customized list comes up.
This is just an example. The real thing is that I want multiple menus that work in selected divs only. So if you click in most places on the page you get the default context menu but if you click within certain divs you get a different menu.
So far everyone has just given me java script but i can't set html links inside of javascript. Can anyone tell me how to take this script and make it apply to divs instead of the whole document?
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
    <script type="text/javascript">   
    var contextMenuObj;
    var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
    var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;   
    var activeContextMenuItem = false;
    function highlightContextMenuItem()
        this.className='contextMenuHighlighted';
    function deHighlightContextMenuItem()
        this.className='';
    function showContextMenu(e)
      contextMenuSource = this;
      if(activeContextMenuItem)activeContextMenuItem.className='';
      if(document.all)e = event;
      var xPos = e.clientX;
      if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
       xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20;
      var yPos = e.clientY;
      if(window.document.body.scrollTop > 0)
          yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
        else if (window.pageYOffset)
          yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
        else
        { yPos = e.clientY -20; }
      contextMenuObj.style.left = xPos + 'px';
      contextMenuObj.style.top = yPos + 'px';
      contextMenuObj.style.display='block';
      return false;
    function hideContextMenu(e)
        if(document.all) e = event;
        if(e.button==0 && !MSIE){
        }else{
            contextMenuObj.style.display='none';
    function initContextMenu()
        contextMenuObj = document.getElementById('contextMenu');
        contextMenuObj.style.display = 'block';
        var menuItems = contextMenuObj.getElementsByTagName('LI');
        for(var no=0;no<menuItems.length;no++){
            menuItems[no].onmouseover = highlightContextMenuItem;
            menuItems[no].onmouseout = deHighlightContextMenuItem;
            var aTag = menuItems[no].getElementsByTagName('A')[0];
            var img = menuItems[no].getElementsByTagName('IMG')[0];
            if(img){
                var div = document.createElement('DIV');
                div.className = 'imageBox';
                div.appendChild(img);
                if(MSIE && navigatorVersion<6){
                    aTag.style.paddingLeft = '0px';
                var divTxt = document.createElement('DIV');   
                divTxt.className='itemTxt';
                divTxt.innerHTML = aTag.innerHTML;
                aTag.innerHTML = '';
                aTag.appendChild(div);
                aTag.appendChild(divTxt);
                if(MSIE && navigatorVersion<6){
                    div.style.position = 'absolute';
                    div.style.left = '2px';
                    divTxt.style.paddingLeft = '15px';
                if(!document.all){
                    var clearDiv = document.createElement('DIV');
                    clearDiv.style.clear = 'both';
                    aTag.appendChild(clearDiv);       
            }else{
                if(MSIE && navigatorVersion<6){
                    aTag.style.paddingLeft = '15px';
                    aTag.style.width = (aTag.offsetWidth - 30) + 'px';
                }else{
                    aTag.style.paddingLeft = '30px';
                    aTag.style.width = (aTag.offsetWidth - 60) + 'px';
        contextMenuObj.style.display = 'none';       
        document.documentElement.oncontextmenu = showContextMenu;
        document.documentElement.onclick = hideContextMenu;
    </script>
If anyone has an alternative to this that will allow me to apply the following link to one of the items in the  menu I'd like to hear it.
This is the link that I want to use: <a href="Test Audio File.mp3"  download="Test Audio File.mp3">
Thanks
Tohorhilau

Answer 1

Hi, thanks for the quick response!
While trying to find info on how to fix this I looked up some context menu addons for FF and tried one. It didn't work so I uninstalled it and after that everything was back to normal. Odd, but there you have it. I still don't know what went wrong in the first place but for the moment it appears to have cleared up.
Next time though I will try loading into Safe Mode if I find any issues (I forgot there was one!).
Thanks for getting back to me again.
GC