Back to top

Autore Topic: Mappa interattiva in HTML e javascript su template Helix III  (Letto 1666 volte)

Offline Mauro73

  • Esploratore
  • **
  • Post: 73
  • Sesso: Maschio
    • Mostra profilo
Buongiorno a tutta la community.
Vorrei sottoporre alla vostra attenzione un problema che sto riscontrando.
Sto realizzando, in locale, un sito che dovrebbe girare su una rete INTRANET (infatti avevo provato ad usare il componente ContentMap ma, come mi è stato detto da AlexRed tale componente necessita di una costante connessione ad INTERNET, non funziona in quanto utilizza le mappe di Google).
A premessa utilizzo come template (come indicato in oggetto) Helix III.
Per risparmiare tempo ho trovato in rete questa mappa interattiva già fatta: http://www.weweb.in/2013/10/27/creare-mappa-interattiva-delle-regioni-italiane/

Ho quindi prelevato il codice e lo ho inserito, disabilitando l'editor, in un modulo personalizzato e una volta che riattivo l'editor visualizzo subito la mappa che risulta funzionare perfettamente. Il modulo è stato poi inserito in una pagina che richiama il modulo con loadposition.
Quando vado in frontend, però, subito visualizzo la mappa e se clicco su una delle regioni mi porta alla pagina assegnata (quindi tutto sembrerebbe funzionare come deve).
Il problema è che dopo alcuni secondi la mappa scompare, perdendo ovviamente le sue funzionalità, lasciando visibile solamente un quadratino che indica la presenza di un oggetto.
Credo, non essendo un vero esperto ma un appassionato, che il problema sia dovuto ad una incompatibilità del codice inserito con quello del template.
Per questo motivo chiedo il vostro aiuto, di seguito il codice inserito nel modulo personalizzato (ovviamente dove compare href="#"  andranno inseriti i link alle pagine delle regioni):

