Supponiamo di dovere inserire un’immagine con punti attivi in una pagina di un sito adattivo, o reattivo (“responsive“), che – cioè – si ridimensioni (e quando necessario, ridisponga i suoi elementi) in base alla risoluzione dello schermo del dispositivo su cui il sito viene visualizzato.

Il problema è costituito dal fatto che la mappa comprende delle coordinate di punti che cessano di avere valore nel momento in cui l’immagine subisce il ridimensionamento; se quest’ultimo è elevato, quindi, le aree attive si spostano non corrispondendo più con le zone dell’immagine da cliccare.

Queste immagini si utilizzano, per esempio, al fine di realizzare delle pagine introduttive, talvolta chiamate splash pages, in cui a diverse zone dell’immagine stessa corrispondono dei link alle differenti pagine, o parti, del sito.

E’ possibile risolvere il problema appena esposto tramite l’uso dei CSS3 e di un plugin per jQuery chiamato wdImageMaps jQuery (crediti e link per il download in fondo a questo articolo).

Vediamo dunque come procedere.

Continua a leggere→