PopupMenu with JavaScript !

Discussion in 'JavaScript' started by micheal9000, Jan 15, 2009.

0
  1. #1
    I write simple javascript to create popupmenu, but it isn't complete, help me plz !
    -------------------------------
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    function AppendText(){
    var oldStr = "Write text another !<a href='http://google.com'><br>Google</a><a href='http://yahoo.com'><br>Yahoo</a>"
    document.getElementById("header").innerHTML = oldStr;
    document.getElementById("header").onmouseover = AppendText;
    }

    function DeleteText(){
    var newStr = "Write text another !";
    document.getElementById("header").innerHTML = newStr;
    document.getElementById("header").onmouseout = DeleteText;
    }
    </script>
    <style>
    #header{
    margin-bottom:20px;
    background-color:Silver;
    color:Red;
    font-size:medium;
    }
    #ct{
    height:20px;
    background-color:blue;
    }
    </style>
    </head>
    <body>
    <div id="header" onmouseover="AppendText()" onmouseout="DeleteText()">
    <a>Write text another !</a>
    </div>
    <div id="ct">
    </div>
    </body>
    </html>
    ---------------------------------------------
    when i move cursor on text "Google" and "Yahoo", my popupmenu auto close. Why ? Cursor doesn't move outside div "header". Help me !!!!:(
     
    micheal9000, Jan 15, 2009 IP
  2. micheal9000

    micheal9000 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I fixed, but I don't know why
    1.Color didn't change when cursor on menuitems.
    2.Popupmenu only pop down in Firefox..., but doesn't on IE.
    3.Link on menuitem, doesn't work. Only right click, chose open from menu of Webbrowser.
    Why have many problems ? Help me !!!!!
    ------------------------------------
    <html>
    <head>
    <style>
    #header{
    margin-bottom:20px;
    margin-left:20px;
    background-color:Silver;
    color:Green;
    font-size:large;
    width:155px;
    font-weight:bold;
    }
    #ct{
    height:20px;
    background-color:blue;
    }
    #ppmenu1{text-decoration:none;}
    #ppmenu2{text-decoration:none;};
    #ppmenu1:link{
    color:Blue;
    }
    #ppmenu1:hover{
    color:Yellow;
    background-color:Black;
    }
    #ppmenu1:visited{
    color:Blue;
    }
    #ppmenu2:link{
    color:Blue;
    }
    #ppmenu2:hover{
    color:Yellow;
    background-color:Black;
    }
    #ppmenu2:visited{
    color:Blue;
    }
    </style>
    <script language="javascript" type="text/javascript">
    function AppendText(){
    var oldStr = "Write text another !<br><a id='ppmenu1' href='http://example1.htm'>Example1</a><br><a id='ppmenu2' href='http://example2.htm'>Example2</a>"
    document.getElementById("header").innerHTML = oldStr;
    document.getElementById("header").onmouseover = AppendText;
    document.getElementById("ppmenu1").onmouseover = AppendText;
    document.getElementById("ppmenu2").onmouseover = AppendText;
    }

    function DeleteText(){
    var newStr = "Write text another !";
    document.getElementById("header").innerHTML = newStr;
    document.getElementById("header").onmouseout = DeleteText;
    }
    </script>
    </head>
    <body>
    <div id="header" onmouseover="AppendText()" onmouseout="DeleteText()">
    Write text another !
    </div>
    <div id="ct">
    </div>
    </body>
    </html>
     
    micheal9000, Jan 15, 2009 IP