Codice: [Seleziona]
<div class="mappa"><img id="mappaitalia" src="images/Italia/cartina_italia.png" alt="" usemap="#Map" name="Italia" /> <map id="Map" name="Map">
<area title="Val d'Aosta" onmouseover="document.Italia.src='images/Italia/Aosta.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Aosta.png';" alt="Val d'Aosta" coords="61,53,62,65,56,67,37,69,35,61,30,55,38,52,41,55,50,53,54,49" shape="poly" href="#" />
<area title="Piemonte" onmouseover="document.Italia.src='images/Italia/Piemonte.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Piemonte.png';" alt="Piemonte" coords="84,75,80,75,78,82,87,91,89,91,97,108,88,104,88,108,86,110,79,107,79,110,68,108,57,125,51,126,50,122,30,119,28,106,31,106,31,102,35,102,34,94,28,94,27,87,24,83,39,80,39,70,55,66,55,69,61,68,63,58,62,52,71,45,71,41,68,41,68,39,76,33,77,33,77,34,77,42,79,42,85,52,81,61,87,74,85,78,84,78,94,109,96,109,96,110" shape="poly" href="#" />
<area title="Lombardia" onmouseover="document.Italia.src='images/Italia/Lombardia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Lombardia.png';" alt="Lombardia" coords="138,37,139,47,135,51,136,61,141,62,144,60,144,64,141,78,160,96,150,96,138,94,134,97,118,87,103,89,100,104,98,104,87,88,84,90,79,78,83,76,85,80,89,72,82,57,86,51,87,53,92,60,94,60,96,54,94,51,103,40,102,32,106,32,114,42,122,38,122,43,127,45,128,42,124,31,129,28,142,35,142,37" shape="poly" href="#" />
<area title="Trentino" onmouseover="document.Italia.src='images/Italia/Trentino.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Trentino.png';" alt="Trentino" coords="170,49,170,54,169,54,163,52,154,65,149,65,141,59,138,60,137,51,139,38,143,38,143,34,134,23,142,19,152,23,161,15,185,10,185,11,186,11,183,18,190,28,189,28,186,29,182,27,177,32,173,32,173,43,178,45,177,47" shape="poly" href="#" />
<area title="Veneto" onmouseover="document.Italia.src='images/Italia/Veneto.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Veneto.png';" alt="Veneto" coords="184,81,181,83,192,98,188,99,170,95,168,98,161,96,161,93,141,77,141,69,147,60,148,67,155,66,167,53,171,56,171,50,177,49,179,44,174,39,176,33,184,28,201,29,201,30,189,45,193,50,191,57,201,63,207,61,209,67,189,72" shape="poly" href="#" />
<area title="Friuli" onmouseover="document.Italia.src='images/Italia/Friuli.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Friuli.png';" alt="Friuli" coords="226,32,226,35,217,44,225,47,224,49,220,55,233,69,226,70,224,63,218,66,209,63,205,60,198,63,192,55,194,46,190,42,191,42,191,41,194,41,194,37,202,30,213,33" shape="poly" href="#" />
<area title="Liguria" onmouseover="document.Italia.src='images/Italia/Liguria.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Liguria.png';" alt="Liguria" coords="121,132,118,131,118,130,116,130,116,129,113,131,113,130,102,120,101,118,95,118,94,116,91,116,91,115,89,115,89,114,79,114,68,125,60,136,57,136,46,138,45,134,51,130,52,127,63,125,64,121,65,121,65,117,69,114,69,110,70,110,80,111,80,108,83,108,83,111,84,111,84,112,87,112,89,109,89,105,90,105,94,110,96,109,106,110,106,111,103,116,104,116,104,117,109,117,112,121" shape="poly" href="#" />
<area title="Emilia" onmouseover="document.Italia.src='images/Italia/Emilia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Emilia.png';" alt="Emilia" coords="120,90,120,88,122,89,123,92,128,92,130,93,130,95,138,98,150,98,150,97,164,97,165,99,171,97,171,96,186,98,187,102,185,103,187,119,187,123,189,124,189,126,191,127,191,129,199,135,199,139,198,140,190,139,190,136,188,136,188,135,182,138,182,140,181,140,181,144,177,144,169,133,171,129,167,128,167,127,164,127,163,125,156,126,154,130,148,129,146,130,146,129,144,129,143,127,137,128,132,122,128,122,127,120,122,119,122,117,115,113,112,118,111,118,111,117,110,115,105,116,105,115,104,115,104,114,107,109,98,108,98,105,101,105,103,97,105,90,105,89,108,89,108,88,112,91,114,90,116,91" shape="poly" href="#" />
<area title="Toscana" onmouseover="document.Italia.src='images/Italia/Toscana.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Toscana.png';" alt="Toscana" coords="169,130,167,136,173,143,175,143,176,145,185,147,181,155,178,157,179,159,183,163,181,164,181,165,178,165,178,166,174,168,175,172,176,172,175,180,172,181,170,182,170,189,164,193,165,197,161,198,161,199,151,200,152,191,140,183,140,177,139,176,132,174,133,159,132,159,132,157,127,153,127,138,126,138,126,136,122,133,122,128,120,127,113,118,114,118,118,114,122,121,126,121,127,123,132,124,136,129,142,128,142,129,146,132,148,132,149,130,155,131,155,130,162,126" shape="poly" href="#" />
<area title="Marche" onmouseover="document.Italia.src='images/Italia/Marche.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Marche.png';" alt="Marche" coords="215,185,215,182,214,182,214,181,211,181,211,180,205,178,204,176,204,167,203,167,203,163,202,163,201,156,197,156,197,157,196,157,196,156,189,153,190,150,185,150,185,149,188,145,182,144,184,138,188,137,188,138,189,138,189,141,192,141,195,139,195,140,199,142,199,141,200,141,200,137,201,137,201,136,203,136,210,144,212,144,217,150,223,151,224,153,225,153,225,155,226,155,227,159,228,159,228,164,229,164,229,167,230,167,230,169,231,169,231,173,232,173,233,179,227,182,227,183,223,182,223,183,217,186" shape="poly" href="#" />
<area title="Umbria" onmouseover="document.Italia.src='images/Umbria.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Umbria.png';" alt="Umbria" coords="187,151,187,154,194,156,195,158,199,158,199,159,200,159,201,164,202,164,202,169,203,169,204,178,204,179,208,179,208,180,213,182,210,190,205,190,205,191,200,195,200,197,192,200,192,198,186,196,185,189,184,189,184,188,180,188,180,189,177,189,176,176,178,176,176,169,184,165,180,159,180,157,182,157,183,152,184,151" shape="poly" href="#" />
<area title="Lazio" onmouseover="document.Italia.src='images/Italia/Lazio.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Lazio.png';" alt="Lazio" coords="171,183,175,183,176,184,177,188,176,188,176,190,184,190,185,197,192,200,192,201,195,201,201,198,204,192,211,191,216,186,218,191,212,191,210,197,211,202,213,203,216,210,214,210,213,208,209,208,206,212,207,216,212,217,213,219,217,219,217,224,222,225,222,226,229,225,230,227,233,227,234,229,237,236,234,238,233,238,233,244,225,246,225,247,223,248,223,247,221,245,219,245,219,244,211,245,210,247,209,247,209,246,199,239,199,238,196,238,196,236,195,236,195,235,195,234,192,232,192,231,190,231,189,229,188,229,186,226,183,226,182,219,179,218,179,217,177,217,176,215,171,215,171,214,170,214,170,211,168,210,168,207,167,207,167,204,166,204,165,202,163,202,162,199,165,199,167,195,166,193,170,192" shape="poly" href="#" />
<area title="Abruzzo" onmouseover="document.Italia.src='images/Italia/Abruzzo.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Abruzzo.png';" alt="Abruzzo" coords="234,181,237,190,239,191,239,193,241,194,241,195,246,197,246,199,251,203,252,205,254,205,255,207,258,207,258,208,260,213,251,224,251,222,246,218,243,219,242,226,230,225,229,223,226,224,219,223,219,222,218,222,218,218,208,214,208,211,212,209,216,212,217,206,214,202,212,201,214,198,212,197,212,193,218,193,222,187,223,183,227,185,227,184" shape="poly" href="#" />
<area title="Molise" onmouseover="document.Italia.src='images/Italia/Molise.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Molise.png';" alt="Molise" coords="265,230,266,236,257,238,256,240,249,236,240,236,240,239,237,238,238,228,243,228,243,222,245,220,247,221,249,221,249,224,250,224,250,225,254,225,261,213,264,214,264,215,266,215,266,216,270,216,270,217,271,228" shape="poly" href="#" />
<area title="Campania" onmouseover="document.Italia.src='images/Italia/Campania.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Campania.png';" alt="Campania" coords="276,244,275,250,277,252,286,256,285,258,279,260,281,268,283,269,283,272,285,273,285,277,286,277,290,279,293,286,292,286,290,291,284,294,284,295,281,295,275,290,274,288,271,288,270,286,267,283,270,278,269,278,263,267,259,268,259,270,251,271,251,272,250,272,250,271,249,270,253,264,252,263,244,262,244,263,240,263,239,258,238,258,238,256,236,255,236,252,235,252,231,247,235,240,234,239,235,239,235,238,240,241,240,240,241,240,241,237,250,238,251,240,255,241,255,242,257,240,266,238,267,236,269,237,270,237,270,242,271,242,271,243" shape="poly" href="#" />
<area title="Puglia" onmouseover="document.Italia.src='images/Italia/Puglia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Puglia.png';" alt="Puglia" coords="363,268,371,272,377,278,378,282,379,282,376,297,366,294,364,291,364,284,363,284,363,282,362,282,359,279,348,280,347,278,345,278,345,277,340,276,340,272,332,271,326,275,323,272,324,270,324,266,323,266,316,262,312,264,307,257,301,257,301,256,300,256,300,251,298,251,297,249,290,250,290,251,278,251,276,247,278,244,276,242,271,239,272,239,272,236,267,235,267,231,270,231,273,225,272,225,273,218,274,218,274,219,281,219,281,218,284,218,284,217,303,216,304,222,295,233,305,239,309,240,309,241,311,241,311,242,320,244,320,245,322,245,322,246,335,249,337,252,339,252,342,256,344,256,345,258,347,258,348,260,354,260,355,262,357,262,357,263,362,266" shape="poly" href="#" />
<area title="Basilicata" onmouseover="document.Italia.src='images/Italia/Basilicata.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Basilicata.png';" alt="Basilicata" coords="327,276,322,289,313,288,312,297,303,297,303,296,297,293,293,296,293,295,291,290,295,284,291,278,286,271,284,271,280,261,287,258,287,252,297,251,300,258,306,258,307,261,308,261,312,266,315,266,321,264,322,268,323,268,323,269,322,269" shape="poly" href="#" />
<area title="Calabria" onmouseover="document.Italia.src='images/Italia/Calabria.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Calabria.png';" alt="Calabria" coords="314,290,320,290,321,295,320,295,320,298,319,298,319,300,318,300,318,307,319,308,330,313,335,313,339,317,340,334,331,335,331,336,327,337,327,338,321,343,321,349,322,349,323,356,322,356,315,362,312,366,310,367,309,372,308,372,308,377,302,378,294,378,294,367,297,366,298,362,300,361,302,352,299,351,299,349,308,347,312,339,308,337,308,334,306,333,306,330,305,330,305,321,304,321,303,317,299,314,298,309,297,309,296,305,295,305,295,299,294,297,297,296,297,295,302,298,313,298,314,297" shape="poly" href="#" />
<area title="Sicilia" onmouseover="document.Italia.src='images/Italia/Sicilia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Sicilia.png';" alt="Sicilia" coords="281,407,281,412,285,414,282,421,279,422,278,431,276,430,263,430,263,429,258,428,250,415,237,415,230,412,230,410,228,408,226,408,226,407,222,407,220,404,218,404,214,399,210,399,208,396,198,397,197,395,195,395,195,394,191,392,191,382,191,378,192,378,201,373,201,376,202,376,202,377,208,377,213,371,216,371,216,370,218,369,218,370,219,370,220,373,222,373,222,374,226,374,227,377,236,380,242,376,242,377,244,377,244,378,256,377,256,376,262,375,264,372,266,372,266,371,269,371,269,370,278,372,281,368,286,368,286,367,288,367,288,366,291,365,291,369,287,377,285,378,282,387,281,387,281,389,280,389,279,394,278,394,278,396,277,396,276,404" shape="poly" href="#" />
<area title="Sardegna" onmouseover="document.Italia.src='images/Italia/Sardegna.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseout="document.Italia.src='images/Italia/cartina_italia.png';" onmouseover="document.Italia.src='images/Italia/Sardegna.png';" alt="Sardegna" coords="89,244,102,252,101,257,103,258,108,274,106,278,104,279,104,280,102,281,102,283,101,283,100,288,104,296,102,311,101,311,101,313,100,313,100,327,98,327,92,327,81,327,81,328,80,328,80,336,79,336,78,337,77,337,77,338,73,339,73,338,67,338,60,325,61,316,63,315,63,305,67,305,68,298,67,298,67,297,63,297,63,292,66,290,66,280,63,278,62,270,58,270,57,261,58,261,58,257,69,261,71,258,73,258,73,257,77,257,79,254,80,254,82,250" shape="poly" href="#" />
</map></div>

