cartina italia con javascript

**fedegiotto** · 23-09-2010, 12:40

Ciao,
avrei bisogno di realizzare una cartina dell'italia uguale a quella di http://www.immobiliare.it/

In pratica dalla cartina dell'italia passando sulle regioni queste devono cambiare colore.
Poi cliccando sulla regione si deve aprire, al posto della cartina dell'italia, quella della regione scelta.

non sono molto brava con i javascript.
Qualcuno mi può aiutare?

grazie
Fede

**Roman Fedorov** · 23-09-2010, 16:23

Ciao Fede,
Piu che javascript è prima di tutto una questione di HTML
Devi studiare come funziona il tag MAP, che permette di dividere un immagine in aree, e definire azioni diverse per ogni area.

In riferimento alla pagina che hai messo come esempio se guardi nel codice HTML la parte che ti interessa è questa qui:

codice:

 
<map name="regioni" id="regioni">
  <area id="_map_sar" title="Sardegna" shape="poly" coords="58,177,64,177,77,167,81,172,85,188,83,192,83,197,81,216,72,216,70,216,67,222,67,224,63,224,57,216,62,200,59,199,61,195,57,182,54,179" href="http://www.immobiliare.it/Sardegna.htm" alt="Sardegna" onmouseout="hideImage('sar');disableTooltip();return true;" onmouseover="changeImage('sar');enableTooltip('_map_sar');return true;" onclick="xajax_getAjaxProvincePagIndex('sar','IT');disableTooltip();return false;" />
  <area id="_map_sic" title="Sicilia" shape="poly" coords="205,249,189,253,168,255,158,251,157,253,151,255,148,253,142,259,149,263,157,266,170,276,178,278,189,286,193,286,196,287,200,279,196,269" href="http://www.immobiliare.it/Sicilia.htm" alt="Sicilia" onmouseout="hideImage('sic');disableTooltip();return true;" onmouseover="changeImage('sic');enableTooltip('_map_sic');return true;" onclick="xajax_getAjaxProvincePagIndex('sic','IT');disableTooltip();return false;" />

  <area id="_map_cal" title="Calabria" shape="poly" coords="213,203,220,205,226,201,225,201,225,210,233,213,237,216,240,226,228,229,226,241,217,254,212,254,210,250,215,243,214,237,220,233,222,228,213,208" href="http://www.immobiliare.it/Calabria.htm" alt="Calabria" onmouseout="hideImage('cal');disableTooltip();return true;" onmouseover="changeImage('cal');enableTooltip('_map_cal');return true;" onclick="xajax_getAjaxProvincePagIndex('cal','IT');disableTooltip();return false;" />
  <area id="_map_bas" title="Basilicata" shape="poly" coords="210,201,216,200,219,203,224,199,224,198,226,197,232,189,229,188,225,182,222,180,214,174,212,171,208,171,205,177,204,181,205,184,206,186,212,194" href="http://www.immobiliare.it/Basilicata.htm" alt="Basilicata" onmouseout="hideImage('bas');disableTooltip(); return true;" onmouseover="changeImage('bas');enableTooltip('_map_bas');return true;" onclick="xajax_getAjaxProvincePagIndex('bas','IT');disableTooltip();return false;" />
  <area id="_map_pug" title="Puglia" shape="poly" coords="200,151,215,151,217,153,213,157,213,161,238,173,244,178,257,182,267,197,265,203,259,200,254,191,249,192,241,188,240,185,238,185,235,187,232,186,229,181,225,180,215,170,207,170,198,161" href="http://www.immobiliare.it/Puglia.htm"  alt="Puglia" onmouseout="hideImage('pug');disableTooltip();return true;" onmouseover="changeImage('pug');enableTooltip('_map_pug');return true;"  onclick="xajax_getAjaxProvincePagIndex('pug','IT');disableTooltip();return false;" />
  <area id="_map_cam" title="Campania" shape="poly" coords="173,164,195,164,201,172,205,173,202,178,202,185,207,194,208,199,202,200,195,196,194,185,189,182,185,182,184,179,175,177" href="http://www.immobiliare.it/Campania.htm" alt="Campania" onmouseout="hideImage('cam');disableTooltip();return true;" onmouseover="changeImage('cam');enableTooltip('_map_cam');return true;" onclick="xajax_getAjaxProvincePagIndex('cam','IT');disableTooltip();return false;" />
  <area id="_map_mol" title="Molise" shape="poly" coords="191,148,193,150,195,150,195,154,192,158,192,159,191,161,176,161,176,157,180,153,182,153,185,153,187,152" href="http://www.immobiliare.it/Molise.htm"  alt="Molise" onmouseout="hideImage('mol');disableTooltip();return true;" onmouseover="changeImage('mol');enableTooltip('_map_mol');return true;" onclick="xajax_getAjaxProvincePagIndex('mol','IT');disableTooltip();return false;" />
  <area id="_map_laz" title="Lazio" shape="poly" coords="126,136,131,126,139,134,146,138,157,130,159,129,159,130,157,132,155,137,157,141,154,142,156,149,163,154,170,155,173,160,170,167,168,167,153,164,144,158" href="http://www.immobiliare.it/Lazio.htm" alt="Lazio" onmouseout="hideImage('laz');disableTooltip();return true;" onmouseover="changeImage('laz');enableTooltip('_map_laz');return true;" onclick="xajax_getAjaxProvincePagIndex('laz','IT');disableTooltip();return false;" />
  <area id="_map_abr" title="Abruzzo" shape="poly" coords="171,126,173,130,175,134,187,146,185,151,181,149,176,151,174,155,172,153,165,153,158,147,157,147,156,144,160,143,160,140,157,136,159,133,162,132,162,130"  href="http://www.immobiliare.it/Abruzzo.htm" alt="Abruzzo" onmouseout="hideImage('abr');disableTooltip();return true;" onmouseover="changeImage('abr');enableTooltip('_map_abr');return true;" onclick="xajax_getAjaxProvincePagIndex('abr','IT');disableTooltip();return false;" />
  <area id="_map_umb" title="Umbria" shape="poly" coords="139,108,148,111,153,124,156,125,156,126,146,135,138,128,135,127,134,122,135,118,138,113" href="http://www.immobiliare.it/Umbria.htm" alt="Umbria" onmouseout="hideImage('umb');disableTooltip();return true;" onmouseover="changeImage('umb');enableTooltip('_map_umb');return true;" onclick="xajax_getAjaxProvincePagIndex('umb','IT');disableTooltip();return false;" />
  <area id="_map_mar" title="Marche" shape="poly" coords="151,99,161,107,164,109,171,122,163,127,160,124,157,121,151,109,142,106,143,102,141,100,142,97,144,99,147,102" href="http://www.immobiliare.it/Marche.htm" alt="Marche" onmouseout="hideImage('mar');disableTooltip();return true;" onmouseover="changeImage('mar');enableTooltip('_map_mar');return true;" onclick="xajax_getAjaxProvincePagIndex('mar','IT');disableTooltip();return false;" />

  <area id="_map_tos" title="Toscana" shape="poly" coords="123,134,129,125,131,122,131,115,135,113,135,108,138,104,127,98,127,91,120,90,111,92,95,82,93,83,95,89,101,99,101,106,107,112,106,120,110,121,119,132,119,134" href="http://www.immobiliare.it/Toscana.htm" alt="Toscana" onmouseout="hideImage('tos');disableTooltip();return true;" onmouseover="changeImage('tos');enableTooltip('_map_tos');return true;" onclick="xajax_getAjaxProvincePagIndex('tos','IT');disableTooltip();return false;" />
  <area id="_map_lig" title="Liguria" shape="poly" coords="48,94,53,86,56,86,62,79,67,79,75,75,84,76,84,80,89,82,94,96" href="http://www.immobiliare.it/Liguria.htm" alt="Liguria" onmouseout="hideImage('lig');disableTooltip();return true;" onmouseover="changeImage('lig');enableTooltip('_map_lig');return true;" onclick="xajax_getAjaxProvincePagIndex('lig','IT');disableTooltip();return false;" />
  <area id="_map_emi" title="Emilia Romagna" shape="poly" coords="86,65,96,65,108,70,138,70,141,89,147,97,140,95,137,97,136,99,130,98,129,89,124,88,111,88,95,79,90,80,86,79,85,75,81,74" href="http://www.immobiliare.it/Emilia_Romagna.htm" alt="Emilia Romagna" onmouseout="hideImage('emi');disableTooltip();return true;" onmouseover="changeImage('emi');enableTooltip('_map_emi');return true;" onclick="xajax_getAjaxProvincePagIndex('emi','IT');disableTooltip();return false;" />
  <area id="_map_ven" title="Veneto" shape="poly" coords="144,22,148,25,142,29,141,34,142,42,146,46,149,46,152,46,153,49,146,54,146,51,141,52,138,59,137,60,139,66,141,69,134,67,128,67,122,67,111,57,111,54,110,51,113,46,115,48,119,48,119,45,128,42,134,36,133,27,137,24" href="http://www.immobiliare.it/Veneto.htm" alt="Veneto" onmouseout="hideImage('ven');disableTooltip();return true;" onmouseover="changeImage('ven');enableTooltip('_map_ven');return true;" onclick="xajax_getAjaxProvincePagIndex('ven','IT');disableTooltip();return false;" />
  <area id="_map_fri" title="Friuli Venezia Giulia" shape="poly" coords="150,24,159,26,164,26,161,31,162,36,165,45,169,50,163,45,162,47,156,47,156,47,151,44,147,44,144,35,144,31" href="http://www.immobiliare.it/Friuli_Venezia_Giulia.htm" alt="Friuli Venezia Giulia" onmouseout="hideImage('fri');disableTooltip();return true;" onmouseover="changeImage('fri');enableTooltip('_map_fri');return true;" onclick="xajax_getAjaxProvincePagIndex('fri','IT');disableTooltip();return false;" />
  <area id="_map_tre" title="Trentino Alto Adige" shape="poly" coords="107,18,113,19,125,14,130,14,136,11,142,21,134,21,129,25,130,35,120,43,116,44,107,41,110,27" href="http://www.immobiliare.it/Trentino_Alto_Adige.htm" alt="Trentino Alto Adige" onmouseout="hideImage('tre');disableTooltip();return true;" onmouseover="changeImage('tre');enableTooltip('_map_tre');return true;" onclick="xajax_getAjaxProvincePagIndex('tre','IT');disableTooltip();return false;" />
  <area id="_map_pie" title="Piemonte" shape="poly" coords="66,27,68,34,70,35,68,45,71,53,67,54,70,63,73,65,78,73,60,76,53,85,42,85,36,76,38,67,34,62,35,60,43,52,57,52,58,39" href="http://www.immobiliare.it/Piemonte.htm" alt="Piemonte" onmouseout="hideImage('pie');disableTooltip();return true;" onmouseover="changeImage('pie');enableTooltip('_map_pie');return true;" onclick="xajax_getAjaxProvincePagIndex('pie','IT');disableTooltip();return false;" />
  <area id="_map_lom" title="Lombardia" shape="poly" alt="Lombardia" coords="100,22,106,28,105,43,105,45,110,45,107,51,111,61,117,67,104,65,95,61,84,61,79,70,72,61,71,55,74,54,71,42,73,37,77,41,85,26,88,32,94,31,98,33,100,29" href="http://www.immobiliare.it/Lombardia.htm" onmouseout="hideImage('lom');disableTooltip(); return true;" onmouseover="changeImage('lom');enableTooltip('_map_lom');return true;" onclick="xajax_getAjaxProvincePagIndex('lom','IT');return false;" />
  <area id="_map_val" title="Valle d'Aosta" shape="poly" coords="43,49,55,49,55,40,38,39" href="http://www.immobiliare.it/Valle_d_Aosta.htm" alt="Valle d'Aosta" onmouseout="hideImage('val');disableTooltip();return true;" onmouseover= "changeImage('val');enableTooltip('_map_val');return true;" onclick="xajax_getAjaxProvincePagIndex('val','IT');disableTooltip();return false;" />

		  <area id="_map_mondo" href="/estero" title="Ricerca Internazionale" shape="poly" coords="219,26,211,29,205,36,207,44,210,47,211,49,210,52,212,55,214,57,215,61,210,60,206,57,200,58,197,62,196,66,194,68,192,72,192,76,195,82,202,89,228,111,273,101,276,90,275,84,280,83,279,73,272,69,273,59,273,39,260,33,248,30,240,31,235,39,233,33,232,25,229,22" alt="Ricerca Internazionale" onmouseout="hideImage('mondo');disableTooltip();return true;" onmouseover= "changeImage('mondo');enableTooltip('_map_mondo',true);return true;" />
	</map>

Discussione: cartina italia con javascript

Strumenti discussione

Ricerca discussione

Visualizza

cartina italia con javascript

Permessi di invio