We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Externe Links mit Icon (Wikipedia-like)

    • 23699
    • 14 Posts
    poncho Reply #1, 17 years, 2 months ago
    Hallo Leute,

    wie kann man Links, die auf andere Websites verweisen automatisch mit einem kleinen Icon davor/danach versehen lassen? So wie es z.B. bei Wikipedia gemacht wird.
    Gibt es da eine Möglichkeit?
      • 24495
      • 407 Posts
      rasc Reply #2, 17 years, 2 months ago
      Automatisch wohl nur, wenn Du Dir ein Plugin baust, was bei OnWebPagePrerender alle Links durchforstet, prüft, ob sie auf Deine eigene Domain weisen, und wenn nicht, diesen Links eine Klasse "extern" zuweist.

      Halbautomatisch vergibst Du selber allen externen Links die Klasse "extern":
      <a href="#" class="extern">externes Ziel</a>


      Das CSS dazu ist einfach:
      a.extern {
padding-right:xxpx; /*Breite des Icons plus ein wenig Abstand*/
background:url(link_zum_icon_ordner/icon.gif) right center no-repeat;
}
        • 36451
        • 264 Posts
        qlworx Reply #3, 17 years, 2 months ago
        Geht automatisch per CSS für standardkonforme Browser. Dein CSS-Code:
        a[href^="http:"], a[href^="https:"]
{
padding-left: 12px;
background-image: url('pfad/ext_link.png');
background-repeat: no-repeat;
background-position: left;
}

        Geht natürlich nur, wenn Du - wie empfohlen - relative Pfade für interne Links benutzt. Anderes Beispiel für PDF-Links:
        a[href$=".pdf"]:after {content: " [.pdf]"; font-size: 80%; color: #ff0000;}

        Gerade letzteres ist für Deine Besucher sehr nervenschonend, falls Du 10 MB - PDF’s hast laugh
          • 24495
          • 407 Posts
          rasc Reply #4, 17 years, 2 months ago
          @yoomai: prinzipiell ja, aber da IE immer noch die Nase vorn hat und alles andere als standardkonform ist, ist die Lösung je nach Einsatzzweck nur gut geträumt.

          An dem Tag, an dem alle Browser der Versionen "aktuell" und "minus 1" CSS korrekt interpretieren, wird das Internet vor Ehrfurcht erstarren. In den Rechenzentren der Welt werden Scharen von Administratoren verzweifelt versuchen herauszubekommen, warum alle Festplatten stillstehen. Die besten ich-kenn-alle-hacks-Webdesigner werden sich die Kugel geben oder sie sitzen im Park, streicheln die Gänseblümchen und erzählen wirres Zeug vom Weltuntergang, während man Ihnen die Zwangsjacken anlegt. Oder?
            • 23699
            • 14 Posts
            poncho Reply #5, 17 years, 2 months ago
            Danke für eure Hilfe.

            Ja, der IE6 kommt damit nicht klar. Ich hasse den IE aber und da ich mit meiner Seite kein Geld verdiene nehme ich es mir einfach mal raus und beachte den IE nicht weiter. Aber ich glaube, der IE7 kann das ja mitlerweile auch, also ist es ja nur eine Frage der Zeit.

            Also werd ich das so machen.

            EDIT:
            Ich hätte wohl direkt bei Wikipedia mal schaun sollen:

            #content a[href^="http:"],
#content a[href^="https:"],
#content a[href^="ftp:"]
{
	background: url(external.png) center right no-repeat;
	padding-right: 13px;
}

            ...so hab ich es jetzt
              • 36451
              • 264 Posts
              qlworx Reply #6, 17 years, 2 months ago
              Quote from: poncho at Feb 10, 2007, 06:40 PM

              Danke für eure Hilfe.
              Aber ich glaube, der IE7 kann das ja mitlerweile auch, also ist es ja nur eine Frage der Zeit.
              Das ist auch mein Argument. Es ist nur eine Frage der Zeit.

              @rasc

              :-))))) Alle Browser standardkonform? Nun mal mal den Teufel nicht an die Wand!