Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Mappatura di un'immagine

di Maria Silvana Radice








Come mappare un'immagine
How to map an image


Mappare un'immagine significa dividerla in zone con la possibilita` di collegare ciascuna zona ad un testo, o ad un link.
Il codice che vi propongo serve per creare la mappa di un'immagine responsive, adattabile, quindi, allo schermo dei diversi dispositivi mobili. Potete scaricare il pacchetto contenente i file andando a questo indirizzo:

https://github.com/davidjbradshaw/image-map-resizer

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 style="text-align: center">
        <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.


Per inserire questa mappa in Google sites, seguite la guida Come inserire codici e scripts in Google sites, nella sezione "Codici contenuti in una cartella con piu` file".





Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?