black_wizard
10-05-2011, 01:14
La mappa dell'italia, nel primo link è fatto in flash...e credo che ci siano sul web svariati script in flash che fanno la stessa cosa.
Mentre nel secondo link non è fatto in flash ma fatto in html semplice con il metodo "mappa di immagine" e
quest'ultimo fa al caso tuo perchè è il più semplice da fare.
<img src="http://immagini.webmobili.it/Rivenditori/arredamento/ImmaginiNegozi/italia.gif" usemap="prova" border="0">
<map name="prova">
<area shape="poly" coords="37,11, 33,17, 28,17, 27,31, 33,38, 33,41, 33,43, 35,43, 37,37, 43,35, 46,38, 51,39, 58,39, 55,33, 54,26, 50,22, 52,17, 51,11, 46,11, 45,15, 39,15, 39,11" href="lombardia.html" title="Lombardia" alt="Lombardia" />
<area shape="poly" coords="112,150, 106,159, 106,169, 101,174, 89,168, 67,158, 73,150, 79,151, 89,152, 101,151, 108,150, 112,152" href="sicilia.html" title="Sicilia" alt="Sicilia" />
<area shape="poly" coords="130,133, 130,140, 127,140, 123,144, 123,147, 116,156, 112,155, 112,150, 116,141, 112,123, 123,123" href="calabria.html" title="Calabria" alt="Calabria" />
<area shape="poly" coords="27,12, 29,17, 28,26, 28,29, 27,31, 27,33, 33,39, 33,43, 22,44, 20,48, 16,50, 9,50, 5,45, 5,43, 5,39, 3,33, 3,31, 9,26, 20,26, 20,22, 20,17" href="piemonte.html" title="Piemonte" alt="Piemonte" />
<area shape="poly" coords="89,15, 85,17, 88,22, 89,27, 90,27, 90,31, 89,31, 82,27, 78,26, 73,26, 73,15, 74,11, 82,11, 86,11" href="friuli_venezia_giulia.html" title="Friuli Venezia Giulia" alt="Friuli Venezia Giulia" />
<area shape="poly" coords="67,89, 78,101, 90,101, 90,94, 82,91, 79,89, 82,77, 79,77, 73,82, 67,72, 61,82, 61,85" href="lazio.html" title="Lazio" alt="Lazio" />
<area shape="poly" coords="93,82, 100,85, 96,89, 94,89, 90,93, 82,89, 78,89, 82,77, 90,72" href="abruzzo.html" title="Abruzzo" alt="Abruzzo" />
<area shape="poly" coords="67,62, 67,66, 67,73, 73,82, 80,77, 78,72, 78,66" href="umbria.html" title="Umbria" alt="Umbria" />
<area shape="poly" coords="74,55, 86,62, 90,73, 82,77, 78,72, 78,66, 67,62, 67,56" href="marche.html" title="Marche" alt="Marche" />
<area shape="poly" coords="90,97, 89,101, 94,111, 101,112, 101,118, 108,123, 111,123, 112,114, 106,106, 106,101, 101,97, 100,101" href="campania.html" title="Campania" alt="Campania" />
<area shape="poly" coords="7,18, 6,22, 9,26, 18,26, 20,22, 20,20, 20,18" href="valle_d_aosta.html" title="Valle d`Aosta" alt="Valle d`Aosta" />
<area shape="poly" coords="117,89, 118,93, 114,95, 122,101, 141,111, 147,121, 147,124, 144,124, 138,118, 129,113, 127,116, 123,110, 119,110, 113,103, 108,106, 106,101, 102,97, 106,89" href="puglia.html" title="Puglia" alt="Puglia" />
<area shape="poly" coords="74,55, 73,49, 73,43, 67,39, 57,39, 50,39, 41,35, 38,37, 35,43, 41,49, 41,45, 57,55, 61,55, 67,57, 73,55" href="emilia_romagna.html" title="Emilia Romagna" alt="Emilia Romagna" />
<area shape="poly" coords="61,82, 65,73, 67,67, 67,56, 61,55, 57,55, 41,45, 41,55, 45,56, 46,67, 46,71, 41,72, 41,73, 46,76, 50,72, 57,82" href="toscana.html" title="Toscana" alt="Toscana" />
<area shape="poly" coords="123,117, 123,123, 112,123, 112,113, 106,106, 112,106, 118,110, 123,110, 127,116" href="basilicata.html" title="Basilicata" alt="Basilicata" />
<area shape="poly" coords="71,4, 61,4, 57,11, 55,7, 50,11, 51,17, 50,22, 54,26, 57,27, 61,22, 65,22, 68,17, 68,11, 74,11" href="trentino_alto_adige.html" title="Trentino Alto Adige" alt="Trentino Alto Adige" />
<area shape="poly" coords="106,89, 103,97, 100,101, 90,97, 90,93, 94,89, 96,89, 100,85" href="molise.html" title="Molise" alt="Molise" />
<area shape="poly" coords="74,11, 73,17, 74,26, 78,26, 82,27, 80,31, 73,31, 71,34, 74,38, 73,43, 68,39, 61,39, 57,38, 54,31, 54,26, 57,27, 61,22, 65,22, 68,17, 68,11" href="veneto.html" title="Veneto" alt="Veneto" />
<area shape="poly" coords="33,131, 34,110, 33,101, 29,96, 20,106, 17,101, 12,101, 17,113, 17,129, 17,135, 24,139, 27,131, 33,134" href="sardegna.html" title="Sardegna" alt="Sardegna" />
<area shape="poly" coords="12,54, 17,55, 22,50, 27,46, 33,46, 37,50, 41,52, 41,50, 38,45, 33,43, 22,43, 17,50, 12,50, 10,54" href="liguria.html" title="Liguria" alt="Liguria" />
</map>
In pratica non fai altro che creare dei poligoni linkabili sull'immagine.
Per creare un poligono linkabile nell'immagine si usa il comando html <area shape="poly"> gli dai le coordinate dei vari punti per creare il poligono in questo caso la forma della regione, gli dai un href, un title ed è fatto.
Il codice di sopra è quello del http://negozi.webmobili.it/ che hai postato..basta che ti scarichi l'immagine dell'italia dal loro sito, cambi i vari url associati alle regione..ed è fatto.
Anche se ti suggerisco di imparare a fare da solo la stessa cosa che è così semplice da far paura.
Ti do un link che ti spiega come fare.
http://xhtml.html.it/guide/lezione/1680/le-mappe-di-immagine/
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.