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.



Primo esempio:




Nell'esempio ho colorato le varie zone in modo diverso, ma e` chiaro che, nell'immagine reale, i confini possono essere invisibili.
Per ottenere questo effetto, dovete scaricare la cartella in formato zip....


....(in allegato anche a fondo pagina)  e scompattarla.
All'interno, troverete tre file:
  • mappa.gif
  • menu.js
  • index.html
Aprite il file index.html, usando il blocco note, o un qualunque editor di testo (click col dx->apri con).

Ecco il codice che apparira`:


<html>
<head>
<script language="javascript" type="text/javascript" src="menu.js">
</script>
</head>
<body onmouseover="initCoords();" onclick="hideMenu();">
        
<!-- INSERISCO LA MAPPA E LE RELATIVE AREE SENSIBILI -->

<img src="mappa.gif" alt="mappa" usemap="#miaMappa" />

<map id="miaMappa" name="miaMappa">

<area shape="rect" coords="0,0,100,80"
href="#" onmouseout="updateMenuState(false);"
onmouseover="showMenu('menuA');" />

<area shape="rect" coords="100,0,200,80"
href="#" onmouseout="updateMenuState(false);"
onmouseover="showMenu('menuB');" />

<area shape="rect" coords="200,0,300,80"
href="#" onmouseout="updateMenuState(false);"
onmouseover="showMenu('menuC');" />

<area shape="rect" coords="0,80,100,160"
href="#" onmouseout="updateMenuState(false);"
onmouseover="showMenu('menuD');" />

<area shape="rect" coords="100,80,200,160"
href="#" onmouseout="updateMenuState(false);"
onmouseover="showMenu('menuE');" />

<area shape="rect" coords="200,80,300,160"
href="#" onmouseout="updateMenuState(false);"
onmouseover="showMenu('menuF');" />       
</map>

<!-- FINE MAPPA -->
           
<!-- DEFINISCO I MENU' DA VISUALIZZARE -->

<div id="menuA" onmouseover="updateMenuState(true);"
onmouseout="updateMenuState(false);"
style="visibility: hidden; position: absolute; width: 100px;
color: #000000; background-color: #CCCCCC;">
Contenuto A
</div>
        
<div id="menuB" onmouseover="updateMenuState(true);"
onmouseout="updateMenuState(false);"
style="visibility: hidden; position: absolute; width: 100px;
color: #000000; background-color: #CCCCCC;">
Contenuto B
</div>

<div id="menuC" onmouseover="updateMenuState(true);"
onmouseout="updateMenuState(false);"
style="visibility: hidden; position: absolute; width: 100px;
color: #000000; background-color: #CCCCCC;">
Contenuto C
</div>

<div id="menuD" onmouseover="updateMenuState(true);"
onmouseout="updateMenuState(false);"
style="visibility: hidden; position: absolute; width: 100px;
color: #000000; background-color: #CCCCCC;">
Contenuto D
</div>

<div id="menuE" onmouseover="updateMenuState(true);"
onmouseout="updateMenuState(false);"
style="visibility: hidden; position: absolute; width: 100px;
color: #000000; background-color: #CCCCCC;">
Contenuto E
</div>

<div id="menuF" onmouseover="updateMenuState(true);"
onmouseout="updateMenuState(false);"
style="visibility: hidden; position: absolute; width: 100px;
color: #000000; background-color: #CCCCCC;">
Contenuto F
</div>

<!-- FINE MENU' -->
        
</body>
</html>

I parametri da personalizzare sono quelli in rosso, in questo modo:
  • mappa.gif: e` l'immagine da mappare, dovete indicarne il percorso. Se la sostituite, lasciandola nella cartella e senza cambiarne il nome, non dovrete modificare nulla nel codice.
  • coords="0,0,100,80": (e tutti i successivi): sono le coordinate delle zone mappate. Guarda: Coordinate delle zone di un'immagine
  • area shape="rect": indica la forma della zona mappata, che puo` essere rettangolare (rect), rotonda (circle), o poligonale (poly).
  • width: 100px: e` la larghezza del tooltip (casella di testo) che appare al passaggio del mouse su una zona.
  • Contenuto (ABCDEF): qui dovete inserire il contenuto del tooltip.
