In questo tutorial vediamo come impostare una mappa interattiva cliccabile simile a quella che troviamo nell’home page di siti di annunci come subito o kijiji. L’obiettivo è quello di limitare il codice al minimo per permettere a tutti di seguire il metodo, anche da chi possiede solo qualche minima conoscenza di html.

La mappa cliccabile è stata testata con le ultime versioni dei browser desktop più diffusi, tuttavia se noti qualche problema o vuoi aiutarmi a migliorare il tutorial puoi lasciare un commento.

Nel tutorial utilizziamo i software: Photoshop, Illustrator e l’editor Sublime Text

1. Scegliamo un’immagine

Scarichiamo una cartina dell’Italia con i confini delle regioni ben delimitati.

2. Apriamo l’immagine con photoshop

Per ogni regione è necessario ottenere un file separato con la regione in evidenza. La mappa interattiva sarà basata su un effetto rollover che causa la sostituzione dell’immagine al passaggio del mouse attraverso l’uso di uno script jquery.

Mappa interattiva esempio regione sardegna

Per ottenere le 20 immagini seguiamo questi passaggi:

  1. Selezioniamo una regione con la bacchetta magica (w).
  2. Col tasto destro scegliamo ‘crea livello copiato‘.
  3. Coloriamo la regione con un pennello (b) con il nuovo livello selezionato.
  4. Salviamo provando a limitare al minimo il peso di ciascuna immagine (‘file>Salva per dispositivi web‘)

Prima di chiudere Photoshop creiamo un file .psd. Nel file è presente un livello per ogni regione evidenziata più un livello che contiene l’immagine originale.

3. Mappiamo l’immagine con Illustrator

Mappare l’immagine significa assegnare a ogni regione della mappa un link.
Apriamo il file .psd con illustrator assicurandoci che ogni livello sia considerato come oggetto separato.

A questo punto lavoriamo con una regione alla volta

  1. Selezioniamo una regione
  2. Creiamo un ricalco dinamico
  3. Clicchiamo su oggetto>espandi, espandi riempimento
  4. Clicchiamo su oggetto>separa
  5. Eliminiamo tracciati inutili e il colore di riempimento della regione
  6. Con il contorno selezionato andiamo su finestra>attributi
  7. Sulla voce mappa immagine diamo poligono
  8. Inseriamo l’url a cui punta l’immagine

Una volta che abbiamo applicato i passaggi a tutte le regioni, andiamo su file>salva per web e dispositivi e salviamo in html.
Otteniamo così un file html e una cartella con il file immagine iniziale.

Aprendo il file html con un browser possiamo verificare che ad ogni regione sia associato un link.

4. Editiamo il file html

Per rendere attiva la mappa è necessario aggiungere due eventi all’area mappata per ogni regione. Il primo evento (onmouseover) è innescato al passaggio del cursore sopra la regione. Il secondo (onmouseout) è attivato quando il cursore esce dalla zona delimitata per l’area.

<area onmouseover="cambia_immagine( 'sardegna' );" onmouseout="nascondi_immagine();" shape="poly" alt="" coords="100,314, 101,314, 110,325, 114,339, 119,354, 119,355, 113,368, 112,396, 104,421, 101,418, 99,414, 91,414, 84,418, 84,427, 81,429, 78,432, 72,432, 64,419, 62,402, 69,387, 67,383, 63,380, 66,375, 69,371, 66,360, 63,350, 55,343, 55,340, 56,340, 59,330, 70,334, 81,329, 91,321, 100,314" href="#">

In ogni evento inseriamo una funzione che andiamo a definire dell’head del documento

	function cambia_immagine( id )
	{
		$( '#italia' ).attr( 'src', 'immagini/' + id + '.png');
	}
	function nascondi_immagine()
	{
		$( '#italia' ).attr( 'src', 'immagini/italia.png');
	}	

Con la funzione cambia_immagine() inviamo il nome della regione che poi sarà utilizzato da jQuery per sostituire l’attributo src che modifica la foto visualizzata.
Per riferirci alla mappa originale abbiamo dovuto inserire id=”italia” al tag img.

<img id="italia" src="immagini/italia.png" width="500" height="570" border="0" alt="" usemap="#italia_Map">

La funzione nascondi_immagine() ripristiniamo l’immagine originale.

5. Effettuare il preload delle immagini in jquery

Per evitare rallentamenti nel passaggio da una foto a un’altra effettuiamo il preload delle immagini in jquery delle regioni nel documento.
Definiamo la funzione precarica() nell’head.

	function precarica( immagini ) {
		$( immagini ).each( function () {
			$( '<img/>' )[ 0 ].src = this;
		});
	}

Alla funzione passiamo un array con l’indirizzo delle immagini.

	precarica([
			'immagini/sardegna.png',
			'immagini/abruzzo.png',
			'immagini/basilicata.png',
			'immagini/calabria.png',
			'immagini/campania.png',
			'immagini/emilia-romagna.png',
			'immagini/friuli-venezia-giulia.png',
			'immagini/lazio.png',
			'immagini/liguria.png',
			'immagini/lombardia.png',
			'immagini/marche.png',
			'immagini/molise.png',
			'immagini/piemonte.png',
			'immagini/puglia.png',
			'immagini/sicilia.png',
			'immagini/toscana.png',
			'immagini/trentino-alto-adige.png',
			'immagini/umbria.png',
			'immagini/valle-d-aosta.png',
			'immagini/veneto.png'
		]);

Abbiamo scelto di lanciare la funzione precarica() prima del caricamento dell’immagine iniziale per evitare che qualcuno clicchi nella mappa interattiva prima che siano disponibili tutti i file.

 

 


  inStileWeb.com
blog comments powered by Disqus