Come mappare un’immagine responsive

Come mappare un’immagine responsive

In questo breve articolo ti mostrerò quanto sia semplice mappare un’immagine responsive funzionante su qualsiasi dispositivo.

Realizzare la mappatura di un’immagine può essere molto utile nel caso in cui si debbano mettere più link su diverse porzioni di un’immagine.

Con l’aumento dell’utilizzo di dispositivi mobile, è necessario adattare questa tecnica anche alle immagini responsive, in modo da renderle utilizzabili anche su smartphone e su tablet.

Per mappare un’immagine responsive, quindi, ci sono delle accortezze in più da tenere in considerazione.

Questo è un esempio di ciò che otterrai con il codice che sto per mostrarti: come noterai, solo alcune delle aree dell’immagine (nello specifico i tre quadrati) sono cliccabili.

Vedi esempio »

Partiamo dal codice generico:

<img src="immagine.jpg" usemap="#imm" width="100%" height="auto" border="0" />
<map name="imm">
  
</map>

La prima cosa da fare è inserire l’immagine aggiungendo l’attributo usermap=”#imm” (dove #imm può essere sostituito con qualsiasi altro valore).
Ricordati di specificare le dimensioni, ovvero width=”100%” e height=”auto”, in modo da rendere l’immagine responsive.

Il tag <map> deve essere accompagnato dall’attributo name=”imm” (il valore deve essere uguale a quello di usermap); al suo interno andremo a posizionare i link delle aree cliccabili.
Il codice qui di seguito è quello che ho utilizzato per realizzare l’immagine in alto:

<img src="https://www.professionewebdesigner.it/wp-content/uploads/2016/11/mappatura-immagine.jpg" usemap="#imm" width="100%" height="auto" border="0" />
<map name="imm">
  <a href="#" title="" style="position: absolute; left: 5.65%; top: 10%; width: 23.19%; height: 80%; z-index: 2;"></a>
  <a href="#" title="" style="position: absolute; left: 38.55%; top: 9.5%; width: 23.19%; height: 80%; z-index: 2;"></a>
  <a href="#" title="" style="position: absolute; left: 70.87%; top: 10.5%; width: 23.19%; height: 80%; z-index: 2;"></a>
</map>

Come puoi notare, i valori inseriti nei link delle aree cliccabili sono espressi in percentuale: in questo modo, qualsiasi sia la dimensione dell’immagine, i valori manterranno sempre la stessa posizione.

L’unica cosa che ti resta da fare è trovare le coordinate precise: per fare questo puoi utilizzare uno qualsiasi dei tantissimi tools gratuiti presenti online, come Responsive Image Map Generator, che ti permette di individuare i valori di ogni area cliccabile.

Puoi utilizzare questo codice sui browser Chrome, Firefox, Safari ed Explorer e su qualsiasi dispositivo mobile per realizzare le tue mappe interattive!

Sì, voglio restare aggiornato!

Sì, voglio restare aggiornato!

Sì, voglio restare aggiornato sulle prossime guide per sviluppatori, le recensioni esclusive e le risorse gratuite di Professione Web Designer.

Sono consapevole che i miei dati non verranno ceduti a terzi ma saranno utilizzati solamente per scopi informativi.

You have Successfully Subscribed!

Related Posts