Per andare a capo nel tooltip, dovete usare il tag <br>. Esempio testo<br>testo, apparira`....
testo
testo

Se volete inserire un collegamento..

..dovete usare questa stringa:

<a href="URLcollegamento" target="_blank">Testo</a>

Anche le stringhe per i link possono essere separate con il tag <br>, posto tra la chiusura della prima stringa e l'apertura della seconda (</a><br><a href=......).

In questo caso, dato che il tooltip segue i movimenti del mouse creando difficolta` per il click, e` molto meglio farlo aprire cliccando sulla zona mappata, quindi usando il tag onclik, al posto del tag onmouseover, indicato in verde nel codice.

Il file menu.js non deve essere modificato.

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".

Secondo esempio:

Vi propongo anche un altro tipo di mappatura che mi pare interessante:



Come potete vedere, in questo caso, il testo appare in un'apposita casella posta sotto all'immagine e cambia spostando il mouse sulle varie zone. Il codice per ottenere questo effetto e` contenuto tutto nel file.html ed e` il seguente:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

#info {
  position:relative;width:320px;height:100px;border:solid black 1px;
}

.info {
  position:absolute;width:320px;height:100px;background-Color:#DCF4F4;
}

</style>
<script type="text/javascript">

function showInfo(id,nu){
 var obj=document.getElementById(id);
 var frames=zxcByClassName(id,obj);
 if (frames[nu]){
  if (obj.lst){
   obj.lst.style.zIndex=0;
  }
  obj.lst=frames[nu];
  obj.lst.style.zIndex=1;
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),
els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

</script>

</head>

<body>
<img src="URLimmagine" name="interactiverig" width="320" height="213"
border="0" usemap="#showcompartments" id="interactiverig">

<div id="info" >
<div class="info" >zona 0</div>
<div class="info" >zona 1</div>
<div class="info" >zona 2</div>
</div>

<map name="showcompartments">

  <area shape="rect" coords="0,0,107,107"
href="#0" onMouseOver="showInfo('info',0)" >

  <area shape="rect" coords="212,0,320,107"
href="#1" onMouseOver="showInfo('info',1)" >

  <area shape="rect" coords="107,107,212,213"
href="#2" onMouseOver="showInfo('info',2)" >

 </map>
</body>
</html>

I parametri da modificare sono quelli in rosso, in questo modo:
  • width:320px: e` la larghezza della casella di testo sotto all'immagine. Potete impostarla della stessa larghezza dell'immagine, come nell'esempio, oppure restringerla. (questa dimensione va riportata, uguale, anche nella stringa successiva)
  • height:100px: e` l'altezza della casella di testo. (questa dimensione va riportata, uguale, anche nella stringa successiva)
  • border:solid black 1px: stile, colore e spessore del bordo intorno alla casella di testo. Leggi anche: Come incorniciare testo (e immagini).
  • background-Color:#DCF4F4: e` il colore di fondo della casella di testo. Potete inserirlo tramite il Nome inglese  o il codice web (Editor colori).
  • URLimmagine: indirizzo dell'immagine mappa.
  • width="320": larghezza dell'immagine.
  • height="213: altezza dell'immagine.
  • border="0": bordo intorno all'immagine. Se volete il bordo, impostate il valore su 1.
  • zona 0/1/2: testo che apparira` passando con il mouse sulle varie zone, in ordine sequenziale.
  • 0,0,107,107 (e seguenti): coordinate delle zone mappate. Guarda: Coordinate delle zone di un'immagine
Se volete aggiungere altre zone, dovete aggiungere una stringa per il testo....

<div class="info" >zona X</div>

....e una stringa con le coordinate....

<area shape="rect" coords="0,0,107,107" href="#driverdoor" onMouseOver="showInfo('info',X)" >

....mettendo sempre il giusto numero sequenziale al posto dell X.

Per mettere un link nella zona testo e per andare a capo, vale quanto detto nell'esempio precedente.

Mappa immagine responsive:

Con l'attuale esigenza di ottimizzare il sito per i dispositivi mobili, ci dobbiamo adeguare anche con le mappe di immagine.
Per mappare un'immagine in modo che sia responsive e si adatti, quindi, alle varie larghezze dello schermo, potete usare questo codice:

<html>
        <head>
            <meta charset="utf-8">    
        </head>

        <body>
            <div data-role="page" id="wrapper">    
                
     <!-- container for banner video -->
    <div data-role="content" id="banner">  
      <div class="divWrapper">  
     
       <!-- image map -->
<img src="URLimmagine"alt="character vhs tapes" width="100%" height="auto" usemap="#vhstapes" border="0" >     
      
<map name="vhstapes">
    
<a href="URLcollegamento" target="_blank" title="" style="position: absolute; left: 2.8%; top: 4.61%; width: 11.76%; height: 19.12%; z-index: 2;"></a>

<a href="URLcollegamento" target="_blank" title="" style="position: absolute; left: 58.4%; top: 28.57%; width: 15.13%; height: 23.27%; z-index: 2;"></a>
 
 </map>
       </div>
     </div>
                  
            </div><!-- /page -->

        </body>
    </html>

Come potete notare, le distanze dei punti mappati (in questo caso due), sono indicate in percentuale. Giustamente, vi chiederete come si possa ottenere questi dati. Farlo manualmente sarebbe un po' complicato, ma, per fortuna, ci sono ottimi programmi online che fanno questo per noi. Ve ne indico uno: http://www.zaneray.com/responsive-image-map/

Dopo aver ottenuto le coordinate, tramite questo programma, le inserite nel codice dato sopra. Dovete inserire, naturalmente, anche l'indirizzo della vostra immagine.


Per inserire queste mappe in Google sites, seguite la guida Come inserire codici e scripts in Google sites.






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

Ti e` stato utile questo argomento?










ċ
map onmouseover.zip
(6k)
Maria Silvana Radice,
18 mar 2015, 15:41