Grazie per l'aiuto.
Mauro

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #1 il: 26 Ott 2018, 12:05:55 »
Ciao
Potrebbe essere un problema di indirizzamento delle immagini nel contesto in cui agisce il link relativo che deve essere impostato in funzione della posizione in cui gira il codice. Così per esempio per un file nella root  'images/Italia/Liguria.png' può essere un link valido mentre se gira in joomla nel componente content può non essere più valido.

Offline Mauro73

  • Esploratore
  • **
  • Post: 73
  • Sesso: Maschio
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #2 il: 26 Ott 2018, 13:03:30 »
Ciao tomtomeight, grazie per la risposta.


Non so se ho ben interpretato il tuo messaggio ma non credo sia dovuto all'indirizzamento delle immagini altrimenti non si dovrebbe mai vedere la mappa in frontend mentre, invece, come ho cercato di spiegare prima....apro la pagina....visualizzo la mappa (perfettamente funzionante) ma....dopo pochi secondi scompare lasciando solo quel piccolo quadratino.


Preciso che, una volta che dal lato amministrativo se mantengo il modulo aperto....continuo a vedere la mappa perfettamente.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #3 il: 26 Ott 2018, 13:50:29 »
Se fai proprietà col tasto destr su quel quadratino cosa esce?

Offline conti1

  • Global Moderator
  • Instancabile
  • ********
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #4 il: 26 Ott 2018, 14:33:05 »
ciao io userei un modulo demo lo scarichi da qui
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline Mauro73

  • Esploratore
  • **
  • Post: 73
  • Sesso: Maschio
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #5 il: 26 Ott 2018, 14:40:31 »
Se fai proprietà col tasto destr su quel quadratino cosa esce?
Cliccandoci sopra con il tasto destro, nel menù che si apre, nemmeno esce la voce proprietà  ::)

ciao io userei un modulo demo lo scarichi da qui

Ho provato anche quel modulo...non visualizzo nulla  :-\ adesso ci riprovo ma.....non so....

 

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #6 il: 26 Ott 2018, 14:43:53 »
Prova anche ispeziona elemento con uno dei tool presenti nei browser e evinci il percorso di richiamo immagini.

Offline Mauro73

  • Esploratore
  • **
  • Post: 73
  • Sesso: Maschio
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #7 il: 26 Ott 2018, 15:24:08 »
Questo è l'esito di analizza elemento, mi sembra di capire che vada a pescare le immagini nella cartella giusta...
Non riesco proprio a capire....

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Mappa interattiva in HTML e javascript su template Helix III
« Risposta #8 il: 26 Ott 2018, 18:52:33 »
Il percorso è giusto quando il codice viene eseguito nella root ma se tu metti il codice in un articolo o modulo joomla devi considerare che non viene più eseguito nella root. A riprova cambia quel percorso in assoluto, cioè a partire da http.

 



Web Design Bolzano Kreatif