✔ Aktiver Link in JS-Menu

H

herrgarnele

Erfahrenes Mitglied
Hallo zusammen!
Vielleicht liegt es nur daran, dass ich den ganzen Tag schon davor sitze. Aber ich bin hier wie der Ochs am Berg und komm nicht weiter..

Ich habe ein Menu mit JS / CSS gebastelt:
http://www.2klang.net/franz/naviTest.htm

Code: 
function menuOver(button)
{
    if(true)
    {
        var estiloCapa = document.getElementById("mOver").style;
        var pl = document.getElementById("pxLeft").style;
        var pr = document.getElementById("pxRight").style;
        var cab = document.getElementById("header");
        
        estiloCapa.width = button.offsetWidth+"px";
        estiloCapa.height = "70px";
        //alert(cab.offsetLeft);
        estiloCapa.left = cab.offsetLeft+button.offsetLeft+"px";
        estiloCapa.border = "0px solid #000000";
        estiloCapa.display = "block";
        
        pr.left = (button.offsetWidth-1)+"px";
        
        pl.display = "block";
        pr.display = "block";
    }
}

function menuOut(button)
{
    if(true)
    {
        var estiloCapa = document.getElementById("mOver").style;
        var pl = document.getElementById("pxLeft").style;
        var pr = document.getElementById("pxRight").style;
        
        estiloCapa.display = "none";
        pl.display = "none";
        pr.display = "none";
    }
}
onmouseover wird der Bereich über dem Menupunkt gehighlighted.
So weit ist alles gut. Nun möchte ich dass das Highlight für die gerade aktive Seite, d.h. den aktiven Link, beibehalten wird solange ebendieser Menupunkt aktiv ist.

Und hier komme ich nimmer weiter.
Kann ich das mit AS lösen?

Der Vollständigkeit halber hier der HTML-Code, in den das Script eingebettet ist:
HTML: 
<body>
<div id="general">    
    <script type="text/JavaScript" src="data/kuba.js"></script>
    <div id="header"> 
        <div id="mOver">
            <div id="pxLeft">&nbsp;</div>
            <div id="pxRight">&nbsp;</div>
        </div>
        <div id="menu" >
<a href="#"><img src="data/head/button01_wir.gif" alt="Wir &uuml;ber uns" width="82" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a> 
<a href="#"><img src="data/head/button02_cad.gif" alt="CAD-Layout" width="70" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a>
<a href="#"><img src="data/head/button03_leiterpl.gif" alt="Leiterplatten" width="84" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a>
<a href="#"><img src="data/head/button04_best.gif" alt="Best&uuml;ckung" width="73" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a>
<a href="#"><img src="data/head/button05_partner.gif" alt="Partner" width="50" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a>
<a href="#"><img src="data/head/button06_downloads.gif" alt="Downloads" width="71" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a>
<a href="#"><img src="data/head/button07_kontakt.gif" alt="Kontakt" width="50" height="15" border="0" class="button" onmouseover="menuOver(this)" onmouseout="menuOut(this)" /></a>
        </div>
      </div>    
</div>
</body>
Ich hoffe ich konnte mein Problem verständlich darstellen!?
Bin für jede Antwort dankbar!
 
Irgendwie steh ich auf dem Schlauch..
Location der aktuellen Seite auslesen via "document.URL". Okay.
Dann mit dem Linkziel vergleichen - aber wie?

Sorry wenn ich mich blöd anstelle, aber ich komm heut nimmer dahinter.. :rolleyes:
 
Die Buttons befinden sich innerhalb von Links....auf das Ziel des Links kannst du innerhalb der Funktion per
Code: 
button.parentNode.href
...zugreifen(naja...momentan würde das nichts bringen, da da nur eine Raute steht...sobald du da aber eine URL einfügst, kannst du es mit der location vergleichen )
 
Danke erstmal für die rasche Antwort..

Ich steh dennoch aufm Schlauch wie noch eins.
Könntest Du mir evtl irgendetwas anschauliches posten (a klitzekleines Beispiel) damit ich mein verirrtes Hirn in die richtige Richtung schicken kann?
 
Okay, ich hab mich durchgewurschtelt und bin zu einem funktionierenden Code gekommen (korrigiert mich wenn dem nicht so ist.. :) ).
Code: 
function menuActive(button)
{
    if(true)
    {
        var activeAdr = document.URL;
        var activeBut = button.parentNode.href;
        if(activeAdr == activeBut)
        {
            menuOver(button);
        }
    }
}
Testhalber habe ich die Abfrage mit Alert-Meldungen auf die onMouseOver-Abfrage gelegt, das schien geklappt zu haben..

//EDIT: Jetzt habe ich es eigentlich funktionierend.
Aber WO und v.a. WIE binde ich die Abfrage in den html-Code ein, damit der aktive Button direkt und konstant gehighlighted ist?
 
Zuletzt bearbeitet:
Du müsstest eigentlich nur Folgendes in der mouseout-Funktion als erstes notieren:
Code: 
if(document.URL==button.parentNode.href)
  {
    button.onmouseover=new Function('f','return false');
    button.onmouseout=new Function('f','return false');
    return;
  }
....ist es der aktive Button, werden die Funktionsaufrufe aus ihm entfernt und das wars schon :)
 
Super, vielen Dank!

Jetzt muss ich nur noch rausbekommen wie ich es schaffe dass das Highlight direkt beim Laden der jeweiligen Site gesetzt wird.
Aber das schaffe ich!

Problem behoben, Thread geschlossen - DANKESCHÖN!!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück