Netscape layering

Afternoon all,

I think my question is linear to that asked by 'calvinthong' but a little different.

I have a layer for a menu bar that is draggable - hence the menu can be placed anywhere. This menu bar obviously has links - mine are through an image map of five buttons.

In IE, these buttons are clickable and thus take me to whatever page, but in Netscape the buttons are clickable but they do nothing. Because the layer that holds this menu bar is draggable, Netscape, I assume, is thinking I'm clicking the buttons with a view to moving the layer and hence not registering a click.

I've tried separating the buttons onto a nested layer with a higher Z-index but to no avail.

Here's the code for the layer and menu bar (if it works) :

<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
<div id="Layer1" style="position:absolute; width:155px; height:272px; z-index:20000; left: 40px; top: 50px">

<table cellspacing=0 cellpadding=0 border=0 width=155>
<tr>
<td colspan=3><img src="construct/1.gif" width=155 height=34></td>
</tr>
<tr>
<td><img src="construct/2.gif" width=10 height=11></td>
<td><img src="construct/3.gif" width=135 height=11></td>
<td><img src="construct/4.gif" width=10 height=11></td>
</tr>
<tr>
<td valign=top><img src="construct/5.gif" width=10 height=29></td>
<td valign=top>
<table cellspacing=0 cellpadding=3 border=0 width=135>
<tr>
<td height=150 background="construct/back.gif" class=menuwhite>Yeovil Festival of Transport 2000<br><br>Castle Combe 50th Anniversary<br><br>Thruxton 26th March (Powertour)<br><br>Castle Combe Anglo-American</td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height=16></td>
<td><img src="construct/6.gif" width=135 height=16></td>
<td><img src="construct/7.gif" width=10 height=16></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="construct/8.gif" width=135 height=19></td>
<td><img src="construct/9.gif" width=10 height=19></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><map name="menumap">
<area shape="circle" coords="114,6,7" href="design.html" alt="design" onkeydown="loadpage('design.html')">
<area shape="circle" coords="94,15,7" href="links.html" alt="links">
<area shape="circle" coords="68,19,7" href="tips.html" alt="tips">
<area shape="circle" coords="43,16,7" href="photos.html">
<area shape="circle" coords="24,7,7" href="home.html" alt="photos">
</map><img src="construct/10.gif" width=135 height=28 isMap usemap="#menumap" border=0 name="arse"></td>
<td><img src="construct/11.gif" width=10 height=28></td>
</tr>
</table>

</div>
[/code]


Cheers for any help.


Toodle-oo
Graham

Anyone?

This is what I've done and I think relates to your issue (P.S. This is using ASP and JavaScript):

Add a hidden input field on your form ('frmSetup' in this example):

<input type="hidden" name="hidClicked" value="">

Instead of using an input field for your buttons, use the <img> tag and an <a>.

<a href="javascript:document.frmSetup.submit()" name="New Customer Setup" onmouseover="setbtnclicked('cmdCust')" onmouseout="setbtnclicked(' ')">
<img name="cmdCust" src="images/button-custsetup.gif" width="120" height="19" border="0">
</a>

Give the image a name.
In the onMouseOver and onMouseOut event call the following Javascript function:

<script language="javascript">
function setbtnclicked(sbtn){
document.frmSetup.elements
['hidClicked'].value = sbtn;
}
</script>

When clicked the form will be submitted and all you need to do is check for the value of your hidden input field.

Select Case lcase(Request.Form("hidClicked"))
Case "cmdcust"
Response.Clear
Response.Redirect("partyinfo.asp")

Case Else
End Select

Hopefully this works for you.


[This message has been edited by cford (edited October 18, 2000).]

Whoops, 1 flaw. Instead of using the onMouseOver and onMouseOut events, in your HREF refer to the following function.

<script language="JavaScript">
function setbtnclicked(sbtn){
document.frmSetup.elements['hidClicked'].value = sbtn;
document.frmSetup.submit();
}
</script>

You don't need the onMouseX events.

Cheers, but I can't use ASP, old fruit

You can use Javascript, the method is still the same.

Instead of doing a the submit:

document.frmSetup.submit();

Use the following javascript code:

switch(document.frmSetup.elements['hidClicked'].value){
case 'cmdCust':
window.location = '<URL to go to>';
break;

default:
}

This should work. URL

*cough*

Cheers. I'll have a play.


I used the Dreamweaver 2 draglayer behaviour thing to get my layer to a moveable state, but I am now wondering if this can be altered so that I can only drag the whole layer by clicking on a 'tab' of some sort.

If you want to see the page I'm on about, go to : http://www.british-motorsport.fsnet.co.uk

Perhaps I can get the layer to drag only if I drag on 'Menu' at the top, so that I wouldn't then need all this strange Javascript?????