HTML-Code

[mgeidl]

Hallöchen!

Schön langsam wird´s Euch wahrscheinlich schon reichen, aber ich hab mit meinem Intranet wieder ein Problem. Aber vielleicht hat ja jemand Mitleid mit einer reinen Notes-DB Programmiererin die Ihre ersten Schritte in die Webentwicklung wirft.

Ich hab jetzt mit HTML (was ich halt davon verstehe) Buttons mit Pulldown-Menü´s gestrickt. Die sollen bei onMouseOver bzw. onClick aufgehen, das tun sie ja. Allerdings verschwinden Sie nicht, bzw. bleiben stehen, obwohl man mit der Maus beim nächsten Button auf einen Menüpunkt klickt.

Folgenden Code hab ich in den JS-Kopfzeilen:

var refer1=true;
var refer2=true;
var refer3=true;
var refer4=true;
var refer5=true;

function combo1() {
if (refer1) {
  document.all.contents1.style.visibility="visible";
  refer1=false;
}
else {
  document.all.contents1.style.visibility="hidden";
refer1=true;
}
}
function combo2() {
if (refer2) {
document.all.contents2.style.visibility="visible";
  refer2=false;
}
else {
document.all.contents2.style.visibility="hidden";
refer2=true;
}
}

function combo3() {
if (refer3) {
 document.all.contents3.style.visibility="visible";
  refer3=false;
}
else {
document.all.contents3.style.visibility="hidden";
refer3=true;
}
}

function combo4() {
if (refer4) {
 
document.all.contents4.style.visibility="visible";
   refer4=false;
}
else {
document.all.contents4.style.visibility="hidden";
refer4=true;
}
}

function combo5() {
if (refer5) {

 document.all.contents5.style.visibility="visible";
  refer5=false;
}
else {
document.all.contents5.style.visibility="hidden";

refer5=true;
}
}

Und die Seite sieht dann so aus:

<table align="left">
<tr><td>
<table width="100" border="1" cellspacing="0" cellpadding="0"
bordercolor="#D7D7D7">
  <tr>

    <td align="right" width="21">
      <img src="news_r.gif?OpenImageResource" name="combo_arrow" width="130" height="30"
alt="" border="0" onmouseover="combo1()" onmouseout="combo1()"></td>
 
   <td align="right" width="21">
      <img src="company_r.gif?OpenImageResource" name="combo_arrow" width="130" height="30"
alt="" border="0" onmouseover="combo2()" onmouseout="combo2()"></td>

   <td align="right" width="21">
      <img src="Produkte_r.gif?OpenImageResource" name="combo_arrow" width="130" height="30"
alt="" border="0" onmouseover="combo3()" onmouseout="combo3()" ></td>

   <td align="right" width="21">
      <img src="Support_r.gif?OpenImageResource" name="combo_arrow" width="130" height="30"
alt="" border="0" onmouseover="combo4()" onmouseout="combo4()" ></td>

   <td align="right" width="21">
      <img src="Forum_r.gif?OpenImageResource" name="combo_arrow" width="130" height="30"
alt="" border="0" onmouseover="combo5()" onmouseout="combo5()" ></td>

<A>
  </tr>
</table>
</table>

<div id="contents1" style="position:absolute; left:13px; top:50px; width:0px;
height:100px; z-index:1; visibility:hidden" onclick="combo1()" onMouseOver="combo1()" onMouseOut="combo1()">
  <table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#D7D7D7">
  <tr>
    <td bgcolor="D7D7D7">
      <font face="verdana" size="2">
      <A href="http://rfkpsrv1/roto/Intranet/I_News.nsf/News?OpenFrameset" target="_top"> <img src="actn149.gif" border="0" width="8" height="8">  Company News</A><br>
      <A href="http:ShowContent?Openform&kat=Test" target="Right"> <img src="actn149.gif" border="0" width="8" height="8">  Pinnwand</A><br>
      <a href="http://webhost.thelist.com/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Menu 3</a><br></font>
    </td>
  </tr>
</table>
</td></tr>

<div id="contents2" style="position:absolute; left:133px; top:0px;width:200px;
height:100px; z-index:1; visibility:hidden" onclick="combo2()" onMouseOver="combo2()" onMouseOut="combo2()">
  <table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#D7D7D7">
  <tr>
    <td bgcolor="D7D7D7">
      <font face="verdana" size="2">
      <a href="http://rfkpsrv1/roto/Intranet/I_News.nsf" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Organisation</a><br>
      <a href="http://www.wdvl.com/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8"> Belegschaft</a><br>
      <a href="http://rfkpsrv1/names.nsf/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Adressbuch</a><br></font>
    </td>
  </tr>
</table>
</td></tr>

