Questo sito utilizza cookie, anche di terze parti, per migliorare la tua esperienza e offrire servizi in linea con le tue preferenze. Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie

Rimani informato sugli aggiornamenti di SOS-OFFICE. Inserisci il tuo indirizzo e-mail: Informativa sulla privacy

Gli editor per Joomla, non consentono di inserire mappe immagine in un articolo. Occorre crearle con qualche strumento esterno e poi incollarle come codice nell'articolo. Chi non disponesse di software come Dreamweaver che permettono di costruire le mappe immagine per poi incollarle nel proprio sito Joomla, può ricorrere a dei servizi on-line.

Ci sono vari siti che permettono, a costo zero, di crearsi le proprie mappe immagine. Uno di questi è http://www.maschek.hu/imagemap/imgmap. Proviamo ad utilizzarlo.

La prima cosa da farsi, è indicare quale immagine si vuole usare come base per la mappa. Il codice costruito, non conterrà alcun riferimento a questa immagine (il riferimento andrà poi creato manualmente): l'immagine indicata servirà solo per definire le coordinate delle aree cliccabili dell'immagine.

Potete scegliere se caricare una immagine dal vostro computer o indicare una immagine già pubblicata su Internet (esiste anche la possibilità di usare una immagine campione, ma non è molto utile). Una volta indicata l'immagine, premete il pulsante accept, posto accanto alla riga che permette di indicare l'immagine da usare.

Una volta che l'immagine è stata caricata, nella parte bassa della finestra, potete passare ad inserire la prima area cliccabile.

La prima cosa da fare è scegliere il tipo di forma che deve avere l'area cliccabile, quindi bisogna fare clic sull'immagine e disegnare l'area cliccabile in modo che la casella Coords si popoli con le coordinate dell'area che state definendo. Fatto questo, bisogna inserire nella casella Href l'indirizzo della pagina (completo di protocollo http, se esterno al proprio sito) da aprire al clic sull'area cliccabile ed eventualmente si può scegliere la destinazione del collegamento dall'elenco a discesa Target (oltre ad un testo alternativo per il collegamento nella casella Alt).

Quando avete finito di definire la prima area, potete passare alla seconda con la stessa tecnica vista per la prima.

Notate che nell'editor l'area ha lo stesso numero che vedete sull'immagine.

Quando avete finito di creare la mappa immagine, cioè di definire tutte le aree cliccabili, premete il collegamento Code in basso alla finestra.

Visualizzerete il codice che genera la mappa. Selezionatelo e copiatelo per intero (se volete potete evitare il commento che comincia con il <!-- e finisce con -->)

A questo punto, potete tornare a Joomla, o meglio all'articolo che contiene l'immagine da trasformare in una mappa immagine. Se già non lo avete fatto, inserite al suo interno l'immagine che avete usato per definire le aree cliccabili. Siccome una immagine legata ad una mappa immagine è in qualche modo un collegamento, alcuni browser le mostrano, una volta trasformata in mappa, un bordo blu tutto intorno.

Per evitare che questo accada, ricordativi di assegnare esplicitamente all'immagine un bordo uguale a zero.

Fatto questo, occorre passare a visualizzare il codice HTML che genera l'articolo. Ci sono diversi modi per farlo, il più veloce consiste nel premere il pulsante Editor si/no, sotto alla finestra dell'editor o coi pulsanti propri dell'editor ( , se usate tinyMCE  o , se usate JCE).

Individuate l'immagine (<img src....> e copiate al di sotto il codice copiato dal sito che permette di generare le mappe.

Individuate nel codice della mappa il valore dell'attributo ID e copiatelo. Spostatevi nel codice che inserisce l'immagine e, prima della chiusura del tag (/>), scrivete usemap="# e incollate di seguito il codice copiato, quindi chiudete le virgolette.

La mappa immagine è pronta. Potete tornare a visualizzare l'articolo non come codice HTML ripremendo il pulsante Editor Si/no.

Purtroppo TinyMCE cancella la aggiunta usemap al vostro codice. Per evitare che questo accada, visualizzate il plugin (Estensioni > Gestione plugin) dell'editor e apritelo. Fra le sue proprietà individuate Pulizia codice al salvataggio e selezionate il valore Mai.
Joomla templates by a4joomla