Als je links naar externe websites plaats, navigeert de bezoeker dus weg van je eigen pagina. Daarom kan het handig zijn om aan te duiden dat een link weg navigeert van je website.
Ik doe dit met behulp van CSS, spijtig genoeg is deze manier enkel bruikbaar in IE7, Firefox 1.5, Firefox 2.0 en Opera 9.10.
Hieronder kan je de CSS terugvinden die alles automatisch doet.
a:link, a:active, a:visited { color: #85C329; }
a:hover { color: #D1551B; }
a[href^="ftp:"]:link, a[href^="ftp:"]:active, a[href^="ftp:"]:visited, a[href^="http:"]:link, a[href^="http:"]:active, a[href^="http:"]:visited, a[href^="https:"]:link, a[href^="https:"]:active, a[href^="https:"]:visited { background-image: url('images/externallink.gif'); background-position: left bottom; background-repeat: no-repeat; padding-left: 12px; }
a[href^="ftp:"]:hover, a[href^="http:"]:hover, a[href^="https:"]:hover { background-image: url('images/externallink.gif'); background-position: left bottom; background-repeat: no-repeat; padding-left: 12px; }
a[href^="http://blog.verkoyen.eu"]:link, a[href^="http://blog.verkoyen.eu"]:active, a[href^="http://blog.verkoyen.eu"]:visited { background: none; padding: 0; } a[href^="http://blog.verkoyen.eu"]:hover { background: none; padding: 0; }
Voorbeeld:
- externe link: http://www.netlash.com
- interne link: /disclaimer
- volledige url maar toch huidige website: http://blog.verkoyen.eu
Reacties
Benjamin schreef:
29/01/07
Een verfrissende aanpak ;) is eens wat anders dan de rel~=external selector.
tijs schreef:
29/01/07
Geen idee, wat nu eigenlijk de juiste manier is. Die rel~=external selector heeft als nadeel, dat je manueel iedere externe een "rel"-attribute moet meegeven.
Want ik vraag me af het geen meerwaarde is dat je een "rel"-attribute meegeeft.
Benjamin schreef:
29/01/07
Een <em>rel</em>ationship in je link vastleggen is weliswaar betekenisvoller, maar daarom niet minder belangrijk dan een gewone link leggen.
Een goede parser zou deze extere relatie zelf kunnen afleiden aan de hand van bvb dezelfde regels die je in je css vastgelegd hebt.