<div id="contents3" style="position:absolute; left:133px; top:0px;width:200px;
height:100px; z-index:1; visibility:hidden" onclick="combo3()" onMouseOut="combo3()">
  <table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#D7D7D7">
  <tr>
    <td bgcolor="D7D7D7">
      <font face="verdana" size="2">
      <a href="http://rfkpsrv1/roto/Intranet/I_News.nsf" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Roto Produkthierarchie</a><br>
      <a href="http://www.wdvl.com/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8"> Belegschaft</a><br>
      <a href="http://rfkpsrv1/names.nsf/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Adressbuch</a><br></font>
    </td>
  </tr>
</table>
</td></tr>

<div id="contents4" style="position:absolute; left:133px; top:0px;width:200px;
height:100px; z-index:1; visibility:hidden" onclick="combo4()" onMouseOut="combo4()">
  <table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#D7D7D7">
  <tr>
    <td bgcolor="D7D7D7">
      <font face="verdana" size="2">
      <a href="http://rfkpsrv1/roto/Intranet/I_News.nsf" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Downloads/Dokumentation </a><br>
      <a href="http://www.wdvl.com/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8"> Grafik-Bibliothek </a><br>
      <a href="http://rfkpsrv1/names.nsf/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Wissensdatenbank </a><br></font>
    </td>
  </tr>
</table>
</td></tr>

<div id="contents5" style="position:absolute; left:133px; top:0px;width:200px;
height:100px; z-index:1; visibility:hidden" onclick="combo5()" onMouseOut="combo5()">
  <table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#D7D7D7">
  <tr>
    <td bgcolor="D7D7D7">
      <font face="verdana" size="2">
      <a href="http://rfkpsrv1/roto/Intranet/I_News.nsf" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  Quatsch-Quatsch</a><br>
      <a href="http://www.wdvl.com/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8"> nix do </a><br>
      <a href="http://rfkpsrv1/names.nsf/" target="_blank"> <img
src="actn149.gif" border="0" width="8" height="8">  jo mei </a><br></font>
    </td>
  </tr>
</table>
</td></tr>
</A>

[harkpabst_meliantrop]

Ich hoffe du verzeihst mir, wenn ich das Beispiel nicht komplett nachvollzogen habe, aber der Trick ist folgender:

Du musst natürlich immer dann, wenn du die visibility eines Objekts auf visible setzt immer auch die visibility aller anderen wieder auf hidden setzen. Das passiert nicht von alleine (und dank JS wird die Seite ja nicht neu vom Server geladen, das ist ja gerade das Gute daran).

[mgeidl]

Hi!

Hab das in der JS-Kopfzeile jetzt geändert, die Frage ist nur, wie er´s haben will. Ich hab jetzt immer zuerst den vilible und dann die anderen hidden.

Wenn ich nun aber beim zweiten Button aus dem Menü was anklicken will, hüpft das erste Menü raus!?!?!?!??!

Bin mit meinem Latein am Ende

[harkpabst_meliantrop]

Ich sehe gerade, du hast im onMouseOver und onMouseOut immer dieselben Funktionsaufrufe stehen. So kann das eigentlich nicht funktionieren.

Wenn ein Element unsichtbar werden soll, sobald der Mauszeiger herausgeführt wird, dann muss im onMouseOut (und nur da) einfach eine Funktion stehen, die visibilty auf hidden setzt.

Wenn ein Element erst dann unsichtbar werden soll, wenn der Mauszeiger auf eine anderes Element geht, muss der Code zum verstecken in die Funktion für das andere Element.

Ich würde es aber sowieso anders machen. Nutze doch die Möglichkeit, Parameter zu übergeben, anstatt für jedes Element eine eigene Funktion zu schreiben. Eine Möglichkeit wäre zum Beispiel, ganz simpel zwei Standardfunktionen zu verwenden, etwa:

function hide(obj)
{
   obj.style.display = "none";
   obj.style.visibility = "hidden";
}

function show(obj)
{
   obj.style.display = "";
   obj.style.visibility = "visible";
}


Deine Objekte stehen ja, wenn ich das richtig gesehen habe, schon in DIVs mit eigenen IDs. Dann würdest du in jedes onMouseOver einfach etwas in der Art schreiben:

show(contents2);
hide(contents1);
hide(contents3);
hide(contents4);
hide(contents5);


contents1 ... bis contents5 kannst du sofort so innerhalb des JavaScripts verwenden, die müssen nicht nochmal extra definiert oder aus der Form ermittelt werden.

Und wenn ein Element zugeklappt werden soll, sobald der Mauszeiger es verlässt, zusätzlich noch ein hide ins onMouseOut.

Das alles ist erstmal nur für den Internet Explorer richtig. In Netscape 4 muss man's anders machen, welche Änderunen für NS6/7 evtl nötig wären, darüber möchte ich gerade nicht nachdenken... kann aber auch sein, dass es sofort geht.

Es gäbe noch viele Möglichkeiten, das ganze etwas eleganter zu machen, aber so sollte es jedenfalls gehen.

[mgeidl]

Hallo!

Brauch ich da im JS-Kopfzeile die var refer1.... nicht oder doch??

Ich hab da überhaupt keinen Plan. Was sag ich ihm bei onClick auf den Button, wenn ich die combo1.. nicht mehr im JS deklariert habe?