Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Una mappa negozi interattiva

Pubblicato il 2 Marzo 201323 Gennaio 2014 Categoria:

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

Mappa interattiva

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]

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3559 download)
  • jquery-1.4.1.min.js (3124 download)
  • jqueryformwizard-201.html (3120 download)
  • tinytips11.html (3108 download)
  • jquery-ui-1.8rc1.zip (2974 download)
  • jquerytools120.html (2901 download)
  • jquery-1.4.2.min.js (2893 download)
  • calendarPicker.html (2879 download)
  • 1.0.0.zip (2876 download)
  • move-background.html (2842 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) modalbox (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) tooltip (6) tutorial (12) twitter (2) upload (3) utility (18) VELug (3) video (3) widget (3) WYSIWYG (2) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....