fks: javascript show hide layer/div problem mit NS4

Beitrag lesen

hallo...
ich bastle gerade an einem pull-down menü herum.
ein relativ simples.

mein problem... netscape 4.
wer hätte das gedacht.

nun...
ich habe bereits das stylesheet mit @import url für den ns4 unlesbar gemacht, sodass ich keinen kauderwelsch bekomm...
mein problem ... es funzt nicht.

nur teilweise, bzw. sehr konfus.

javascript kann ich leider nicht so wirklich...
aber ich bin am lernen... (wie man im nachfolgenden code sieht *gg*)

es funktioniert auch nicht, wenn ich div durch ilayer (für ns4) ersetze.

ich habe momentan leider überhaupt keine ahnung mehr, was ich hier falsch mache.

danke für etwaige lösungsvorschläge!

-----------------------------------------------------------
<script src="dropdown-Dateien/utility.txt"></script>

<script language=JavaScript type=text/javascript>
<!--

//---------------------------------------------------------------
// ANZAHL DER MENUS (FUER COUNTER FUNKTION...)
//---------------------------------------------------------------
var numMenus = 5;

//---------------------------------------------------------------
// NORMALE MENUS ANZEIGEN
//---------------------------------------------------------------
function showMenu(menuNumber, eventObj)
 {
    hideAllMenus();
    hideSubMenus();
    var menuId = 'menu' + menuNumber;

if(changeObjectVisibility(menuId, 'visible'))
  {
  var menuTitle = getStyleObject('menuTitle' + menuNumber);
  eventObj.cancelBubble = true;
  return true;
  }
  else
  {
  return false;
  }
}

//---------------------------------------------------------------
// SUB MENU 1 ANZEIGEN
//---------------------------------------------------------------
function showSub1(menuNumber, eventObj)
{
    hideSubMenus();
    var menuId = 'submenu' + menuNumber;
 submenu1.filters.blendTrans.Apply();
 submenu1.style.visibility = "visible";
 submenu1.filters.blendTrans.Play();
 eventObj.cancelBubble = true;
    //alert(menuId);
}

//---------------------------------------------------------------
// SUB MENU 2 ANZEIGEN
//---------------------------------------------------------------
function showSub2(menuNumber, eventObj)
{
    hideSubMenus();
    var menuId = 'submenu' + menuNumber;
 submenu2.filters.blendTrans.Apply();
 submenu2.style.visibility = "visible";
 submenu2.filters.blendTrans.Play();
 eventObj.cancelBubble = true;
    //alert(menuId);
}

//---------------------------------------------------------------
// NORMALE MENUS VERSTECKEN
//---------------------------------------------------------------
function hideAllMenus()
{
    for(counter = 1; counter <= numMenus; counter++)
    {
 changeObjectVisibility('menu' + counter, 'hidden');
    }
}

//---------------------------------------------------------------
// UNTER - MENUS VERSTECKEN
//---------------------------------------------------------------
function hideSubMenus()
{
    for(counter = 1; counter <= numMenus; counter++)
    {
 changeObjectVisibility('submenu' + counter, 'hidden');
    }
}

//---------------------------------------------------------------
// ALLE MENUS VERSTECKEN
//---------------------------------------------------------------
function hideTotalMenus()
{
    for(counter = 1; counter <= numMenus; counter++)
    {
 changeObjectVisibility('menu' + counter, 'hidden');
 }
    for(counter = 1; counter <= numMenus; counter++)
    {
 changeObjectVisibility('submenu' + counter, 'hidden');
    }
}

//---------------------------------------------------------------
// BEI KLICK AUF DOCUMENT ALLE MENUS VERSTECKEN
//---------------------------------------------------------------
document.onclick = hideTotalMenus;

// -->
</SCRIPT>

<link rel="stylesheet" href="style1.css" type="text/css">
<style type="text/css">
<!--
@import url(style.css);
-->
</style>

</HEAD>

<body bgcolor="white">

