Attenzione: l'articolo è stato scritto da oltre 1 anno, le informazioni in esso contenute potrebbero essere datate e non più attuali.

Creiamo mappe html cliccabili

E' molto facile imbattersi, navigando sul web, in immagini che rimandano a pagine diverse a seconda del punto in cui si clicca.

Un tipico esempio è rappresentato dalle home page di grandi aziende multinazionali in cui è presente una cartina sulla quale cliccare per scegliere la versione localizzata del sito che vi interessa. Per realizzare queste mappe cliccabili esistono diversi metodi (è possibile farlo anche con i css, o fogli di stile -- altro tutorial). Il metodo più classico e semplice è quello di ricorrerre all'html. Basta qualche riga di codice ed è fatto. Per renderci più semplice l'operazione esistono alcuni software che ci vengono incontro scrivendo per noi il codice necessario. Vediamone qualcuno.
Nota: l'utilizzo di elementi non testuali all'interno delle pagine web è in generale sconsigliato per la difficoltà di accesso alle pagine che può provocare e ai motori di ricerca che non riescono a indicizzare tali collegamenti. Ovviamente stando attenti ai due fenomeni potete tranquillamente usarli.

Gimp per il Web

Forse non ve lo aspettavate ma Gimp può essere usato anche per questo. Per farvi capire come operare rispolvererò un menù che avevo preparato per un mio vecchio sito e vedremo come aggiungere queste caratteristiche. Apriamo l'immagine del menu, o altra, in Gimp e avviamo il plug-in: Filtri / Web / Mappa Immagini:

Mappa immagini Gimp

Nella parte sinistra abbiamo i vari strumenti da poter usare: rettangolo, cerchio, poligono. Selezioniamo il rettangolo, facciamo il primo click nel vertice della forma che vogliamo selezionare e poi un secondo click per chiudere il rettangolo. Si aprirà una finestra nella quale dovremo inserire il tipo di link, il testo opzionale, elementi javascript, aggiustare le dimensioni del rettangolo e altro. Appena finito premiamo su OK e continuiamo con le altre selezioni fino a concludere il nostro lavoro.
Appena finito possiamo salvare la mappa e soprattutto andare in visualizza / Sorgente...
Ecco un esempio di codice generato

<img src="menu.png" width="248" height="280" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.0 -->
<!-- #$AUTHOR:Mike Vargas -->
<area shape="rect" coords="99,3,199,32" href="index.html" />
</map>









Come potete vedere nel tag img c'è un richiamo alla mappa chiamata map, questo codice manca di tag necessari per una pagina web come html, head, body, ecc... Quindi dovrete copiare il codice in una pagina web esistente o crearne una ex-novo e inserire il codice ottenuto.

Kimagemapeditor

Kimagemapeditor è un programma standalone per la generazione di mappe cliccabili basato sulle librerie grafiche Qt (quelle di Kde per intenderci). Il programma può aprire immagini o direttamente pagine web (contenenti ovviamente immagini), in questo secondo caso il programma ci farà selezionare l'immagine che vogliamo rendere cliccabile. Per il resto l'uso è simile a quello visto per il plugin di Gimp con l'unica caratteristica che la mappa non viene associata all'immagine, ma saremo noi a doverlo fare nell'etichetta Images o dal menu: Image / Edit usemap:

Kimagemapeditor

Nota: nel caso di Kimagemap il file creato con File / Save as.. sarà completo di tutti i tag necessari.

Integrazione con Quanta

Una caratteristica di rilievo di Kimagemapeditor è la possibilità di integrarlo in Quanta come plugin. La procedura è ben spiegata sul sito del progetto. Se avete le ultime versioni di entrambi i software basta andare in Plugin / Modifica, poi Aggiungi e riempire la finestra in questo modo:

Per richiamare il plugin basterà sceglierlo dal menù Plugin ;) e per chiuderlo basterà compiere la stessa operazione.

Integrazione con Konqueror

Kimagemap viene automaticamente incluso anche in altre applicazioni Kde. Ad esempio dopo aver aperto una pagina Web con Konqueror basta andare in Visualizza / Modalità di visualizzazione / Kimagemapeditor per modificare le immagini contenute nella pagina. Dopo aver scelto l'immagine da modificare andate in Maps, cliccate col tasto destro e scegliete New Map. Da questo momento operate come sopra.

Argomenti correlati

Il tuo voto: Nessuno Media: 3.5 (2 voti)

Commenti

A me non esce l'immagine

Scusa, a me non esce l'immagine, esce un rettangolo trasparente cn una crocetta quando lo posto sul mio sito!

hai caricato l'immagine sullo

hai caricato l'immagine sullo spazio del sito?

mappe di gimp

ciao, scusa io ho creato un collegamento con gimp, poi ho salvato il tutto ma non riesco a inserire l immagine nel mio blog???

Gimp ti crea il codice html,

Gimp ti crea il codice html, devi copiare il codice in un post del blog e poi caricare l'immagine sul sito. A seconda di dove la carichi potrebbe essere necessario modificare il percorso vero l'immagine:
src="menu.png"
Ciao