Ich brauch schon wieder Hilfe...

Stephanie · 04.06.2004, 22:57

Ich versuche den ganzen Tag hinter das Geheimnis dieser Navigation zu kommen: http://www.falconsahl.com/
Das ist die einzige Navi in der Art die ich finden konnte, die auch mit abgeschalteten JS funktioniert. Leider bekomme ich es nicht geregelt sie auf einer eigenen Seite einzubinden. Ich habe Quelltext studiert, Quelltext geklaut

, versucht nachzubauen...ich raff es nicht. Das einzige was ich ersehen konnte war, daß es sich hier um Grafiken handelt, die bei Mouseover einen Layer mit Textlinks anzeigen. Das kriege ich ja noch hin, auch daß die Layer wieder verschwinden. Ohne JS geht da aber trotzdem nix bei meiner Navi. Hier wäre der Code:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Unbenanntes Dokument</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_showHideLayers() { //v6.0

  var i,p,v,obj,args=MM_showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

    obj.visibility=v; }

}

//-->

</script>

</head>



<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="Layer1" style="position:absolute; left:0px; top:27px; width:501px; height:15px; z-index:1; visibility: hidden;"><a href="#">link</a>  - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a></div>

<div id="Layer2" style="position:absolute; left:0px; top:27px; width:502px; height:15px; z-index:2; background-color: #336666; layer-background-color: #336666; border: 1px none #000000; visibility: hidden;"><a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a></div>

<div id="Layer3" style="position:absolute; left:0px; top:27px; width:500px; height:15px; z-index:3; background-color: #3366FF; layer-background-color: #3366FF; border: 1px none #000000; visibility: hidden;"><a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a></div>

<div id="Layer4" style="position:absolute; left:0px; top:27px; width:499px; height:15px; z-index:4; background-color: #FF6633; layer-background-color: #FF6633; border: 1px none #000000; visibility: hidden;"><a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a></div>

<div id="Layer5" style="position:absolute; left:0px; top:27px; width:489px; height:24px; z-index:5; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; visibility: hidden;"><a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a></div>

<div id="Layer6" style="position:absolute; left:0px; top:27px; width:505px; height:10px; z-index:6; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000; visibility: hidden;"><a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a> - <a href="#">link</a></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr background="m2img/blank.gif">

    <td><div align="center"><img src="m2img/1.gif" width="125" height="27"></div></td>

    <td><div align="center"><img src="m2img/2.gif" width="125" height="27" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide')"></div></td>

    <td><div align="center"><img src="m2img/3.gif" width="125" height="27" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide')"></div></td>

    <td><div align="center"><a href="javascript:;" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show','Layer5','','hide','Layer6','','hide')"><img src="m2img/4.gif" width="125" height="27" border="0"></a></div></td>

    <td><div align="center"><img src="m2img/5.gif" width="125" height="27" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','show','Layer6','','hide')"></div></td>

    <td><div align="center"><img src="m2img/6.gif" width="125" height="27" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','show')"></div></td>

  </tr>

  <tr>

    <td colspan="6">&nbsp;</td>

  </tr>

</table>

</body>

</html>

Was ist bei der oben im Link befindlichen Navi anders als bei anderen da sie auch ohne aktivierten JS funzt? Weiß irgendwer eine Anleitung zu einer derartigen Navi? Habe ich irgendwas wichtiges bei mir vergessen?

Karsten Müller · 05.06.2004, 09:46

Guten Tag.

Und du bist dir ganz sicher, dass die Navigation auch mit ausgeschaltetem Javascript funktioniert? Bei mir tut sie das nämlich (erwartungsgemäß) nicht.

Getestet mit Safari unter Mac OS X - und womit hast du getestet?

Beste Grüße . . . Karsten

Stephanie · 05.06.2004, 10:23

Ich bin meine gesamten Linklisten mit Mozilla Firefox mit deaktiviertem Java Script abgegangen, da habe ich die als einzig funktionsfähige Seite entdeckt. Zwar geht es nicht mit Mouseover sondern die Unterlinks öffnen sich nach einem Klicken auf den oberen Link

CharlyB · 05.06.2004, 17:16

öhmm... kann das sein dass die einfach dem anker in dem das bild sitzt ein href="" mitgegeben haben, der einfach auf eine seite verlink in der die hover-schaltflächen in purem html dargestellt sind!? oder habe ich dich falsch verstanden...!?

Stephanie · 05.06.2004, 17:46

Zitat:

Zitat von CharlyB

öhmm... kann das sein dass die einfach dem anker in dem das bild sitzt ein href="" mitgegeben haben, der einfach auf eine seite verlink in der die hover-schaltflächen in purem html dargestellt sind!? oder habe ich dich falsch verstanden...!?

Wenn ich das mal wüsste...
So richtig schlau bin ich aus dem Quelltext nicht geworden. Aber das scheint die Erklärung zu sein. Die Unterpunkte scheinen auf der aufzurufenden Seite eingebaut zu sein.
Das wäre ja schon mal eine Lösung...

CharlyB · 05.06.2004, 18:28

guckst du da:

HTML-Code:

<a href="/roster.shtml" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_falcons','','/images/nav_falcons_f2.jpg',1);MM_showHideLayers('f1','','show','f2','','hide','f3','','hide','f4','','hide','f5','','hide','f6','','hide','f7','','hide','f8','','hide','f9','','hide')">
<img src="/images/nav_falcons.jpg" alt="" name="nav_falcons" width="94" height="18" border="0"></a>

wenn Maus drauf dürfte die untere Navigation aufrollen und bei klick kommst du hier hin: http://www.falconsahl.com/roster.shtml wobei da die Unterpunkte zu sehen sind.

Stephanie · 05.06.2004, 19:36

Das haben sie ja echt geschickt gelöst...
Danke für den Tipp, das probier ich doch glatt mal - das ist die perfekte Lösung

Stephanie · 06.06.2004, 13:09

So, nun habe ich es tatsächlich fast richtig hinbekommen. Bis auf einen kleinen Schönheitsfehler:
Die Ebenen die ich mit einem Mouseover einblende wollen nicht verschwinden wenn ich mit onClick die Unterseite aufrufe. Die Ebene steht immer über der in der Unterseite enthaltenen Navigationsleiste.
Dabei habe ich dem jeweiligen Link das Verhalten "Ebene ein/ausblenden" bei onClick gegeben, bei dem ich alle Ebenen ausblenden lasse. Haut irgendwie nicht hin, schaut selbst: http://www.fanclubgrizzlyadams.de/navi/index.php
Im Mozilla mit deaktivierten JS klappt es hervorragend

Da bin ich mal richtig stolz auf mich...nur der IE ist nun etwas verwirrt...

Wie bekomme ich die Ebenen die bei MouseOver eingeblendet werden bei Klick auf den Link wieder weg???

LG,
Steffi

Stephanie · 06.06.2004, 19:02

So langsam entwickelt es sich in die Richtung die ich haben möchte, nur sieht es immer noch irgendwie komisch aus. Irgendwas haut da noch nicht hin, aber was?

CharlyB · 08.06.2004, 08:22

also ich habe nicht wirklich viel ahnung von js aber vielleicht einfach auf der aufgerufenen zwischenseite mit onload nochmals versuchen die ebene auszublenden.
außerdem würde ich das js-menue auf den zwischenseiten (also dort wo man mit klick auf hauptnavi hinkommt) nicht mehr einblenden. (da wenn der besucher klickt man davon ausgehen kann, das er kein js aktiviert hat)

jan