set/adjust z-index onmouseover

Jake · Feb 2, 2005

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!

Stephen Chalmers · Feb 3, 2005

Jake said:
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>

Jake · Feb 3, 2005

Thanks for the reply but I cant get your sample to work.

Error: Expected '{'

Stephen Chalmers · Feb 3, 2005

Jake said:
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;
}
}

Stephen Chalmers · Feb 3, 2005

Jake said:
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;
}
}

John Doe · Feb 3, 2005

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.

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
IE <DIV> layer and z-index question	17	Feb 11, 2008
Help with my responsive home page	2	Dec 14, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Neopets coding help	4	Sep 23, 2021
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Help with code	0	Jun 12, 2022
z-index not positioning properly?	0	Nov 1, 2006

set/adjust z-index onmouseover

Jake

Stephen Chalmers

Jake

Stephen Chalmers

Stephen Chalmers

John Doe

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads