Come mappare un'immagine

Per ottenere la mappa di un'immagine che sia responsive, cioè ottimizzata per i dispositivi mobili, vi consiglio di scaricare questa libreria:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Per facilitare le cose ai meno esperti, ecco un esempio di come va costruito il codice html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    </head>
<body>
<div >
        <img style="width:100%; max-width:300px;" name="Image-map" src="URLimmagine" usemap="#image-map" border="0">
    </p>
    <map name="image-map">

            <area shape="rect" coords="0,0,100,80" href="#" title="Titolo" alt=""/>

            <area shape="rect" coords="100,0,200,80" href="#" title="Titolo" alt=""/>

            <area shape="rect" coords="200,0,300,80" href="#" title="Titolo" alt=""/>

            <area shape="rect" coords="0,80,100,160" href="#" title="Titolo" alt=""/>

            <area shape="rect" coords="100,80,200,160" href="#" title="Titolo" alt="" />

            <area shape="rect" coords="200,80,300,160" href="#" title="Titolo" alt="i" />

    </map>
</div>
    <script src="https://code.jquery.com/jquery-3.2.0.min.js"
    integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/imageMapResizer.min.js"></script>
    <!--[if lte IE 8]>
        <script type="text/javascript" src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
        $('map').imageMapResize();
    </script>
</body>
</html>

I parametri da personalizzare sono quelli in rosso, in questo modo:
  • max-width:300px: e` la larghezza massima dell'immagine.
  • URLimmagine: indirizzo dell'immagine.
  • area shape="rect": indica la forma della zona mappata, che puo` essere rettangolare (rect), rotonda (circle), o poligonale (poly). Naturalmente, al posto delle coordinate di esempio, dovrete mettere le vostre coordinate. Maggiori informazioni leggendo: Coordinate delle zone di un'immagine
  • href="#": Al posto del cancelletto, potete mettere l'indirizzo di un collegamento che volete far aprire cliccando sulla zona.
  • Titolo: qui dovete inserire il testo del tooltip.

Non dimenticate di mettere il percorso corretto del file imageMapResizer.min.js relativo alla posizione in cui si trova nella vostra cartella.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti