Una mappa negozi interattiva

Apriamo questa nuova sezione del sito, con un tutorial creato a partire da una richiesta fatta da andry1187 sul forum.

La richiesta era quella di creare una mappa interattiva a partire da una immagine la quale, attraverso il tag MAP era stata suddivisa in varie aree.
Il risultato che si voleva ottenere era che, al mouseOver su una determinata area, comparisse una freccia sopra l’area stessa e venisse evidenziata una riga (associata all’area) in una tabella sottostante l’immagine.

Abbiamo quindi preso un’immagine e l’abbiamo suddivisa in aree:

<img class="mapimg" usemap="#mappa_negozi" src="images/mappa_negozi.jpg" border="0" width="600" height="289" />
<map name="mappa_negozi" id="mappa_negozi">
		<area class="area" href="#" id="negozio-1" shape="rect" coords="36,3,100,120" />
		<area class="area" href="#" id="negozio-2" shape="rect" coords="104,45,150,110" />
        ...
        ...
</map>

Ad ogni area abbiamo associato la classe “area” ed assegnato un id di tipo “negozio-X“.
Abbiamo quindi inserito l’immagine all’interno di un DIV contenitore ed abbiamo inserito all’interno dello stesso contenitore tanti div quante sono le aree in cui l’immagine è stata suddivisa.
Ad ogni div è stata associata la classe “arrow”  ed un id del tipo “arrow-Y“, dove Y è uguale ad X  dell’area associata.
Questi div saranno quelle che conterranno le frecce che indicheranno il singolo negozio.
Otterremo quindi il seguente codice HTML:

<div id="mappa">
	<img class="mapimg" usemap="#mappa_negozi" src="images/mappa_negozi.jpg" border="0" width="600" height="289" />
	<map name="mappa_negozi" id="mappa_negozi">
		<area class="area" href="#" id="negozio-1" shape="rect" coords="36,3,100,120" />
		<area class="area" href="#" id="negozio-2" shape="rect" coords="104,45,150,110" />
            ...
            ...
	</map>
	<div class="arrow" id="arrow-1"></div>
	<div class="arrow" id="arrow-2"></div>
    ...
    ...
</div>

A questo punto abbiamo inserito una tabella, dove ogni riga conteneva la informazioni che si volevano visualizzare per il negozio. Ogni riga è stata identificata con classe “dettaglio” ed id “dettaglio-Z” dove Z, come in precedenza Y, è uguale ad X dell’area associata.

<table border="0" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th>Negozio</th>
			<th>Vendita</th>
			<th>Codice</th>
		</tr>
	</thead>	
	<tbody>
		<tr class="dettaglio" id="dettaglio-1">
			<td>Negozio 1</td>
			<td>Alimentari</td>
			<td>NGZ1</td>
		</tr>
		<tr class="dettaglio" id="dettaglio-2">
			<td>Negozio 2</td>
			<td>Abbigliamento</td>
			<td>NGZ2</td>
		</tr>
        ...
        ...		
	</tbody>
</table>

Completata la struttura HTML, passiamo creare il foglio stile CSS.
Tenendo conto che le frecce dovranno comparire al mouseOver e che dovranno essere posizionate ciascuna sopra la propria area, dobbiamo assegnare al contenitore una posizione relativa ed alle frecce una posizione assoluta. Inoltre le frecce dovranno essere inizialmente nascoste. Ad ogni freccia inoltre dovremmo assegnare una posizione specifica.
Tenendo conto che poi è necessario evidenziare nella tabella la riga associata al negozio, ci servirà una classe “hilight” da associare alla riga stessa. Il foglio stile avrà quindi le seguenti specifiche:

#mappa {position:relative;width:600px;height:289px;margin: 0 auto;}
.arrow {display:none;position:absolute;width:32px;height:32px;cursor:pointer;background:transparent url(images/arrow.png) no-repeat 0 0;}
#arrow-1 {top:15;left:75;}
#arrow-2 {top:40;left:125;}
.highlight {background:#f2e71f;}

Passiamo ora al codice javascript.

Quando si passa sopra un’area dell’immagine dovrà comparire la freccia ad essa associata e dovrà essere evidenziata la riga associata all’area nella tabella. Per far ciò ci tornano utili la classe e gli id associati alle aree.
Quindi al mouseOver di un’area andremo a recuperare il suo id e, tramite il comando .split, recupereremo il valore X che ci consentirà di mostrare con .css({ ‘display’ : ‘block’ } la sua freccia (negozio-X = arrow-Y) ed evidenziare con .addClass( ‘highlight’ ) la riga nella tabella (negozio-X = dettaglio-Z).
Al mouseOut dovremmo fare le operazioni inverse.

Quindi:

$( '.area' ).mouseover( function() {
	shop = $( this ).attr('id').split("-");
	shopID = parseInt(shop[1]);
	$('#arrow-'+ shopID).css({ 'display' : 'block' });
	$('#dettaglio-'+ shopID).addClass( 'highlight' );
}).mouseout( function() {
	$('#arrow-'+ shopID).css({ 'display' : 'none' });
	$('#dettaglio-'+ shopID).removeClass( 'highlight' )
});

Con lo stesso principio costruiremo il codice che ci servirà quando faremo il mouseOver su una riga della tabella:

$('.dettaglio').mouseover( function() {
	detail = $( this ).attr('id').split("-");
	detailID = parseInt(detail[1]);
	$('#arrow-'+ detailID).css({ 'display' : 'block' });
	$('#dettaglio-'+ detailID).addClass( 'highlight' );
}).mouseout( function() {
	$('#arrow-'+ detailID).css({ 'display' : 'none' });
	$('#dettaglio-'+ detailID).removeClass( 'highlight' );
});

Per evitare “sfarfallamenti” quando il mouse, già sopra l’area, passa sopra la freccia andiamo ad inserire il seguente codice:

$( '.arrow' ).mouseover( function() {
	arrow = $( this ).attr('id').split("-");
	arrowID = parseInt(shop[1]);
	$(this).css({ 'display' : 'block' });
	$('#dettaglio-'+ arrowID).addClass( 'highlight' );
}).mouseout( function() {
	$(this).css({ 'display' : 'none' });
	$('#dettaglio-'+ arrowID).removeClass( 'highlight' );
});

Il codice sarebbe completo, ma ha alcune incompatibilità con alcuni browser: per risolvere il problema utilizziamo il plugin jQuery MapHilight di David Lynch.

DEMO

Questo tutorial ti è servito? Sostieni jQuery Italia con una donazione!
[donateplus]