Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: layer size

  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    84
    Thanks
    10
    Thanked 0 Times in 0 Posts

    layer size

    Code:

    <HTML>
    <HEAD>
    <script language="JavaScript">
    function show(){
    if (document.getElementById("menu2").style.visibility = "hidden")
    {
    document.getElementById("menu2").style.visibility = "visible";
    document.getElementById("menu4").style.visibility = "visible";
    }
    document.getElementById("menu").style.background = "#CCCCCC";
    }

    function hide(){
    document.getElementById("menu2").style.visibility = "hidden";
    document.getElementById("menu3").style.visibility = "hidden";
    document.getElementById("menu4").style.visibility = "hidden";
    }

    function show2(){
    document.getElementById("menu3").style.visibility = "visible";
    }

    function shighlight(){
    document.getElementById("menu").style.background = "#6699FF";
    }

    function shighlight2(){
    document.getElementById("menu2").style.background = "#6699FF";
    }

    function shighlight3(){
    document.getElementById("menu4").style.background = "#6699FF";
    }

    function hhighlight(){
    document.getElementById("menu").style.background = "#CCCCCC";
    }

    function hhighlight2(){
    document.getElementById("menu2").style.background = "#999999";
    }

    function hhighlight3(){
    document.getElementById("menu4").style.background = "#999999";
    }


    </script>
    <style type="text/css">
    #background {position:absolute; left:0;top:0; z-Index:1;height="1500";width="1500"}
    #menu {position:relative; left:-5;top:0; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:40;}
    #menu2 {position:relative; left:3;top:0; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:hidden;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:24;width:40;}
    #menu4 {position:relative; left:3;top:0; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:hidden;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:24;width:40;}
    #menu3 {position:relative; left:50;top:34; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:hidden;cursor:hand;background-color:#CCCCCC;height:33;width:50}
    </style>
    </HEAD>
    <BODY bgcolor="#CCCCCC">
    <div ID="menu" onclick="show()" onmouseover="shighlight()" onmouseout="hhighlight()" style=cursor:hand>
    <center>File</center>
    </div>
    <div ID="menu2" onmouseover="shighlight2()" onmouseout="hhighlight2()">
    New&#160;&#160;&#160;&#160;&#160;&rarr;
    </div>
    <div ID="menu4" onmouseover="shighlight3()" onmouseout="hhighlight3()">
    Open
    </div>
    <div ID="background" onclick="hide()">
    </div>
    <div ID="menu3">
    <center>Bank</center>
    </div>
    </BODY>
    </HTML>

    Hi if you run the code above it works ok but the mouseovers on the New and Open bit only work where the text is and not on the whole box. How can i fix this.

    Thanks

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Sorry, am still not clear what your mean to say. Please elaborate .

    Regards,

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    84
    Thanks
    10
    Thanked 0 Times in 0 Posts
    hi im sorry,

    code: <HTML>
    <HEAD>
    <script language="JavaScript">
    function show(){
    if (document.getElementById("menu2").style.visibility = "hidden")
    {
    document.getElementById("menu2").style.visibility = "visible";
    document.getElementById("menu4").style.visibility = "visible";
    }
    document.getElementById("menu").style.background = "#CCCCCC";
    }

    function hide(){
    document.getElementById("menu2").style.visibility = "hidden";
    document.getElementById("menu3").style.visibility = "hidden";
    document.getElementById("menu4").style.visibility = "hidden";
    }

    function show2(){
    document.getElementById("menu3").style.visibility = "visible";
    }

    function shighlight(){
    document.getElementById("menu").style.background = "#6699FF";
    }

    function shighlight2(){
    document.getElementById("menu2").style.background = "#6699FF";
    }

    function shighlight3(){
    document.getElementById("menu4").style.background = "#6699FF";
    }

    function hhighlight(){
    document.getElementById("menu").style.background = "#CCCCCC";
    }

    function hhighlight2(){
    document.getElementById("menu2").style.background = "#999999";
    }

    function hhighlight3(){
    document.getElementById("menu4").style.background = "#999999";
    }


    </script>
    <style type="text/css">
    #background {position:absolute; left:0;top:0; z-Index:1;height="1500";width="1500"}
    #menu {position:relative; left:-5;top:0; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:visible;cursor:hand;background-color:#CCCCCC;height:24;width:40;}
    #menu2 {position:relative; left:3;top:0; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:hidden;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:24;width:81;cursor:hand}
    #menu4 {position:relative; left:3;top:0; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:hidden;background-color:#999999;height:30;width:90;border-style:solid;border-width:1px;height:24;width:81;cursor:hand}
    #menu3 {position:relative; left:50;top:34; z-Index:1;font-family:arial; font-size:18px; color:black; visibility:hidden;cursor:hand;background-color:#CCCCCC;height:33;width:50}
    </style>
    </HEAD>
    <BODY bgcolor="#CCCCCC">
    <div ID="menu" onclick="show()" onmouseover="shighlight()" onmouseout="hhighlight()" style=cursor:hand>
    <center>File</center>
    </div>
    <div ID="menu2" onmouseover="shighlight2()" onmouseout="hhighlight2()">
    New&#160;&#160;&#160;&#160;&#160;&rarr;
    </div>
    <div ID="menu4" onmouseover="shighlight3()" onmouseout="hhighlight3()">
    Open
    </div>
    <div ID="background" onclick="hide()">
    <center>
    big
    </center>
    </div>
    <div ID="menu3">
    <center>Bank</center>
    </div>
    </BODY>
    </HTML>

    Run that and you wll udnerstand better. The thing is when you click on file the menu drops down wich is fine. But on the second option down the menu where it says OPEN, the background only changes to blue when the cursor is on the text but not on the rest of the layer.

    thanks

  • #4
    New Coder
    Join Date
    Apr 2010
    Posts
    38
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Smile

    No issues in IE7 and IE8 with Document mode IE7 and IE8 standards. to change the document mode use Alt + 7 and Alt + 8 respectively.


  •  

    Posting Permissions

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