Per farlo senza ricorrere ad html5 esistono principalmente due modi:

1. Utilizzare un’overlay con un div e css. Elegante ma limitato alle forme rettangolari.
2. Sostituire l’immagine. Un po macchinoso soprattutto quando ci sono molte aree cliccabili.

Considerando come priorità la rapidità e semplicità di creare una mappa del genere ho creato uno script, lo potete scaricare alla fine di questo articolo, che utilizza come input i file prodotti da gimp.

Nel menu filtri > web di gimp trovate uno strumento per creare in modo visuale delle mappe immagine in html.

Specificate un indirizzo e un nome per ogni area creata e salvate il file html e l’immagine nella stessa cartella dello script, l’immagine deve essere in formato png e i file devono chiamarsi immagine.png e immagine.html, vedete l’esempio.

Lo script analizza il file html estrapolando le informazioni sulle varie aree e per ognuna di queste crea una versione dell’immagine di base con l’area evidenziata.

In seguito crea un file html da utilizzare come base di partenza per la pagina dove utilizzerete l’immagine, questo file contiene oltre alla mappa anche lo script javascript che si occupa di effettuare il preload delle immagini e il cambio dell’immagine al passaggio del mouse.

Scarica lo script (Pronto da provare, include un’immagine e relativo file html).

Scarica la demo (Il file html e le immagini prodotte dallo script qua sopra.)

Il sistema si chiama wordrain, dove rain è appunto quello che in genere accade quando ci sono le cloud.

Nell’organizzazione tipica di una word cloud (o tag cloud) le parole chiave vengono mostrate con un carattere più grande in base al numero di oggetti ai quali è attribuita la parola chiave, selezionando una parola chiave vengono mostrati i relativi oggetti (immagini, articoli ecc).

Ma un oggetto difficilmente può essere descritto da una sola parola chiave, il primo passaggio è quindi molto semplice, dare la possibilità di navigare il sito selezionando dalla word cloud più di una parola chiave.

Ad ogni passaggio vengono mostrate nella ormai wordrain, ovviamente, solo le parole chiave associate con gli oggetti che contengono anche la prima.

Facciamo un esempio, immaginiamo di avere una wordrain per tre immagini

1. Un pallone rosso: con le parole chiave “pallone” e “rosso”.
2. Un pallone giallo: con le parole chiave “pallone” e “giallo”.
3. Un fiore giallo con le parole chiave “fiore” e “giallo”.

Selezionando la parola chiave giallo verranno mostrate le immagini del pallone giallo e del fiore e una wordrain che contiene solo le parole chiave pallone e fiore.
Selezionando pallone come seconda parola chiave verrà mostrato solo il pallone giallo.
Deselezionando la parola giallo verranno mostrati entrambi i palloni.

Il vantaggio di questo sistema, rispetto ad una ricerca tradizionale dove l’utente scrive le parole chiave, sta nella scelta visuale dove l’utente seleziona la parola chiave tra quelle proposte invece di un sistema che deve interpretare i desideri dell’utente.

Aggiungendo e rimuovendo parole chiave si può navigare agevolmente il contenuto del sito.

Per farlo servono 3 tabelle, una tabella per gli oggetti, una per le parole chiave e una per l’associazione molti a molti delle due.

La query per trovare gli oggetti selezionati in mySql potrebbe essere qualcosa del genere:

SELECT
  oggetto.titolo,
  oggetto.url,
  associazione.voto
FROM
  oggetto,
  associazione
WHERE
  oggetto.id = associazione.idOggetto
  AND (associazione.idTag = x or ... or associazione.idTag
 = z)
GROUP BY
  oggetto.id

Un altro punto importante, come si può notare nella SELECT è l’attributo voto nell’associazione, una parola chiave infatti può rappresentare un oggetto più di un’altra e quindi perchè non dare la possibilità di votare le parole chiave in modo da avere una rappresentazione non solo per numero di associazioni ma anche per pertinenza.

In questo modo si possono creare due tipi diversi di wordrain, secondo il sistema classico per numero di oggetti associati a quella parola chiave o per un rapporto tra la votazione e il numero di associazioni.

Immaginate di cercare un’immagine con delle foglie rosse, selezionate prima la parola chiave “foglie” e poi vi trovate 100 immagini di foglie verdi con qualcosa di rosso come un frutto e una sola immagine di foglie rosse.
Per la seconda la parola chiave “rosso” avrà un punteggio molto più alto delle altre e verrà mostrata prima.

Appena ho tempo metterò a disposizione qualche implementazione del sistema, i codici che ho al momento non sono molto leggibili, ma gradirei avere una vostra opinione e se volete potete linkare qua le vostre applicazioni delle wordrain.