Mappa di un'immagine responsive
con zone cliccabili
Visita anche
Risorse per i webmaster
archivio di risorse per la creazione dei siti web
Per ottenere la mappa di un'immagine che sia responsive, cioè ottimizzata per i dispositivi mobili, è possibile utilizzare la libreria jQuery.
Ecco il codice:
<style>
.map-container {
margin: 0 auto;
color:
#267;
text-align: center;
font-size:
1.4rem;
font-weight:
bold;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
<div class="map-container">
<img src="
URL immagine" usemap="#map">
<map name="map" id="map">
<area class="
zona1" shape="
rect" coords="
0,0,100,80" href="#" title="
Uno">
<area class="
zona2" shape="
rect" coords="
100,0,200,80" href="#" title="
Due">
<area class="
zona3" shape="
rect" coords="
200,0,300,80" href="#" title="
Tre">
<area class="
zona4" shape="
rect" coords="
0,80,100,160" href="#" title="
Quattro">
<area class="
zona5" shape="
rect" coords="
100,80,200,160" href="#" title="
Cinque">
<area class="
zona6" shape="
rect" coords="
200,80,300,160" href="#" title="
Sei">
</map>
<div class="selection">
<p>
click su una zona</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" integrity="sha256-H0jJMH37jcA7SQWWbILbmKZkAQyD6pUqbR46qtwAcDs=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('focus', function(e) {
e.preventDefault();
$('.selection p').html($(this).attr('class'));
});
$(document).on('click', function(e) {
if ( $(e.target).closest('area').length === 0 ) {
$('.selection p').html('click su una zona');
}
});
});
</script>
I parametri da personalizzare sono quelli in rosso, in questo modo:
- color: #267: colore del testo sotto all'immagine
- font-size: 1.4rem: dimensione del testo sotto all'immagine
- font-weight: bold: testo in grassetto (se non desiderato, sostituire con "normal")
- URL immagine: indirizzo (percorso) dell'immagine.
- class="zona1" (2/3/4/5/6): titolo della zona
- shape="rect": indica la forma della zona mappata, che può essere rettangolare (rect), rotonda (circle), o poligonale (poly).
- Titolo: qui dovete inserire il testo del tooltip.
Naturalmente, al posto delle coordinate di esempio, dovrete mettere le vostre coordinate. Maggiori informazioni leggendo:
Coordinate delle zone di un'immagine
Al posto di "
click su una zona" potete mettere il testo che preferite.
Se volete che, cliccando su una zona, si apra un collegamento interno, o esterno, potete inserirne il percorso, o l'indirizzo, al posto del cancelletto in
href="#".
Alternativa
Potete usare questo tool online che ottiene il risultato senza script utilizzando le svg.
Image mapper
Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.
Aiuta il sito! Condividi questa pagina su:
Continua con:
Leggi anche: Creare un sito da zero