Mappe immagine – Introduzione

Le mappe immagine permettono di associare diverse parti di un’immagine a diversi URL. Il primo tipo di mappa immagine ad essere definita ed implementata, fu quella “lato server”; oggi quella più utilizzata è quella “lato client”. Sono state proposte svariate strutture di mappe immagine lato client, ma quella che attualmente è d’uso comune fu originariamente proposta da Spyglass e pubblicata per la prima volta su RFC1980. Altre tecniche verranno menzionate alla fine di questo articolo, ma non esaminate in profondità.

Una documentazione recente e dettagliata è parte delle specifiche HTML 4, vedi Client-side image maps in the W3C HTML4.01 spec. Le imagemap lato client di questo tipo rappresentano, per la maggior parte degli usi, un passo in avanti rispetto alle vecchie mappe immagine lato server, e sono supportate – anche se con qualche limitazione – da tutti gli attuali browser; le versioni più vetuste di browser, che non le supportano, sono oramai in disuso, ma dipende da te scegliere se e come prevederne comunque l’uso – certamente non guasta aggiungere il supporto lato server, soprattutto se la cosa è di facile implementazione. Innanzitutto descriveremo le due tipologie di base separatamente, poi vedremo come esse possano essere combinate fra loro, allo scopo di sviluppare elementi in grado di funzionare come mappa immagine lato client sui browser in grado di gestire tale funzionalità, ma di prevedere un funzionamento lato server su quelli più datati

Anche se questo tutorial – come tanti altri – cerca di evidenziare il funzionamento delle cose, ti consiglio fortemente, nelle applicazioni pratiche, di usare una utility dedicata alla gestione delle mappe immagine. Molti applicativi per la creazione di pagine e siti web includono queste funzioni; in alternativa, è facile reperire elenchi di strumenti per l’imagemapping nelle FAQs o presso il W3C, o Yahoo… ma non è mia intenzione recensire questi prodotti: piuttosto, quello che uso attualmente, in ambiente PC Windows, è un buon programma gratuito chiamato “Map_THIS!”. Supporta entrambi i formati (lato server e client), anche se l’autore ha deciso di abbandonarne lo sviluppo a favore di una versione a pagamento la quale, pur offrendo maggiori funzionalità, sembra supportare esclusivamente l’approccio lato client. Troverai “Map_THIS!” presso tutti i fornitori di software gratuito sul web, oppure cercando il file mpths131.exe con un motore di ricerca. Osserva che il campo descritto come “Internal comment” della finestra di dialogo “Edit Area Info” è quello che sarà usato come attributo ALT dei tag AREA per la mappa immagine lato client, quindi non dimenticare di utilizzare questo campo nella maniera più appropriata.

(Non farti fuorviare da alcuni pacchetti di authoring che creano pagine basandosi su tecniche e linguaggi non HTML, come javascript lato client, o procedure proprietarie lato server. Il loro scopo – neanche tanto recondito – è di “bloccarti” nell’ambito della loro linea commerciale e rendere difficile una successiva migrazione verso prodotti concorrenti. Assicurati, quindi, di scegliere prodotti in grado di supportare le tecnologie standard, le quali possono essere “spostate” senza difficoltà da un server all’altro, e che siano in grado di funzionare con qualsiasi tipo di client, piuttosto che creare pagine strattamente dipendenti da tecnologie – come per esempio quelle di scripting lato client – che una parte di utenti potrebbe decidere di disabilitare per una qualunque ragione. Intendiamoci, non c’è niente di sbagliato nell’usare Javascript o altro, per fornire delle funzioni extra non ottenibili altrimenti; certo che, laddove la stessa prestazione possa essere implementata per “tutti” gli utenti attraverso l’HTML standard, è del tutto inutile far dipendere quella funzionalità da Javascript).

Per completezza, il file di help fornito con Map_THIS! è anche un buon tutorial sulle mappe immagine, anche se con quanche riserva. Non viene mai menzionato l’attributo ALT del tag AREA. La documentazione fornita con Map_THIS! parla – non senza una certa confusione – delle mappe immagine lato client dell'”HTML 3.0″, ma in realtà l’unico tipo di mappe menzionate nell’ormai defunto HTML 3.0 (1995) è il tipo FIG (oggi obsoleto).

Lo scopo di questo articolo non è certamente quello di rimpiazzare l’uso di un apposito pacchetto software, ma di farti comprendere cosa succede “sotto le coperte” e di aiutarti a sviluppare pagine in grado di funzionare con la più grande varietà possibile di browser. Per completezza, questa pagina contiene parte di tutorials at IHiP. Ma ci sono alcune parti che ho voluto evidenziare ed amplicare. In particolare, IHiP si dimentica di menzionare l’attributo ALT del tag AREA, e non descrive come creare mappe immagine che possano essere sia lato server che lato client (c’è un esempio, ma non lo dicono!); ed ancora, non c’è alcun cenno alla problematica delle aree sovrapposte, che ho trovato abbondantemente sviluppato in molte discussioni su Usenet o via email, e che è causa di numerosi grattacapi per un buon numero di utenti.

Potrebbero interessarti anche i seguenti articoli

  • Ed insieme…Ed insieme… Non dico che questo rappresenti un obbligo per un sviluppatore ma... le versioni recenti di browsers supportano le mappe immagine lato client, e dipende interamente […]
  • Altre mappe immagineAltre mappe immagine Questa sezione menziona, senza dettagliare, alcune tipologie alternative di mappa immagine. FORM..INPUT TYPE=IMAGE L'elemento INPUT TYPE=IMAGE dell'HTML FORM […]
  • Guida alle Mappe ImmagineGuida alle Mappe Immagine Questo articolo affronta le problematiche legate alla creazione di mappe immagine, ed alle alternative che uno sviluppatore si trova davanti. Il tutto, […]
  • Aree sovrapposteAree sovrapposte Spesso alcuni sviluppatori si tuffano in situazioni di difficile soluzione nel tentativo di evitare la sovrapposizione di aree in una mappa immagine, anche se sono […]
  • Mappe immagine lato clientMappe immagine lato client Le specifiche originarie per le mappe immagine lato client erano su RFC1980. La versione correntemente usata è, in buona sostanza, quella dell'HTML4.01. […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.