[JS] Achtergrond link naar huidige pagina veranderen

[NitroX infinity]

edit:
Zou een mod de titel willen veranderen, vergeten te doen voordat ik 'm postte
'[JS] Achtergrond link huidige pagina veranderen' o.i.d.

Ik ben momenteel bezig met een menu in JavaScript.
In dit menu heeft elke link een achtergrond afbeelding.
De link die gelijk is aan de huidige pagina wil ik een andere achtergrond geven.
(Helaas werk :active in CSS niet op die manier)

Nou ben ik al achter het volgende gekomen:

Ik moet de url van een link in het menu vergelijken met de huidige pagina.
Is de link gelijk dan moet de achtergrond worden veranderd.
Ik heb al enkele uren rondgezocht en kwam daarbij uit op .style.background echter weet ik niet hoe deze nou precies inelkaar zit en hoe ik deze toe ken aan de link.

Overigens staan de links in een array.


de standaard achtergrond


de mouseover (:hover via css) achtergrond


de actieve achtergrond

De laatste afbeelding is dus degene die moet toegewezen worden aan de actieve link.
Even voor de duidelijkheid; CSS werkt hier dus niet, :active is als de linker-muisknop wordt ingedrukt.
(Internet Explorer 7.0, Firefox 2.0. Netscape 8.1 en Opera 9.02 allen mee getest)

De naam van de huidige pagina wordt door de volgende functie opgehaald:

JavaScript:

function giveFilename () {

    var fileName = location.href;
    var name_array = fileName.split('/');
    var fileIndex = name_array.length - 1;

    document.write(name_array[fileIndex]);
}

En dit is de code van het menu:

JavaScript:

var camcoMenu = new Array();

camcoMenu[0] = 'index.html';
camcoMenu[1] = 'news.html';
camcoMenu[2] = 'articles.html';
camcoMenu[3] = 'corporation.html';
camcoMenu[4] = 'members.html';
camcoMenu[5] = 'allies.html';
camcoMenu[6] = 'enemies.html';
camcoMenu[7] = 'starcharts.html';
camcoMenu[8] = 'misccharts.html';
camcoMenu[9] = 'links.html';
camcoMenu[10] = 'misc.html';

for (i = 0; i < camcoMenu.length; i++) {
    document.write('<A HREF="', camcoMenu[i], 
            '" TARGET="_top">', camcoMenu[i], '</A>');
}

De vraag is dus; hoe zorg ik dat de afbeelding voor de actieve link wordt toegewezen aan de link die naar de huidige pagina verwijst?

Stap 1 is als ik me niet vergis camcoMenu[i] vergelijken met giveFilename().
Stap 2 is het toekennen van de achtergrond afbeelding aan de desbetreffende link, maar hoe?

[ Voor 3% gewijzigd door NitroX infinity op 25-02-2007 19:42 ]

[Verwijderd]

JavaScript:

for (i = 0; i < camcoMenu.length; i++) {
    var className = (document.location.indexOf(camcoMenu[i]) != -1) ? 'selected' : '';
    document.write('<A HREF="' + camcoMenu[i] +
            '" class="' + className + '"' +
            '" TARGET="_top">' + camcoMenu[i] + '</A>');
}

[JHS]

Ik heb de titel even aangepast .

[NitroX infinity]

@Blues, bedankt maar ik kreeg het niet aan de praat.

Ik heb na nog wat uurtjes klooien het voor elkaar gekregen. De functie giveFilename() moest een return geven in plaats van document.write. En in de for loop staat nu een if statement die giveFilename() met camcoMenu[i] vergelijkt.

JavaScript:

function giveFilename () {

    var fileName = location.href;
    var name_array = fileName.split('/');
    var fileIndex = name_array.length - 1;

    return name_array[fileIndex];

}

JavaScript:

for (i = 0; i < camcoMenu.length; i++) {
    if (camcoMenu[i] == giveFilename()) {
        document.write('<A HREF="', camcoMenu[i],
             '" CLASS="currentlink" TARGET="_top">', camcoMenu[i], '</A>');
    }
    else {
        document.write('<A HREF="', camcoMenu[i],
             '" TARGET="_top">', camcoMenu[i], '</A>');
    }
}

[ Voor 48% gewijzigd door NitroX infinity op 26-02-2007 00:25 ]