Creare link automatici con immagini in puro CSS

Avrete visto pure voi che in qualche sito, di solito si usa una piccola icona per descrivere in modo veloce il link che si sta per visualizzare, per esempio se il link che dovremmo cliccare è un archivio .zip o .rar di solito si usa inserire prima del link testuale l’icona dell’archivio: per avere un’effetto del genere: Mio Archio.

Questo metodo è molto usato perchè fa capire in modo veloce che link dovrà essere una volta aperto lo stesso. Per inserire quell’immagine prima del link bisogna usare il solito tag <img src=”url img”>, questo però ci potrebbe far appesantire troppo la pagina se i link ad archivi zip sono molteplici nella stessa pagina.

Invece…

Adesso grazie al CSS 2.1 potremmo inserire una semplice regola nel foglio di stile della pagina e far comparire in automatico quella icona ogni volta ci sia un link con destinazione ad un archivio zip o qualunque altro tipo di file o url.

La regola da scrivere nel foglio di stile è la seguente:

a[href$=’.zip’], a[href$=’.gzip’], a[href$=’.rar’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}

Tutto l’arcano di come il css riesce a capire a quale link deve immettere l’immagine sulla sua sinistra è la stringa “a[href$=’.zip’]“; questo perchè con la nuova versione del CSS con quella formattazione diremmo che a qualunque link che ha come parte finale .zip dovrà applicargli lo stile che è descritto nelle righe successive alla parentesi graffa di apertura {.

Potremmo scegliere noi quale parte del link dovrà analizzare:
la parte finale basterà inserire $ dopo href come è nella formattazione descritta precedentemente
la parte iniziale invece del $ dovremmo inserire l’apice ^ e la formattazione diventerà: a[href^=’.zip’]

Quindi potremmo creare centinaia di auto-links, ad esempio se vorremo creare un auto-links ad ogni documento testuale basterà inserire nel foglio di stile la seguente regola:

a[href$=’.doc’], a[href$=’.rtf’], a[href$=’.txt’], a[href$=’.wps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}

In questo caso abbiamo impostato il CSS in modo che a qualunque link che finisce ( c’è il $ dopo di href ) con .doc, .rft, .txt & .wps dovrà immettere alla sua sinistra l’immagine riportata nel background.

Potremmo creare anche degli auto-links dedicati a specifici siti internet. Ad esempio se vorremmo creare un auto-links per google; quindi ogni volta che verrà linkata una pagina del sito http://www.google.it verrà visualizzata a destra il logo di google, dovremmo scrivere questa regola CSS:

a[href^=”http://www.google.it”] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/google_logo.gif) center right no-repeat;
}

Con questa semplice regola abbiamo comandato al CSS che ad ogni collegamento che inizia con http://www.google.it dovrà inserire alla sua destra l’immagine descritta nel background. Possiamo modificare la posizione dell’immagine a destra o a sinistra modificando il valore background & padding, ad esempio se l’immagine vorremmo farla visualizzare sulla sinistra la stringa di background dovrà essere la seguente: background:transparent url(/Images/google_logo.gif) center left no-repeat; & invece la stringa padding dovrà essere: padding-left:20px;

Quindi se sappiamo lavorare un po con il CSS possiamo creare moltissimi auto-links, tutti personalizzati a nostro piacimento con le nostre regole. Ad esempio in questo blog c’era bisogno di far sapere a voi utenti quando il link portava in una pagina di WikiPedia, dato che viene usata l’enciclopedia libera WikiPedia per chiarire termini informatici; infatti noi abbiamo utilizzato questo metodo per creare un auto-links ad ogni collegamento che inizia con: http://it.wikipedia.org. Come avrete visto vicino a WikiPedia c’è un’immagine rappresentante la W di WikiPedia, questo perchè ho linkato WikiPedia, quindi il css ha inserito l’immagine descritta nel backgorund inserita in questa regola css del template di questo blog:

a[href^=”http://it.wikipedia.org”] {
display:inline-block;
padding-right:20px;
background:transparent url(images/wikipedia_ico_link.png) center right no-repeat;
}

Quindi potrete creare auto-links per qualunque links possibile. Se volete le icone che rappresentino documenti word, archivi zip, video, musica ecc… esiste lo splendido pacchetto di icone Silk create da famfamfam. Questo pacchetto di icone è sotto licenza Creative Commons Attribution 2.5 License, quindi potremmo utilizzare questo pacchetto dichiarando solo la paternità di famfamfam. Le icone Silk sono utilizzate da moltissimi WebMaster, dato che sono splendide e carinissime, poi sono molto piccole ( 16×16 ) quindi utilizzabili nella maggior parte dei template. Per visualizzare l’intero pacchetto di icone disponibili clicca QUI.

Per finire…

Non ci rimane che incominciare a sbizzarrirci nella creazione di auto-links per le nostre pagine Web, dandogli un aspetto professionale considerevole. Una regola CSS da inserire sempre nei nostri fogli di stile se vorremmo far capire ai nostri visitatori che tipo di link è quello in questione.

Fonte