Sven: Link-Farbe dynamisch ändern (SSI spielt auch mit)

SELF-Forum

Link-Farbe dynamisch ändern (SSI spielt auch mit)

Sven
– Informationen zu den Bewertungsregeln

Hallo allerseits! :-)

Ich habe da folgendes Problem:

Ich habe ein Projekt mit mächtig vielen Seiten und zwei Navigationen. Einer ganz groben mit Grafiken auf der linken Seite und einer mit Text-Links auf der rechten Seite. Die Grafiken sind für die einzelnen Rubriken und die Texte für einzelne Seiten.

Wenn ich nun die Rubrik wechsel, wechselt sich problemlos die Farbe der Grafik. Kein Thema! Einfach andere Grafik nehmen. Bei den Text-Links ist das aber schon schwieriger, da es sich bei dem Menü um ein per SSI eingefügtes File handelt.

Aktiviere ich nun einen der Links, soll sich auf der neuen Seite (in der ja exakt das gleiche Inhalts-File angezeigt wird) die Farbe dieses Links sichtlich verändern, damit klar wird, wo genau man sich befindet.

Würde dieses Menü auf jeder Seite extra auftauchen, wäre das natürlich kein Problem. Aber so? Ich dachte daran, jedem Link eine Variable zu verpassen und beim aktivieren des Links die jeweilige Variable auf 1 oder 0 zu setzen, woraufhin dann beim nächsten Laden der Link via JavaScript oder CSS oder wasweißichwas in die andere Farbe geändert wird. Nur wie das gehen soll, weiß ich noch nicht!

Kann mir da jemand von Euch weiterhelfen?

Ich danke im voraus und wünsche Euch noch viel Spaß bei was auch immer Ihr so macht! :-)

See ya!
Sven

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Link-Farbe dynamisch ändern (SSI spielt auch mit)

    CirTap
    – Informationen zu den Bewertungsregeln

    Hallo Sven,

    also aus dem hohlen Bauch heraus, sollte das mit einer sauberen, strikten CSS-Struktur und/oder Verzeichnis/Dateinamen durchaus gehen.
    Wenn Du den Textlinks für die verschiedenen Rubriken dabei einfach als class den Rubrikennamen "mitgibst", läßt sich das später auch einfacher zuordnen und ergänzen. Über IDs kannst du zwischen aktuellem und "anderen" Links unterscheiden.

    Möglichkeit 1 - reines CSS
    z.B. Rubiken:

    • links
    • grafiken
    • news
    • produkte

    Klassen
    a#aktiv { font-weight: bold; text-decoaration:underline; }
    a { font-weight: normal; text-decoaration:none; }

    a.links:link {color:#farbe1}
    a.links:visited {color:#farbe4}

    a.grafiken:link {color:#farbe3}
    a.grafiken:visited {color:#farbe4}

    a.news:link {color:#farbe5}
    a.news:visited {color:#farbe6}

    etc.

    <a href="xx0" class="links" id="aktiv">Ich bin Aktuell</a>
    <a href="xx1" class="links">Textlink 1</a>
    <a href="xx2" class="links">Textlink 2</a>
    <a href="xx3" class="links">Textlink 3</a>

    Mal davonausgehend, dass die Textlinks für die verschiedenen Rubriken auch unterschiedliche Texte haben, was aus deiner Nachricht nicht ganz deutlich rauskam.

    Möglichkeit 2 - SSI:
    Wenn Du schon SSI einsetzen kannst und das obige nicht anwendbar ist, dann linke im <head> der shtml ein *zusäzliches' CSS File rein.

    Arbeitest du mit Unterverzeichnissen für die Rubriken, kann die CSS Datei immer gleich heissen, die CSS-Angaben darin sind aber unterschiedlich.
    Ansonsten nenne die CSS-Datei wie die Rubrik.
    Hier kämst du um die class-Angaben bei den A-Elementen drumrum.

    <style type="text/css">
    <!--#include virtual="colors.css"  -->
    </style>

    Wie obiges Beipsiel:
    Rubrik      std. CSS pro verz.   CSS == Rubrikname
    --------------------------------+---------------------
    "Links":    links/colors.css     /links.css
                a:link {color:#farbe1}
                a:visited {color:#farbe4}

    "Grafiken": grafiken/colors.css /grafiken.css
                a:link {color:#farbe3}
                a:visited {color:#farbe4}

    "News":     news/colors.css     /news.css
                a:link {color:#farbe5}
                a:visited {color:#farbe6}

    Durch Umgebungsvariablen oder Parameter kannst du das ganze evtl. noch etwas "generischer" machen.
    Ist eine reine Sache des Namenskonzeptes, das du verwendest und wie gut (schlecht) deine Site-Struktur aufgebaut ist.

    Viel Spaß
    CirTap

    PS:
    wenn du nix von alledem verstanden hast, schick einfach etwas Mehl... :)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln