Mikael Brevik
PHP, MySQL, CSS, XHTML, JavaScript
Legg til ikon på eksterne lenker
17. Feb. 2007 
JavaScript
Jeg har sett flere sider som gjør det og har tenkt at det er god skikk å markere hvilke lenker som går til eksterne sider. Det kan markeres på flere måter, men den beste måten er nok å legge til en pil eller et bilde på slutten/starten av lenken. Derfor tenkte jeg at jeg skulle lage et script som gjør dette enkelt for deg. Det er ingen krav til å markere lenkene med en klasse eller noe. Eneste du må gjøre er å skrive inn hvilket domene du eier, så den sjekker opp mot at den eksisterer i lenken.
Scriptet bruker frameworket til Prototype, så du må laste det ned og inkludere det med
-
<script type="text/javascript" src="path/to/prototype.js"></script>
Prototype er forresten et veldig kjekt framework for deg som kan ruby eller har lest litt på det slik som jeg har gjort. Prototype er lagd slik at JavaScript skal være likt Ruby On Rails.
Slik ser det ut:
-
function doLinkExternal (inside)
-
{
-
$$(inside).each(function(item) {
-
if(!item.href.match('din-side.com')) {
-
item.innerHTML += ' <img src="icon_link.gif" alt="Ekstern lenke" title="Ekstern lenke" />';
-
}
-
});
-
}
Parameteret skal inneholde klassen, elementet eller id alle linkene inneholder, husk at a må stå sist da det gjelder a-elementer. Eksempel på hvordan du har det:
-
<body onload="doLinkExternal ('.text a')">
Men det har sine begrensninger. Du kan kun ha to ledd inne i parameteret. så body .wrap a.
Husk at du må sette inn domenet ditt i parameteret i match. Og linken eller hva du vil kan du ha etter += '. Så om du vil bruke (E) i stedet for bilde, kan du endre den linjen til dette:
-
item.innerHTML += ' (E)';
Uten Prototype
Etter halvveis oppfordring igjennom kommentarer, tenkte jeg at jeg skulle legge til en versjon som ikke krevde prototype.
-
function doLinkExternal ()
-
{
-
var tags = document.getElementsByTagName("a");
-
for(var i=0;i<tags.length;i++){
-
var item = tags[i];
-
if(!item.href.match('din-side.com')) {
-
item.innerHTML += ' <img src="icon_link.gif" alt="Ekstern lenke" title="Ekstern lenke" />';
-
}
-
}
-
}
Denne vil gjøre omtrent det samme, bare ikke under en spesiell klasse, id eller tag. Geniraliserer a-tagene på siden.
RSS 2.0 Feed
Valid CSS2
Valid XHTML 1.0 Trans
Grei og enkel løsning, det eneste problemet jeg ser med denne løsningen er at dersom den besøkende ikke har Javascript activert, vil ikke de eksterne pilene vises.
Hele greia kan jo lages forholdsvis enkelt via php også (dersom en bruker det på siden).
Ellers, Tab rekkefølgen i kommentar formet ditt virker ikke helt. Går direkte til post respons knappen fra email feltet...
Ivar skrev dette 19 Februar, 2007 16:23 - Sitér
Jepp, det er en "negativ" ting om du har JS deaktivert. Men det positive med det er at det kun er en tilleggsfunksjon og ikke noe essensielt. Det ødelegger ikke noe viktig om det er vekke. Og derfor er det ikke noe særlig negativt med at det blir fjernet om JS er deaktivert heller. Om du har JS deaktivert er du "bound to" gå glipp av noen ekstra funksjoner. Det er noe du må leve med, sammen med avgjørelsen.
Når det gjelder tab-rekkefølgen skal jeg se på det. En lame-bug ute å går.
Mikael Brevik skrev dette 20 Februar, 2007 01:32 - Sitér
Enkel løsning var det vel ikke, da brukeren må laste ned 71kB (prototype). Blir ikke dette litt bloat?
Tor Løvskogen skrev dette 27 Februar, 2007 01:37 - Sitér
Jo, du har rett i at det vil bli noe overkill og resurskrevende å laste inn frameworket for å bruke det kun til dette.
Kan kan alltids endre
Til ren JS, men halve formålet med denne posten er å vise til hvor enkel prototype er, og hvor mye det kan hjelpe deg.
Redigert:
Nå er det lagt til en versjon som ikke krever prototype, for de som kun er interessert i denne løsningen.
Mikael Brevik skrev dette 1 Mars, 2007 07:25 - Sitér
Koden din uten Prototype fungerte ikke for meg, så jeg fikk litt hjelp. Da kom vi frem til denne koden, som fungerer perfekt:
Runar skrev dette 17 April, 2007 01:30 - Sitér
Hallo! Merkelige saker at prototype-funksjonen min ikke fungerte. Brukte den i lang tid selv. Fordelen med den som jeg har skrevet er at en kan ha selectors, og velge hvilke linker som skal vise dette ekstra ikonet. Slik trenger du ikke � �delegge eventuell blogroll eller lignende.
Men om du ser etter ser du at det ovenfor er en fin blanding mellom de to funksjonene jeg har skrevet i artikkelen min; den uten prototype og den med prototype. Eller egentlig bruker du prototype p� en annen m�te enn det jeg gj�r. Den blir brukt kun til � sjekke om det er din side, og ikke til � finne elementene.
Men takk for oppdateringen, skriv gjerne hva som ikke fungerte, s� jeg f�r se om det er en feil i funksjonen.
N�r det gjelder forbedring av funksjonen du har skrevet inn ovenfor, er jeg litt uenig med noen punkt. Det ene er det jeg har sagt om selectors (n�r man f�rst skal bruke prototype), og det andre er at title blir overrida til \"Ekstern lenke\". Dette blir ikke helt semantisk korrekt. Derfor burde det v�re item.title +
Mikael Brevik skrev dette 17 April, 2007 01:34 - Sitér
Prototype-funksjonen din fungerte, eller snakker du om koden du postet uten Prototype-tillegget?
Uansett, hva som ikke fungerte er jeg ikke sikker på. Det bare virket ikke. Jeg husker ikke hvordan koden så ut før du oppdaterte den, men en av tingene som var feil var at du skrev tags(i) i stedet for tags[i]. Jeg tror du skrev j i stedet for i også, men det var vel bare en skriveleif.
Runar skrev dette 17 April, 2007 13:05 - Sitér
Hehe, ja. Det var det som var buggen. Jeg hadde misset på på paranteser i forhold til klamme-paranteser, og skrevet j i stedet for i, av en eller annen grunn. Kan til dels gå for fort i svingene her. Begge eksemplene mine skal fungere nå. Har du prototype ville jeg ha brukt min øverste, slik at du kan definere hvor disse linkene befinner seg.
Mikael Brevik skrev dette 17 April, 2007 15:37 - Sitér