<div class="menu" id="menu1" onclick="event.cancelBubble ='true';" style="height:96; width:96; position:absolute; left:10; top:37; z-index:1; visibility:hidden">
<table width="100%" style="border:0px none; border-collapse:collapse" cellspacing="0" cellpadding="3">
 <tr>
  <td><a href="#">link 1</a></td>
 </tr>
 <tr>
  <td><a href="#">link 2</a></td>
 </tr>
 <tr>
  <td><a href="#">link 3</a></td>
 </tr>
</table>
</div>

<div class="menu" id="menu2" onclick="event.cancelBubble ='true';" style="height:96; width:90; position:absolute; left:111; top:37; z-index:10; visibility:hidden">
<table width="100%" style="border:0px none; border-collapse:collapse" cellspacing="0" cellpadding="3">
 <tr>
  <td><a href="#" onMouseOver="hideSubMenus()">test 1</a></td>
 </tr>
 <tr>
  <td><a href="#" onMouseOver="return !showSub1('1', event);">test 2</a></td>
 </tr>
 <tr>
  <td><a href="#" onMouseOver="return !showSub2('2', event);">test 3</a></td>
 </tr>
 <tr>
  <td><a href="#" onMouseOver="hideSubMenus()">test 4</a></td>
 </tr>
 <tr>
  <td><a href="#" onMouseOver="return !showSub1('1', event);">test 5</a></td>
 </tr>
 <tr>
  <td><a href="#" onMouseOver="return !showSub2('2', event);">test 6</a></td>
 </tr>
</table>
</div>

<div class="menu" id="submenu1" onclick="event.cancelBubble = 'true';" style="position:absolute; visibility:hidden; left:193; top:77; width:80; z-index:11;">
<table width="97" style="border:0px none; border-collapse:collapse" cellspacing="0" cellpadding="3">
 <tr>
  <td width="91"><a href="#">submen 1 - 1</A></td>
 </tr>
 <tr>
  <td width="91"><a href="#">submen 1 - 2</a></td>
 </tr>
 <tr>
  <td width="91"><a href="#">submen 1 - 3</a></td>
 </tr>
</table>
</div>

<div class=menu id=submenu2 onclick="event.cancelBubble = 'true';" style="height: 66; width:96; position:absolute; left:193; top: 126; visibility:hidden; z-index:12">
<table width="100%" style="border:0px none; border-collapse:collapse" cellspacing="0" cellpadding="3">
 <tr>
  <td><a href="#">submen 2 - 1</a></td>
 </tr>
 <tr>
  <td><a href="#">submen 2 - 2</a></td>
 </tr>
 <tr>
  <td><a href="#">submen 2 - 3</a></td>
 </tr>
</table>
</div>

<div class="head" style="position: absolute; left: 10; top: 15; width: 98; height: 19; z-index:1;">
 
<a onmouseover="return !showMenu('1', event);" href="#"><b>Go</b></a>
</div>

<div class="head" style="position: absolute; left: 111; top: 15; width: 91; height:19; z-index: 1;">
 
<a onmouseover="return !showMenu('2', event);" href="#"><b>Help</b></a>
</div>
---------------------------------------------------------------

das hier ist mein stylesheet

.menu
 {
 border-color: black;
 border-width: 1px;
 border-style: solid;
 z-index: 10;
 visibility: hidden;
 width: 100px;
 position: absolute;
 background-color: #CCCCCC;
 Layer-Background-Color: #CCCCCC;
 Clip: rect(0,200px,100px,0);
    filter: blendTrans(duration=1);
 }

.head
 {
 border-color: black;
 border-width: 1px;
 border-style: solid;
 z-index: 10;
 width: 100px;
 position: absolute;
 background-color: orange;
 }

a
 {
 font-family: verdana;
 font-size: 10px;
 color: #CC0000;
 font-weight:bold;
 text-decoration:none;
 }

a:hover
 {
 font-family: verdana;
 font-size: 10px;
 color: black;
 font-weight:bold;
 text-decoration:none;
 }