471,593 Members | 1,422 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,593 software developers and data experts.

set/adjust z-index onmouseover

What would be the correct syntax for setting the z-index of a layer
OnMouseOver?

I have a mouseover action on a visible layer which displays a popup info
layer but it gets displayed behind other visible layers depending on its ID
which I beleive is inherited from its parent. I need the popup layer to
display in front of everything on the page when activated.

<DIV ID="popinfo<%=rs("ID") %>" STYLE="padding:0px; border:1px solid
#000000; position: absolute; width: 300px; height: 220px; left: 36px;
top: -1px; z-index: <%=rs("ID") %>" ; background-color:#2D5B8E;
visibility:hidden">

Thanks in advance!

Jul 23 '05 #1
5 33878
Jake <sp******@alltel.net> wrote in message
news:jq************@fe10.usenetserver.com...
What would be the correct syntax for setting the z-index of a layer
OnMouseOver?

I have a mouseover action on a visible layer which displays a popup info
layer but it gets displayed behind other visible layers depending on its ID which I beleive is inherited from its parent. I need the popup layer to
display in front of everything on the page when activated.

<DIV ID="popinfo<%=rs("ID") %>" STYLE="padding:0px; border:1px solid
#000000; position: absolute; width: 300px; height: 220px; left: 36px;
top: -1px; z-index: <%=rs("ID") %>" ; background-color:#2D5B8E;
visibility:hidden">

Thanks in advance!

It's better to simplify the syntax by writing a function to do the job.
Here's an example using two simple layers. I chose to style the popup
initially visible.

<html>
<head>
</head>
<body>

<DIV id='popup' style="position:absolute;left:100px; top:50px;
background-color:#ffff00;z-index:0;visibility:visible;">Popup text
layer</DIV>
<DIV onmouseover='toTop("popup",true,100)'
onmouseout="toTop('popup',false,0)" id='perm'
style="position:absolute;left:50px; top:55px;
background-color:#ff0000;z-index:1">The Permanent Layer</DIV>

<script type='text/javascript'>

function toTop(layer, action, z) // layer== id of div, action:
true==show,false==hide, z==z index
{
var lref;

if(document.getElementById && (lRef=document.getElementById(layer)))
{
lRef.style.visibility=action?'visible':'hidden';
lRef.style.zIndex=z;
}
}
</script>
</html>

--
S.C.
http://makeashorterlink.com/?H3E82245A

Jul 23 '05 #2
Thanks for the reply but I cant get your sample to work.

Error: Expected '{'
"Stephen Chalmers" <ig******@lycos.co.uk> wrote in message
news:42**********@mk-nntp-2.news.uk.tiscali.com...
Jake <sp******@alltel.net> wrote in message
news:jq************@fe10.usenetserver.com...
What would be the correct syntax for setting the z-index of a layer
OnMouseOver?

I have a mouseover action on a visible layer which displays a popup info
layer but it gets displayed behind other visible layers depending on its

ID
which I beleive is inherited from its parent. I need the popup layer to
display in front of everything on the page when activated.

<DIV ID="popinfo<%=rs("ID") %>" STYLE="padding:0px; border:1px solid
#000000; position: absolute; width: 300px; height: 220px; left: 36px;
top: -1px; z-index: <%=rs("ID") %>" ; background-color:#2D5B8E;
visibility:hidden">

Thanks in advance!

It's better to simplify the syntax by writing a function to do the job.
Here's an example using two simple layers. I chose to style the popup
initially visible.

<html>
<head>
</head>
<body>

<DIV id='popup' style="position:absolute;left:100px; top:50px;
background-color:#ffff00;z-index:0;visibility:visible;">Popup text
layer</DIV>
<DIV onmouseover='toTop("popup",true,100)'
onmouseout="toTop('popup',false,0)" id='perm'
style="position:absolute;left:50px; top:55px;
background-color:#ff0000;z-index:1">The Permanent Layer</DIV>

<script type='text/javascript'>

function toTop(layer, action, z) // layer== id of div, action:
true==show,false==hide, z==z index
{
var lref;

if(document.getElementById && (lRef=document.getElementById(layer)))
{
lRef.style.visibility=action?'visible':'hidden';
lRef.style.zIndex=z;
}
}
</script>
</html>

--
S.C.
http://makeashorterlink.com/?H3E82245A


Jul 23 '05 #3
In article <3e*************@fe10.usenetserver.com>, sp******@alltel.net
says...
Thanks for the reply but I cant get your sample to work.

Error: Expected '{'

That's because his code wrapped. If you really can't figure out that
problem for yourself, you might want to look at one of the many free
javascript tutorials on the web, and focus on the troubleshooting
sections. The line which begins "true==show" can be safely deleted or
can be returned to its original position at the end of the line above
it.
function toTop(layer, action, z) // layer== id of div, action:
true==show,false==hide, z==z index
{
var lref;

Jul 23 '05 #4


Jake <sp******@alltel.net> wrote in message
news:3e*************@fe10.usenetserver.com...
Thanks for the reply but I cant get your sample to work.


It's a line-wrap problem. Replace the function with this:

// layer== id of div, action:true==show,false==hide, z==z index
function toTop(layer, action, z)
{
var lref;

if(document.getElementById && (lRef=document.getElementById(layer)))
{
lRef.style.visibility=action?'visible':'hidden';
lRef.style.zIndex=z;
}
}

--
S.C.

http://makeashorterlink.com/?H3E82245A

Jul 23 '05 #5


Jake <sp******@alltel.net> wrote in message
news:3e*************@fe10.usenetserver.com...
Thanks for the reply but I cant get your sample to work.


It's a line-wrap problem. Replace the function with this:

// layer== id of div, action:true==show,false==hide, z==z index
function toTop(layer, action, z)
{
var lref;

if(document.getElementById && (lRef=document.getElementById(layer)))
{
lRef.style.visibility=action?'visible':'hidden';
lRef.style.zIndex=z;
}
}

--
S.C.

http://makeashorterlink.com/?H3E82245A

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Jeff O. | last post: by
8 posts views Thread by kchayka | last post: by
4 posts views Thread by Elijsh | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.