set/adjust z-index onmouseover

02-02-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!

02-03-2005

Jake <> wrote in message
news:jq4Md.89$...
> 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

02-03-2005

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

Error: Expected '{'

"Stephen Chalmers" <> wrote in message
news:42017c4e$...
> Jake <> wrote in message
> news:jq4Md.89$...
>> 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
>
>
>

02-03-2005

Jake <> wrote in message
news:3egMd.163$...
> 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

02-03-2005

Jake <> wrote in message
news:3egMd.163$...
> 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

02-03-2005

In article <3egMd.163$>,
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;
> >

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
DataList <td onMouseOver>	Ryan Moore	ASP .Net	5	10-12-2004 01:44 PM
OnMouseOver for a DataGrid control	=?Utf-8?B?QXZpIFNoaWxvbg==?=	ASP .Net	5	07-12-2004 03:53 AM
Onmouseover	Frances Valdes	ASP .Net	7	03-03-2004 12:35 PM
ASP.NET ImageButton and OnMouseOver	Jay	ASP .Net	2	09-30-2003 01:31 PM
How to change onmouseover and onmouseout dynamically	Tor Inge Rislaa	ASP .Net	3	08-06-2003 04:43 PM