...

View Full Version : layer size



alcool9999
05-05-2010, 05:08 PM
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

frankle
05-06-2010, 12:59 PM
Sorry, am still not clear what your mean to say. Please elaborate .

Regards,

alcool9999
05-06-2010, 05:11 PM
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

katierosy
05-10-2010, 05:20 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum