Frank: besuchte Links

Hallo,

gibt es eine Möglichkeit, dass man (evtl. über CSS) die Eigenschaften von bereits besuchten Links nochmal verändert, sobald man einen neuen Link anklickt?

Habe jetzt folgendes Stylesheet:

a:link   {text-decoration: none; color: #ffcc00; font-family: arial, helvetica, sans-serif; font-size: 10pt; }
a:hover   {text-decoration: underline; color: #ffcc00;font-family: arial, helvetica, sans-serif; font-size: 10pt;}
a:visited {text-decoration: none; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 10pt; }
a:active {text-decoration: underline; color:#ffcc00; font-family: arial, helvetica, sans-serif; font-size: 10pt; }

Es geht um folgende Seite:
http://www.hahn-personalleasing.de/vorschau/

Sobald man einen Link angeklickt hat, bleibt die Hintergrundfarbe stehen. Soweit so gut. Aber ich würde gerne, dass diese Farbe immer nur dort zu sehen ist, wo der User sich gerade befindet.

Frank

  1. Hallo Frank!

    Mit a:visited formatierst Du das Aussehen der bereits besuchten Links - soweit funktioniert die HP also schon richtig.

    Mit a:active formatierst Du das Aussehen des aktiven Links - dies wird von den Browsern aber unterschiedlich interpretiert - meist bleibt der Link nur solange "aktiv", wie man mit der Maus daraufklickt.

    Es bleibt Dir also nur die Möglichkeit, diesen Effekt manuell umzusetzen - entweder mit PHP (am einfachsten), mit JavaScript (eher abzuraten) oder direkt mit HTML - also jede Seite mit Menü versehen und dann einfach das aktuelle entsprechend hervorheben.

    mfg,

    norbert =:-)

    Hallo,

    gibt es eine Möglichkeit, dass man (evtl. über CSS) die Eigenschaften von bereits besuchten Links nochmal verändert, sobald man einen neuen Link anklickt?

    Habe jetzt folgendes Stylesheet:

    a:link   {text-decoration: none; color: #ffcc00; font-family: arial, helvetica, sans-serif; font-size: 10pt; }
    a:hover   {text-decoration: underline; color: #ffcc00;font-family: arial, helvetica, sans-serif; font-size: 10pt;}
    a:visited {text-decoration: none; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 10pt; }
    a:active {text-decoration: underline; color:#ffcc00; font-family: arial, helvetica, sans-serif; font-size: 10pt; }

    Es geht um folgende Seite:
    http://www.hahn-personalleasing.de/vorschau/

    Sobald man einen Link angeklickt hat, bleibt die Hintergrundfarbe stehen. Soweit so gut. Aber ich würde gerne, dass diese Farbe immer nur dort zu sehen ist, wo der User sich gerade befindet.

    Frank

    1. Hallo Norbert!

      Es bleibt Dir also nur die Möglichkeit, diesen Effekt manuell umzusetzen - entweder mit PHP (am einfachsten), mit JavaScript (eher abzuraten) oder direkt mit HTML - also jede Seite mit Menü versehen und dann einfach das aktuelle entsprechend hervorheben.

      wie läßt sich das denn mit PHP umsetzen?

      Frank

      1. Hallo Frank!

        Hängt natürlich davon ab, ob Du PHP kannst bzw. ob auf deinem Server php verwendet werden kann.

        Im Prinzip würde dies nur wenige Codezeilen erfordern - schematisch (!) dargestellt würde dies so aussehen:

        if (URL_DES_MENUEPUNKTES = URL_DER_AKTUELLEN_SEITE)
         then BUNTEN_LINK
         else NORMALEN LINK;

        Dazu müsstest aber auch das Menü in die Contentseiten mit einbauen - das heisst, es würde "mitscrollen". Ich empfehle grundsätzlich die Seiten framelos zu gestalten - aber dies ist Ansichtssache. Beispiel siehe meine HP. Dies hat auch den Vorteil, dass man jede Seite bookmarken kann und wesentlich mehr Ergebnisse in den Suchmaschinen aufscheinen - ansonsten gut designte Seite!

        norbert =:-)

        Hallo Norbert!

        Es bleibt Dir also nur die Möglichkeit, diesen Effekt manuell umzusetzen - entweder mit PHP (am einfachsten), mit JavaScript (eher abzuraten) oder direkt mit HTML - also jede Seite mit Menü versehen und dann einfach das aktuelle entsprechend hervorheben.

        wie läßt sich das denn mit PHP umsetzen?

        Frank

        1. Hallo Norbert,

          das wäre zwar prinzipiell machbar, aber zu aufwändig, da ich jetzt nicht mehr alles umbauen kann / will / soll / darf ;-)

          Jede Seite mit Menü versehen käme auf den gleichen Aufwand raus... also wie wäre es mit JavaScript?

          Frank

          P.S.: Danke für's Lob ;-)

          1. Hallo Frank!

            Auch gut. Dazu würde ich einfach zwei Stylesheet-Klassen definieren:

            .active
            {
            aussehen des aktiven Links - also Farbe, Hintergrundfarbe, usw.)
            }

            .passive
            {
            detto
            }

            Dann jedem Link eine Id geben - danach eine Funktion bauen, die zuerst allen Links die Klasse passive zuweist und dem aktuellen Link die Klasse active.

            <script ...>

            /* Damit kein Fehler möglicher Fehler angezeigt wird ... */

            onError = ignore;

            function ignore()
            {
               return true;
            }

            /* Die eigentliche Funktion */

            function hilite(link)
            {
               document.getElementById("linkid1").className = "passive";
               document.getElementById("linkid2").className = "passive";
               document.getElementById("linkid3").className = "passive";

            link.className = "active";
            }

            </script>
            ...

            Aufruf im Link:

            <a id="linkid2" href="URL" onClick="hilite(this);>Link</a>

            Nicht getestet - sollte aber so oder ähnlich funktionieren ;-)

            mfg

            norbert  =:-)

            Hallo Norbert,

            das wäre zwar prinzipiell machbar, aber zu aufwändig, da ich jetzt nicht mehr alles umbauen kann / will / soll / darf ;-)

            Jede Seite mit Menü versehen käme auf den gleichen Aufwand raus... also wie wäre es mit JavaScript?

            Frank

            P.S.: Danke für's Lob ;-)

            1. Hallo Norbert,

              super, besten Dank. Im Prinzip funktioniert Deine Vorlage, allerdings ist beim ersten Seitenaufruf jetzt gar keine Formatierung der Links vorhanden... Wo bringe ich die jetzt unter?

              Frank

              1. Hallo Frank!

                Du musst natürlich den Links die entsprechende Klasse zuordnen:

                <a id="linkid1" class="passive" href="url" onClick="hilite(this);">Link</a>

                jetzt sollts klappen ...

                norbert =:-)

                Hallo Norbert,

                super, besten Dank. Im Prinzip funktioniert Deine Vorlage, allerdings ist beim ersten Seitenaufruf jetzt gar keine Formatierung der Links vorhanden... Wo bringe ich die jetzt unter?

                Frank

                1. Du musst natürlich den Links die entsprechende Klasse zuordnen

                  ich Blödi ;-)
                  Danke - jetzt klappt's.

                  Grüße
                  Frank

          2. Hallo Frank,

            Jede Seite mit Menü versehen käme auf den gleichen Aufwand raus... also wie wäre es mit JavaScript?

            Deine Navigation bekommt zusätzlich noch eine ID, einen style und einen Funktionsaufruf im onClick(); etwa so:

            <a href="..." target="..." id="id1" style="font-weight:bold;" onClick="neuerLink('id1')"> (logischerweise hat jeder Link eine andere id)

            In der Funktion neuerLink() kannst du nun über getElementById(id).style.fontWeight="bold"; das Aussehen des Links verändern. Hintergrund, Style, Farbe etc. Wenn das jetzt zu schnell war kannst du es hier http://www.maxx4u.de/drweb/frames/links/index2.html nochmal nachlesen

            Viel Spaß

            Maxx

    2. Hallo norbert,

      Mit a:active formatierst Du das Aussehen des aktiven Links - dies wird von den Browsern aber unterschiedlich interpretiert - meist bleibt der Link nur solange "aktiv", wie man mit der Maus daraufklickt.

      was laut http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes auch richtig ist - der IE macht das mal wieder falsch...

      Hallo,
      [...]

      du solltest dringend an deinem Quoting-Stil arbeiten du produzierst ein TOFU nach dem anderen ->http://learn.to/quote

      Grüße aus Nürnberg
      Tobias

      --
      Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|