Link esterni… intelligenti

È una di quelle discussioni destinate a tornare ciclicamente alla ribalta e su cui è davvero difficile trovare una visione unanime: meglio aprire i link nella stessa finestra oppure in una nuova, magari ricorrendo al classico target="_blank"?

Nel corso degli anni diverse soluzioni basate su Javascript hanno tentato di risolvere il dilemma, spostando l’onere della scelta dallo sviluppatore all’utente. Un classico è lo script che consente a quest’ultimo di selezionare da un semplice form la destinazione preferita dei collegamenti presenti nella pagina. Qui proponiamo la soluzione escogitata da arc90. Non raccoglierà sicuramente i consensi di tutti, ma qualcuno la troverà ottimale rispetto alle proprie esigenze e al proprio punto di vista.

Iniziamo dall’esempio. Contiene due link. Il primo è accompagnato da un’icona, quella divenuta una sorta di standard per indicare l’apertura di un link in una nuova finestra. Denota quindi un link esterno. Ma attenzione, rispetto a soluzioni simili come quella presentata in questo articolo di HTML.it, presenta una differenza. Cliccando sulla parte testuale del link, questo si aprirà nella stessa finestra; cliccando invece sull’icona che lo accompagna, si aprirà in una nuova finestra. Power to the user, si direbbe. Con un problema da risolvere e a cui qui solo accenniamo: informare in qualche modo l’utente della duplice possibilità. Passiamo ora all’implementazione.

Nell’archivio zip allegato troverete questi file:

• esempio.html: la pagine dell’esempio;
• arc90_extlink.js: lo script di arc90;
• extLink_img.gif: l’icona.

La prima cosa da fare, è collegare alla pagina il javascript. Lo facciamo nel modo consueto:

Cosa fa lo script? Cerca all’interno del documento tutti i link (elemento a) a cui sia stata assegnata la classe extlink. A quel punto provvede a inserire dinamicamente un nuovo elemento span con classe arc90_extlinkIMG, al cui interno, via CSS, piazzeremo come sfonfo l’immagine extLink_img.gif.

Per gestire il posizionamento dell’icona accanto al link abbiamo quindi bisogno di qualche riga di CSS relativa all’elemento span con classe arc90_extlinkIMG. Nell’esempio è riportato come CSS interno, ma nulla impedisce ovviamente di inserire la regola nel contesto del foglio di stile principale. Ecco le poche regole necessarie al posizionamento:

Veniamo alla prte HTML. L’implementazione dell’effetto è delle più semplici. Ai link che vogliamo far aprire in una nuova finestra, applicheremo la classe extlink, lasciando invariati gli altri: