JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Un po' di tempo fa sono comparse due tecniche sull'Image Replacement con Javascript. La prima è la tecnica presentata su Alistapart realizzata da Chris Heillman. Alla sua pubblicazione è seguita una critica molto aspra di Peter-Paul Koch, che reclamava la paternità dell'idea e commentava pesantemente l'implementazione. La seconda è ovviamente la tecnica di Peter-Paul Koch.

Su entrambe personalmente ho delle riserve. La tecnica di Heillman infatti è piuttosto lenta e non verifica il supporto delle immagini prima di effettuare il replacement. Condivido in buona parte i punti mossi nella critica di Koch, anche se non ne condivido la forma. La tecnica di PPK è leggera, ma ha uno svantaggio significativo: l'uso di un attributo personalizzato per effettuare il replacement. Questo non consentirà di produrre pagine (x)HTML valide. È possibile estendere tag e attributi e produrre codice valido attraverso le Custom DTD, ma a parer mio il gioco non vale la candela.

Personalmente ritengo che le tecniche di sostituzione del testo con le immagini via Javascript siano state sottovalutate. Consentono infatti di mantenere codice HTML e CSS minimale, sono di facile applicazione e hanno un indubbio vantaggio sulle tecniche di image replacement con i CSS (cfr. Articolo: «Le tecniche di Image Replacement»), ovvero il fatto di mantenere le immagini anche in fase di stampa. Ma entrambe le tecniche esistenti soffrono a parer mio di qualche difetto, così ho sviluppato una mia versione. Vediamola.

Image Replacement con Javascript (IRJ)

Arriviamo così alla parte centrale dell'articolo. Rivediamo l'esempio che ho preparato. Se osservate il codice, nell'HTML non ci sono tag img e nel CSS incorporato non viene usata nessuna tecnica di image replacement. Eppure nella pagina risultano delle immagini: lo potrete notare anche solo facendo un'anteprima di stampa. Le immagini come img, a differenza di quelle di background, vengono infatti stampate di default.

Prima di procedere con il file Javascript, vediamo i requisiti nell'HTML. Gli elementi da sostituire dovranno avere un id, e non dovranno contenere tag al loro interno. Questi sono gli unici due requisiti essenziali affinchè sia possibile applicare la tecnica.

Nell'esempio, ho attribuito un id a ciascuno dei titoli della pagina:

<h1 id="menu">Il nostro men&ugrave;</h1>
<h2 id="primi">I nostri primi</h2>
<h2 id="secondi">Secondi e contorni</h2>
<h2 id="dolci">Dolci al carrello</h2>

La sostituzione del testo con le immagini è possibile grazie a un singolo file Javascript incorporato nella sezione head della pagina in questo modo:

<script type="text/Javascript" src="irj.js"></script>

Altri articoli

Altre guide

Altre newsletter