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.

Per prima cosa, rammentiamo di posizionare sempre nella sezione head di ciascuna pagina del nostro sito il seguente tag:

<meta name=”viewport” content=”initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width” />

che “forza” il riferimento alla risoluzione effettiva del dispositivo, evitando che quest’ultimo riduca la pagina per visualizzarla interamente nello schermo (in orizzontale), ed impedisce lo zoom da parte dell’utente.

Colleghiamo la libreria di base di jQuery ed il file del plugin, ed inseriamo lo script necessario ad attivarne l’operato, sempre nella sezione head oppure nella sezione body, appena prima del relativo tag di chiusura:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.rwdImageMaps.js”></script>
<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>

(attenzione al percorso relativo, che deve essere corretto per la struttura di cartelle che ciascuno ha adottato).

Nella sezione body, inseriamo ora un contenitore con, all’interno, l’immagine a cui sono applicati dei punti (aree) attive:

<div id=”splash”>

<img src=”immagini/home.jpg” width=”720″ height=”602″ alt=”qui il testo alternativo”>
<map name=”Map”>
<area shape=”rect” coords=”8,232,132,259″ href=”chi-sono.html” target=”_self” alt=”Chi sono”>
<area shape=”rect” coords=”6,279,205,313″ href=”cosa-faccio.html” target=”_self” alt=”Cosa faccio”>
<area shape=”rect” coords=”8,329,87,362″ href=”dove-sono.html” target=”_self” alt=”Dove sono”>
<area shape=”rect” coords=”8,433,130,465″ href=”contatti.html” target=”_self” alt=”Contatti”>
<area shape=”rect” coords=”2,381,221,417″ href=”video.html” target=”_self” alt=”Video”>
<area shape=”rect” coords=”499,279,720,402″ href=”news.html” target=”_self” alt=”News”>
</map>

</div>

Si noti quanto segue:

– si sta impiegando il set di raccomandazioni di HTML5, quindi il tag img non richiede lo slash finale;
– sono stati specificati gli attributi width e height dell’immagine con i relativi valori (questo è richiesto dal plugin che useremo);
– specificare target=_self è superfluo poiché questo è il comportamento di default di un hyperlink;
– il tag area richiede come attributo alt, vale a dire il testo alternativo; qualora questo venga omesso, la pagina non passa la validazione del W3C.

Nel foglio di stile di base avremo:

#splash {
width: 720px;
height: 602px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -301px;
margin-left: -360px;
overflow: hidden;
}
#splash img {
/* per le vecchie versioni di IE – evita la comparsa del bordo blu intorno all’immagine */
border: 0 none;
}

L’immagine viene quindi collocata tramite un box posizionato in modo assoluto e centrato nella pagina, avente una certa dimensione.

Avremmo anche potuto dimensionarla al 100% ma se le pagine interne del sito hanno una dimensione fissa, per esempio i tradizionali 960px, questa soluzione determina un “salto” dimensionale dalla index alle pagine interne che risulta piuttosto sgradevole.

Su schermi “normali”, vale a dire dei dispositivi desktop, notebook, e tablet con orientamento panoramico (landscape, nel linguaggio delle media query) l’immagine viene visualizzata interamente mentre negli smartphone e nei tablet con orientamento ritratto (portrait) verrebbe tagliata, quindi dovremo aggiungere una media query specifica nel foglio di stile del tipo:

@media (max-width: 768px) {

#splash {
width: 99%;
height: auto;
position: static;
margin: 0;
padding: 0;
}
#splash img[usemap] {
width: 99%;
height: auto;
}

}

Il dimensionamento al 99%, invece che al 100%, permette di lasciare un leggero margine sui quattro lati, utile se l’immagine è stata ritagliata al filo dei contenuti e questi risulterebbero appiccicati ai bordi della viewport.

In corrispondenza degli eventi load e window.resize, il plugin wdImageMaps jQuery entra in gioco e “sposta” i punti attivi in funzione del resizing dell’immagine, rendendo i collegamenti ipertestuali ad essi associati sempre validi.

E’ possibile prevedere più breakpoint, cioè più ipotesi di media query, in funzione delle dimensioni dell’immagine e del risultato che si desidera ottenere.
L’ipotesi definita sopra è semplice perché prevede solo 1 media query.

Un’ultima annotazione riguarda specificamente i dispositivi mobili firmati Apple e basati su iOs: alcune volte, infatti, il cambio di orientamento del tablet o smartphone da ritratto a panoramico o viceversa, genera problemi nelo zoom cioè, di fatto, nel ridimensionamento del layout reattivo e nella ridisposizione dei contenuti (questo accade non solo in presenza di immagini con punti attivi ovviamente, bensì in generale).

Una valida soluzione è l’utilizzo di uno script chiamato iOS-Orientationchange-Fix e scaricabile da questa pagina: https://github.com/scottjehl/iOS-Orientationchange-Fix

Plugin: wdImageMaps jQuery plugin
Sito dell’autore: http://mattstow.com
Download: https://github.com/stowball/jQuery-rwdImageMaps