Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Link esterni... intelligenti

Uno script per lasciare all'utente la scelta sull'apertura dei link esterni
Uno script per lasciare all'utente la scelta sull'apertura dei link esterni
Link copiato negli appunti

È 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;
;
;
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>


Ti consigliamo anche