Menus in Javascript
Vivian M.
- javascript
Hallöchen!
Ich versuche ein Menu wie folgt aufzubauen:
per in einem <div> liegt ein <img>, das sich, wenn ich mit der Maus rüberfahre, verändert (das klappt so weit mit OnMouseOver). Nu möchte ich allerdings noch, dass sich beim Rüberfahren ein kleines Menu öffnet (ebenfalls in einem <div> - wegen der Positionierung). Kann ich das in einer function definieren (bisher klappt das nicht)?? Oder muss ich da anders an die Sache herangehen?
mfg Vivi M.
P.S.: Bitte keine Mails, kann die von hier nicht abrufen ;)
Hi
Wenn du dich schon ein bischen mit JavaScript auskennst, kann ich dir die Navigation dieser Seite zum Umbau empfehlen:
http://www.nuklearmedizin-stgeorg-leipzig.de/
habe d'ehre
Wenn du dich schon ein bischen mit JavaScript auskennst, kann ich dir die Navigation dieser Seite zum Umbau empfehlen:
http://www.nuklearmedizin-stgeorg-leipzig.de/
Ne, eher nicht!
Was soll ein Menue "only for IE" fuer einen Sinn machen?
Bei Mozilla-Derivaten (1.3, Phoenix, K-Meleon) siehst Du rein gar nichts von diesem "tollen" Menue. ;-)
Was soll ein Menue "only for IE" fuer einen Sinn machen?
Bei Mozilla-Derivaten (1.3, Phoenix, K-Meleon) siehst Du rein gar nichts von diesem "tollen" Menue. ;-)
Sollte schon mit allen Browsern funktionieren und nicht allein auf den IE "optimiert" (schreckliches Wort) werden.
mfg Vivian M.
habe d'ehre
Sollte schon mit allen Browsern funktionieren und nicht allein auf den IE "optimiert" (schreckliches Wort) werden.
Bei Deinem "Problem" musst DU eigentlich nur die <div> zeigen oder verbergen.
function hideNav(divid)
{
if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="hidden";}
if (browser=="Netscape"){document.layers[divid].visibility="hide";}
if (browser=="Explorer"){document.all[divid].style.visibility="hidden";}
}
// einschalten Layer fuer 2.Ebene
function showNav(divid)
{
if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="visible";}
if (browser=="Netscape"){document.layers[divid].visibility="show";}
if (browser=="Explorer"){document.all[divid].style.visibility="visible";}
}
Klappt leider immer noch nicht (stelle mich doof an?), also:
habe das obrige Script soweit eingefügt,
und zusätzlich im <body>-Tag onLoad="hideNav(MenuDiv);" -> MenuDiv ist die id des <div>.
Die <div>, die angesprochen werden sollen stehen alle im Body-Teil.
es tut sich leider nichts, im IE wird in der Statuszeile "Fehler auf der Seite" angegeben.
:(
mfg Vivian M.
habe d'ehre
Klappt leider immer noch nicht (stelle mich doof an?), also:
habe das obrige Script soweit eingefügt,
und zusätzlich im <body>-Tag onLoad="hideNav(MenuDiv);" -> MenuDiv ist die id des <div>.
Die <div>, die angesprochen werden sollen stehen alle im Body-Teil.
es tut sich leider nichts, im IE wird in der Statuszeile "Fehler auf der Seite" angegeben.
Nun ja, gedankenlesen liegt mir fern, die Glaskugel hat heute ihren freien Tag. Ein Link oder der Code wirken in solchen Faellen Wunder.
okay, hier nu ein Auszug aus dem quellcode:
<head>
[...]
<script language="text/javascript">
<!--
// verstecken Layer fuer 2.Ebene
function hideNav(divid)
{
if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="hidden";}
if (browser=="Netscape"){document.layers[divid].visibility="hide";}
if (browser=="Explorer"){document.all[divid].style.visibility="hidden";}
}
// einschalten Layer fuer 2.Ebene
function showNav(divid)
{
if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="visible";}
if (browser=="Netscape"){document.layers[divid].visibility="show";}
if (browser=="Explorer"){document.all[divid].style.visibility="visible";}
}
-->
</script>
</head>
<!--Hintergrundbild ist in portal.css festgelegt-->
<body onLoad="hideNav('MenuDiv');">
<!--wenn der Cursor auf diese Bild zeigt, soll sich ein kleines Menu öffnen-->
<div style="position:absolute; top:50px; left:50px; width:85px; height:85px;"><a href="/navi/punk1.html"><img src="/images/pic1.gif" onMouseOver="this.src='/images/pic1b.gif';showNav('MenuDiv');"
onMouseOut="this.src='/images/pic1.gif';hideNav('MenuDiv');" border="0" alt="punkt1"></a></div>
<!--die ist das menu-->
<div id="MenuDiv" style="position:absolute; top:6px; left:141px; width:84px; height:84px; background-color:white;"></div>
<div style="position:absolute; top:7px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Übersicht</div>
<div style="position:absolute; top:17px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Fotos</div>
<div style="position:absolute; top:27px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Impressum</div>
<div style="position:absolute; top:37px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Kontakt</div>
<div style="position:absolute; top:47px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Forum</div>
<div style="position:absolute; top:57px; left:142px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Diverses</div>
</div>
</body>
ich hoffe weiterhin, dass ich das noch gebacken kriege.. hab bisher eigentlich gedacht, dass es nicht so kompliziert wird... :/
mfg Vivian M. ;)
habe d'ehre
<script language="text/javascript">
Fehler 1
<script language="javascript" type="text/javascript">
<div id="MenuDiv" style="position:absolute; top:6px; left:141px; width:84px; height:84px; background-color:white;"></div>
Fehler 2
Du schliesst hier den <div>
Dein Menue wird dadurch nicht mehr ueber "MenuDiv" ansprechbar
Fehler 3
Dier fehlt
var browser , os , version ;
if (document.getElementById)
{browser = 'W3Cdom';}
if (document.layers)
{browser = 'Netscape';}
if (document.all && !document.getElementById)
{browser = 'Explorer';}
Fehler 2
Du schliesst hier den <div>
Dein Menue wird dadurch nicht mehr ueber "MenuDiv" ansprechbar
immerhin dieser Fehler war mir bewusst :) das habe ich lediglich erst einmal provisorisch so gelassen. Funktioniert jetzt soweit. Habe damit schon fast geschafft was ich heute schaffen wollte (habe noch 2 andere Navigationen implementiert).
Vielen Dank Wilhelm für deine Hilfe, ich hoffe, dass ich das auch mal problemloser hinkriegen werde (fleißig am Üben bin ich ja schon).
mfg Vivian M. :)
habe d'ehre
und zusätzlich im <body>-Tag onLoad="hideNav(MenuDiv);" -> MenuDiv ist die id des <div>.
dann hideNav('MenuDiv');
Hi,
Nu möchte ich allerdings noch, dass sich beim Rüberfahren ein kleines Menu öffnet (ebenfalls in einem <div> - wegen der Positionierung). Kann ich das in einer function definieren (bisher klappt das nicht)?
Eine wird da nicht langen... hier habe ich noch einen test rumliegen, der Dir _einen_ Loesungsansatz aufzeigt: http://www.wendenburg.de/test/divNaviStat.html
Problem bei solchen Menues ist oft dass sie vorzeitig zuklappen, weil die Mausbewegung auf einen Link ebenfalls als Div-Mouseout interpretiert wird. Hier wird nach einem Timeout nochmals auf Mousebewegung im Div geprueft, bevor das Div wieder versteckt wird
hth & Gruesse Joachim
soo, ich danke dir erstmal für deine Hilfe.
Werde mal versuchen, das auf meine Verwendung anzupassen, auch wenn es sehr kompliziert aussieht.
mfg Vivian M.