Problem mit Divs innerHTML in Verbindung mit Onmouseout.

[Clemi123]

Hi.

Ich habe ein komisches Problem. Ich habe ein Script geschrieben, das per rechtem Mausklick auf ein <span> ein Menü öffnet. Funktioniert alles hervorragend. Das Menü geht auf und man sieht die verschiedenen Links, etc.

Jetzt mein Problem:
Beim Verlassen des Menüs mit dem Mauszeiger soll sich das ding auch wieder schliessen. Korrekt funktioniert es aber nur wenn ich dem Dív Container über InnerHTML einen unformatierten Text übergebe (z.B. lalalallalalalala alalala alalala).

<b>box.innerHTML = "lalalala alalala"</b>

Enthällt dieser Text nun ein Span, Div, Img oder einen Link verhällt sich der Onmouseout so, dass sobald man über ein image im menü fährt dieses Sofort ausgeblendet wird. Komisch.

Mein box.onmousemout soll aber nur greifen wenn man den Div Container mit der Maus verlässt und nicht wenn man über ein Element im Menü fährt. Hier mal der Code, vielleicht findet sich in der großen weiten Welt ja jemand der mir helfen kann das Problem zu lösen.

Hier mal der Code:

<style>
#rightclickmenu{border:1px solid black;position:absolute;z-index:10;background-color:#ccc;width:180px;overflow:hidden;}
.rmrow{background-color:#ccc;}
</style>

<script type="text/javascript">

// Container Daten

var RM = new Array();
var user_items = new Array();
user_items[0] = new Array ('Das ist ein Lustiger Text','index.php?id=22&uid={VAR1}','tempimage/1stern.gif');
user_items[1] = new Array ('Das is Text','index.php?id=22&uid={VAR1}','tempimage/2stern.gif');
RM['user'] = user_items;

var box = null;
var timeoutid= null;

/**
 * ID des dyn. erstellen Container fuer das rightclickmenu
 */
var rightclickmenuid = 'rightclickmenu';

/**
 * Millisekunden nachdem das Offene Rightclickmenu ausgeblendet werden soll
 */
var menutimeout = 15000;

/**
 * Koordinaten an denen das Menue angezeigt wird in Abhängigkeit zur Cursorposition
 */
var xpos = 10;
var ypos = 10;

/**
 * Maus Koordinaten berechnen
 */
function mouse_pos(evt)
{   if(!evt) evt = window.event;
    var pos = new Object();
    pos.left = evt.clientX;
    pos.top = evt.clientY;
    var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
            window.document.documentElement : window.document.body || null;
    if (b)
    {   pos.scrollLeft= pos.left + b.scrollLeft;
        pos.scrollTop = pos.top + b.scrollTop;
    }
    return pos;
}

/**
* Ueberprueft ob die rechte Maustaste gedrückt ist
*/
function isrightclick(evt)
{ var maustaste = 1;
 if (navigator.appName == 'Netscape' && (evt.which == 3 || evt.which == 2))
 { maustaste = evt.which;
 }
 else
 { if (navigator.appName == 'Microsoft Internet Explorer' && (event.button==2 || event.button==3))
  { maustaste = event.button;
  }
 }
 return (maustaste == 1) ? false : true;
}

function pmenu(e,type)
{
    // Falls eine anderes Rightclickmenu geladen ist dieses löschen
    if (box != null)
    {   clearbox();
    }

if (isrightclick(e))
 { // Browser Contextmenu deaktivieren
     document.oncontextmenu = new Function("return false")

// Mouse Koordinaten ermitteln.
        var pos = mouse_pos(e);
        box = document.createElement('div');
        box.id = rightclickmenuid;
        box.style.top = ( ypos + pos.top )  + 'px';
        box.style.left = ( xpos + pos.left ) + 'px';

var boxinhalt = "";

if (RM[type].length > 0 )
        {   var subbox = null;
            for(i=0;i<RM[type].length;i++)
            {
                subbox = document.createElement('div');
                subbox.className = 'rmrow';
                // Ist ein Bild vorhanden ?
                icon = "";
                if (RM[type][i][2] != "")
                {   icon = "<img src='"+RM[type][i][2]+"' title='"+RM[type][i][0]+"'/>";
                }

// Ein Link ist vorhanden
                linkpre = "";
                linkpost = "";
                if (RM[type][i][1] != "")
                {   linkpre = "<a href='"+RM[type][i][1]+"'>";
                    linkpost = "</a>";

}
                boxinhalt += "<div class='rmrow'>" +icon +linkpre + RM[type][i][0] + linkpost+"</div>";
            }
        }
        box.innerHTML = boxinhalt;

// Box automatisch ausblenden nach angegebener Zeit
        if (menutimeout > 0)
        {   timeoutid = setTimeout(clearbox,menutimeout);
        }

box.onmouseout = function(e)
        {   clearbox();
            document.oncontextmenu = new Function("return true")
        }

// Erstellen Container ausgeben
        document.body.appendChild(box);
 }
}

function clearbox()
{  var Node = document.getElementById(rightclickmenuid);
   Node.parentNode.removeChild(Node);
   window.clearTimeout(timeoutid);
   box = null;
   document.oncontextmenu = new Function("return true") ;
}
</script>

<br/>
<span class="m" onmousedown="pmenu(event,'user');" ><a href='index.php?id=22'>Supermann</a></span>
<span class="m" onmousedown="pmenu(event,'user');">Hugo</span>