submenue per mouseover

grete · 12 März 2008

Guten Tag,
ich möchte für eine Freundin eine attraktivere Wesite für ihre Homepage gestalten. Mein neues Design überzeugt mich schon, ist aber in erster Linie reines HTML. Für eine komfortablere Navigation wollte ich nun aber doch gern mittels javascript kleine Submenues bei mouseover erscheinen lassen. Für mein Programm (ich arbeite noch mit Uli Meybohms Phase 5) und im dortigen Fenster habe ich erfolgreich einen Code platziert und es sieht so aus, wie ich will. Aber in jedem anderen Browser erscheinen die Submenues zwar in der richtigen Höhe, aber nicht beim entsprechenden Hauptmenue-Punkt, sondern irgendwie vertikal verschoben. Mir ist zwar klar, dass das an der Bildschirmbreite und an meiner zentriert positionierten Tabelle liegt, aber wie kann ich es anstellen, dass die Submenues jeweils am richtigen Ort auftauchen? Puh... lange Erklärung... Ich kopiere den Code mal auszugsweise (Javascipt und entspr. Stelle aus der Tabelle) hier hinein:

<script language="javascript1.2" type="text/javascript">

var aktiv = true; // helps mac-nc4 to deal with clearTimeout
var delay = null; // timeout-handle
var delayDur = 200; // delay after mouseout - you can modify here - not less then 50 ms
var navMax = 4; // how many menues?
var elM = false; // flag - keeps open submenue

// initialize menue
// register mouseout and mousemove events
function startNavi () {
// loop through all navi-divs until navMax
// keep it simpel: use the same names an add "i"
for(var i = 0; i < navMax; i++) {
if(nc){
dRef('subDiv' + i).captureEvents(Event.MOUSEOUT | Event.MOUSEMOVE);
dRef('mainDiv' + i).captureEvents(Event.MOUSEOUT);
}
dRef('subDiv' + i).onmouseout = initHiding;
dRef('subDiv' + i).onmousemove = checkHiding;
dRef('mainDiv' + i).onmouseout = initHiding;
}
}

// called when mouseout over div-layer was fired
// starting hiding-process of a submenue
function initHiding (e) {
// in case of very slow mousemoves nc4 does not notice mousemove within the delay
// loop throught all links of the layer to make shure not a link is the target
if (nc && typeof document.layers[elM] != "undefined") {
for (var i = 0; i < dRef(elM).document.links.length; i++) {
if (e.target == dRef(elM).document.links) return;
}
}
elPast = elM
if(aktiv) {
// call off - but wait for a time an check for mousemoves
delay = setTimeout('off()', delayDur);
aktiv = false;
}
}

// called when mousemove over div-layer was fired
// clearing the hiding-process in case of mousemove within the div-layer
function checkHiding (e) {
elM = this.id;
if(!aktiv) {
// stop hiding
clearTimeout(delay);
aktiv = true;
}
}

// hide submenue
function off (){
if(elPast) dRefS(elPast).visibility = "hidden";
}

// open submenue - close other open submenue
function on (num){
if(!aktiv) {
clearTimeout(delay);
aktiv = true;
}
if(elM && elM != "subDiv" + num) dRefS(elM).visibility = "hidden";
dRefS("subDiv" + num).visibility = "visible";
elM = "subDiv" + num;
}

// some known objects
var nc = !!(document.captureEvents && !document.getElementById);
var nc6 = !!(document.captureEvents && document.documentElement);
var op6 = !!(document.getElementById && !document.documentElement);
var op7 = !!(window.opera && /Opera( |\/)7/i.exec(navigator.userAgent));
var ie = !!document.all;
var ie4 = !!(document.all && !document.documentElement);
var ie5 = !!(document.all && document.documentElement);
var dom = !!document.getElementById;
var mac = !!(navigator.userAgent.indexOf("Mac")!=-1);

// div-layer referenzieren
function dRef(num) {return (nc? document.layers[num] : (ie4? document.all[num] : document.getElementById(num)))}
function dRefS(num) {return (nc? document.layers[num] : (ie4? document.all[num].style : document.getElementById(num).style))}

</script>

</head>

<body onload="startNavi()" text="#344674" bgcolor="#F4D364" link="#AE0000" alink="#F3A501" vlink="#AE0000">
 
<table cellspacing="2" width="596" border="0" bgcolor="#FFFFAE" align="center" >

...Hier steht jetzt die ganze Tabellendefinition, der erste Inhalt...


<tr valign="top" height="22" >
<td valign="top" height="22" width="146" bgcolor="#F4D364" align="center">

<div class="stil1" id="mainDiv0"><a href="index.html" class="stil1" onmouseover="on(0)">Ferienwohnungen</a></div>
<div id="subDiv0">
<a class="stil2" href="helena.html">Helena</a><br>
<a class="stil2" href="pegasus.html">Pegasus</a><br>
<a class="stil2" href="orion.html">Orion</a>
</div>

</td>
<td height="22" width="146" bgcolor="#F4D364" align="center" >

<div class="stil1" id="mainDiv1"><a href="../galerie/index.html" class="stil1" onmouseover="on(1)">Galerie</a></div>
<div id="subDiv1">
<a class="stil2" href="#">Hans Schott</a><br>
<a class="stil2" href="#">Ausstellungen</a><br>
<a class="stil2" href="#">Bilderschau</a>
</div>
</td>
<td height="22" width="146" bgcolor="#F4D364" align="center">
<div class="stil1" id="mainDiv2"><a href="../umgebung/index.html" class="stil1" onmouseover="on(2)">Umgebung</a></div>
<div id="subDiv2">
<a class="stil2" href="#">Alte Ziegelei</a><br>
<a class="stil2" href="#">Müritz-Region</a><br>
<a class="stil2" href="#">Was noch</a>
</div>

</td>
<td height="22" width="146" bgcolor="#F4D364" align="center">
<div class="stil1" id="mainDiv3"><a href="../kontakt/index.html" class="stil1" onmouseover="on(3)">Kontakt</a></div>
<div id="subDiv3">
<a class="stil2" href="#">Kontakt/Impres.</a><br>
<a class="stil2" href="#">Anfahrt</a><br>
<a class="stil2" href="#">Buchung</a>
</div>

</td>
</tr>

Es wäre schön, wenn mir jemand helfen könnte...

Grete

submenue per mouseover

grete

Neues Mitglied

Neueste Beiträge