navigator ausrichten...
timo weber
- dhtml
ich will folgenden navigator so umbauen, das sich die Menüpunkte unereinander bei Mousover öffne und die restlichen Menüpunkte dann nach unten verschoben werden....weiß jemand wie das geht, oda kann mir jemand meinen script umschreiben???hier ist der quelltext(noch nicht fertig, top: ist noch nicht richtig umgestellt!!!):
<style type="text/css"> a:link { font-weight:bold; color:#AA0040; text-decoration:none; } a:visited { font-weight:bold; color:#AA0040; text-decoration:none } a:hover { font-weight:bold; color:#000066; text-decoration:none; } a:active { font-weight:bold; color:#AA0040; text-decoration:none } a:focus { font-weight:bold; color:#AA0040; text-decoration:none } </style>
<style type="text/css"> body, textarea { scrollbar-base-color:#C3B2B5; scrollbar-3dlight-color:#C3B2B5; scrollbar-arrow-color:#C3B2B5; scrollbar-darkshadow-color:#C3B2B5; scrollbar-face-color:#C3B2B5; scrollbar-highlight-color:#C3B2B5; scrollbar-shadow-color:#C3B2B5; scrollbar-track-color:#C3B2B5; } </style>
</head><body bgcolor="#C3B2B5" text="#000066" link="#AA0040" vlink="#AA0040" alink="#AA0040">
<p> </p> <script language="JavaScript">
function clean () { if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5')) { window.document.b.visibility="hide"; window.document.m1.visibility="hide"; window.document.m2.visibility="hide"; window.document.m3.visibility="hide"; window.document.m4.visibility="hide"; window.document.m5.visibility="hide"; return; } if (navigator.appVersion.charAt (0)<'5') { var layers=document.all.tags ("div"); } else { var layers=document.getElementsByTagName("div"); } layers[0].style.visibility='hidden'; layers[2].style.visibility='hidden'; layers[4].style.visibility='hidden'; layers[6].style.visibility='hidden'; layers[8].style.visibility='hidden'; layers[10].style.visibility='hidden'; return; }
function menu (i) {
switch(i) { case 1: { if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5')) { window.document.b.visibility="show"; window.document.m1.visibility="show"; window.document.m2.visibility="hide"; window.document.m3.visibility="hide"; window.document.m4.visibility="hide"; window.document.m5.visibility="hide"; return; } if (navigator.appVersion.charAt (0)<'5') { var layers=document.all.tags ("div"); } else { var layers=document.getElementsByTagName("div"); } layers[0].style.visibility='visible'; layers[2].style.visibility='visible'; layers[4].style.visibility='hidden'; layers[6].style.visibility='hidden'; layers[8].style.visibility='hidden'; layers[10].style.visibility='hidden'; return; } case 2: { if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5')) { window.document.b.visibility="show"; window.document.m1.visibility="hide"; window.document.m2.visibility="show"; window.document.m3.visibility="hide"; window.document.m4.visibility="hide"; window.document.m5.visibility="hide"; return; } if (navigator.appVersion.charAt (0)<'5') { var layers=document.all.tags ("div"); } else { var layers=document.getElementsByTagName("div"); } layers[0].style.visibility='visible'; layers[2].style.visibility='hidden'; layers[4].style.visibility='visible'; layers[6].style.visibility='hidden'; layers[8].style.visibility='hidden'; layers[10].style.visibility='hidden'; return; } case 3: { if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5')) { window.document.b.visibility="show"; window.document.m1.visibility="hide"; window.document.m2.visibility="hide"; window.document.m3.visibility="show"; window.document.m4.visibility="hide"; window.document.m5.visibility="hide"; return; } if (navigator.appVersion.charAt (0)<'5') { var layers=document.all.tags ("div"); } else { var layers=document.getElementsByTagName("div"); } layers[0].style.visibility='visible'; layers[2].style.visibility='hidden'; layers[4].style.visibility='hidden'; layers[6].style.visibility='visible'; layers[8].style.visibility='hidden'; layers[10].style.visibility='hidden'; return; } case 4: { if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5')) { window.document.b.visibility="show"; window.document.m1.visibility="hide"; window.document.m2.visibility="hide"; window.document.m3.visibility="hide"; window.document.m4.visibility="show"; window.document.m5.visibility="hide"; return; } if (navigator.appVersion.charAt (0)<'5') { var layers=document.all.tags ("div"); } else { var layers=document.getElementsByTagName("div"); } layers[0].style.visibility='visible'; layers[2].style.visibility='hidden'; layers[4].style.visibility='hidden'; layers[6].style.visibility='hidden'; layers[8].style.visibility='visible'; layers[10].style.visibility='hidden'; return; }
case 5: { if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5')) { window.document.b.visibility="show"; window.document.m1.visibility="hide"; window.document.m2.visibility="hide"; window.document.m3.visibility="hide"; window.document.m4.visibility="hide"; window.document.m5.visibility="show"; return; } if (navigator.appVersion.charAt (0)<'5') { var layers=document.all.tags ("div"); } else { var layers=document.getElementsByTagName("div"); } layers[0].style.visibility='visible'; layers[2].style.visibility='hidden'; layers[4].style.visibility='hidden'; layers[6].style.visibility='hidden'; layers[8].style.visibility='hidden'; layers[10].style.visibility='visible'; return; } }
}
</script> <font color="000066" face="century gothic" size"1"> <span style="font-size:12pt">
<div id="b" style="position:absolute; left:10px; top:2px; width:340px; height:170px; z-index:1; visibility: hidden"> <a href="#" onmouseover="clean()" onmouseout="clean()"> </a> </div>
<div id="h1" style="position:absolute; left:10px; top:5px; width:100px; height:25px;z-index:2; visibility: visible"> <a href="#" onmouseover="menu(1)">Die Firma</a> </div>
<div id="m1" style="position:absolute; left:15px; top:7px; width:200px; height:50px; z-index:3; visibility: hidden" > <a href="firmengeschichte.htm" target="haupt">Firmgeschichte</a><br> <a href="firmenprofil.htm" target="haupt">Firmenprofil</a><br> <a href="news.htm" target="haupt">Haseborg News</a><br> </div>
<div id="h2" style="position:absolute; left:10px; top:20px; width:100px; height:25px; z-index:4; visibility: visible"> <a href="hintergrund.htm" onmouseover="menu(2)">Hintergrund</a></div>
<div id="m2" style="position:absolute; left:15px; top:20px; width:200px; height:150px; z-index:5; visibility: hidden"> <a href="rundgang.htm" target="haupt">Rundgang durch die Werkstatt</a><br> <a href="links.htm" target="haupt">Links für Orgelfreunde</a><br> <a href="#" target="haupt">Gästebuch</a><br> </div>
<div id="h3" style="position:absolute; left:10px; top:25px; width:100px; height:25px; z-index:6"> <a href="#" onmouseover="menu(3)">Referenzliste</a> </div>
<div id="m3" style="position:absolute; left:15px; top:30px; width:200px; height:150px; z-index:7; visibility: hidden"> <a href="neubauten.htm" target="haupt">Neubauten</a><br> <a href="restaurierungen.htm" target="haupt">Restaurierungen</a><br>
</div>
<div id="h4" style="position:absolute; left:10px; top:35px; width:100px; height:25px; z-index:7"> <a href="#" onmouseover="menu(4)">Audio</a> </div>
<div id="m4" style="position:absolute; left:15px; top:40px; width:200px; height:150px; z-index:8; visibility: hidden"> <a href="hoerbeispiele.htm" target="haupt">Hörbeispiele</a><br>
</div>
<div id="h5" style="position:absolute; left:10px; top:45px; width:100px; height:25px; z-index:7"> <a href="#" onmouseover="menu(5)">Kontakt</a> </div>
<div id="m5" style="position:absolute; left:15px; top:50px; width:150px; height:150px; z-index:8; visibility: hidden"> <a href="info.htm" target="haupt">Informationen</a><br> <a href="shop.htm" target="haupt">Shop</a><br> <a href="mail.htm" target="haupt">e-mail</a><br> </span> </font>
</table> </body>
danke, ach wie mach ich einen linnk zu einer datei wo die CSS Stylesheets drinne stehen????
greetz aus A´fehn
Timo weber
hallo timo,
ich will folgenden navigator so umbauen, das sich die Menüpunkte unereinander bei Mousover öffne und die restlichen Menüpunkte dann nach unten verschoben werden....weiß jemand wie das geht, oda kann mir jemand meinen script umschreiben???
ziemlich exakt dieselbe Frage hast du gestern bereits gestellt, der kleine Thread befindet sich noch in der Forumsdatei. Bitte stelle erst wieder Nachfragen, wenn du etwas Neues nachzufragen hast.
Und: _ganz so viel_ Quelltext ist nicht nötig.
Christoph S.
hi
ziemlich exakt dieselbe Frage hast du gestern bereits gestellt, der kleine Thread befindet sich noch in der Forumsdatei. Bitte stelle erst wieder Nachfragen, wenn du etwas Neues nachzufragen hast.
ach daher kenne ich diese umständliche Netscape 4-Abfrage *g*
Grüße aus Lüneburg
Kai
hi
scrollbar-base-color:#C3B2B5;
scrollbar-3dlight-color:#C3B2B5;
scrollbar-arrow-color:#C3B2B5;
scrollbar-darkshadow-color:#C3B2B5;
scrollbar-face-color:#C3B2B5;
scrollbar-highlight-color:#C3B2B5;
scrollbar-shadow-color:#C3B2B5;
scrollbar-track-color:#C3B2B5;
soll das die Scrollbar komplett tarnen?
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5'))
umständlich:
if(document.layers) tut's auch.
Zu deinen eigentlichen Problem:
mit dem Ändern von visibility: geht das nicht, da nuss display geändert werden (weg -> display:none; da -> display:block). Ansonsten musst du die Elemente einfach nur in der HTML-Datei untereinander setzen.
ACHTUNG: damit sperrst du Opera-User fast sicher aus, da der display: nicht dynamisch ändern kann!
Grüße aus Bleckede
Kai
wie soll das gehen mit dem befehl display??? hab kein plan davon, kannst du es mir vielleicht mal erklären????
wie kann man sonst ne scrollbar unsichtbar machen????
greetz
timo w.
hallo timo,
wie soll das gehen mit dem befehl display??? hab kein plan davon, kannst du es mir vielleicht mal erklären????
da gibts in der Tat ein gewisses Verständigungsproblem. Für "display" liest du bitte mal http://selfhtml.teamone.de/navigation/quickbar/index.htm nach.
wie kann man sonst ne scrollbar unsichtbar machen????
Es geht nicht um die scrollbar, sondern um die von dir verwendeten layer.
Das angesprochene "Problem":
du versuchst, mit
layers[0].style.visibility='hidden';
die von dir eingesetzten layer sichtbar/unsichtbar zu machen. Das funktioniert auch. Aber du verwendest damit Javascript-Syntax, und wendest sie auf mit CSS formatierte Elemente an. Man kann das umgehen, indem man gleich die CSS-Syntax "display" einsetzt, womit aber wiederum nicht alle Browser gleich gut zurechtkommen.
Kai hat dir einen durchaus beherzigenswerten Rat gegeben, der allerdings eine _vollkommen_ andere Scriptstruktur voraussetzt. So, wie dein Script jetzt aussieht, brauchst du nicht auf "display" auszuweichen, die von dir jetzt eingesetzte Technik funktioniert in allen Browsern (außer Netscape 4.x).
Allerdings würde sich dein beträchtlicher Schreibaufwand noch erheblich "eindampfen" lassen, und ich möchte beinahe annehmen, daß du das Script irgendwo "abgeschrieben" hast. Das ist ja durchaus zulässig, aber du müßtest dich auch bemühen, zu verstehen, welche Technologie du da einsetzt.
Christoph S.
BTW: du hast dich zwischendurch mit einer mail an mich gewandt - ich habe nicht per mail geantwortet, weil ich dir hier im Forum antworten wollte und außerdem nach der mail nicht gleich wußte, was dein Anliegen war. Ich gebe meine mail-Adresse an, damit man sich bei Nachfragen, die nicht (oder nicht mehr) im Forum geklärt werden können, auf diesem Weg mit mir verständigen kann. Das war aber _hier_ noch nicht der Fall