È 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:
<script type="text/JavaScript" src="arc90_extlink.js"></script>
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:
<style type="text/css" media="screen">
.arc90_extlinkIMG {
background: transparent url(extLink_img.gif) no-repeat top right;
margin-left: 2px;
height: 12px;
width: 12px;
cursor: pointer;
padding-left: 12px;
}
</style>
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:
<p>Questo <a href="http://blog.html.it" class="extlink">link è esterno</a>.</p>
<p>Questo <a href="http://www.html.it">link è interno</a>.</p>
