By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,760 Members | 955 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,760 IT Pros & Developers. It's quick & easy.

set/adjust z-index onmouseover

P: n/a
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
Share this Question
Share on Google+
5 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a


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

P: n/a


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.