WebSite X5Help Center

 
Paolo V.
Paolo V.
User

Dovrei realizzare una mappa con aree sensibili con webanimator plus 3  it

Author: Paolo V.
Visited 1131, Followers 3, Shared 0  

Salve,

Vorrei realizzare una cartina dell'italia che cliccando su ogni singola regione mi riporti ad una pagina del sito.

E' possibile crearla con website x5 pro? o con Webanimator plus 3? Se si chi mi può indicare su come procedere? Premetto cche non sono un esperto quindi vi chiedo un po di pazienza.

Grazie

Posted on the
17 ANSWERS - 1 USEFUL
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... se  interessa che la mappatura sia reattiva-elastica, può essere usato WebAnimtor;

... oppure in alternativa al precedente,  è possibile da 30 anni usare il formato vettoriale SVG;

... altrimenti per mappature tradizionali bitmap può  essere usato uno qualsiasi dei programmi di grafica di cui si è dotati,  a partire da OO.o.Draw, Gimp, PSP, eccetera, ...oppure si può mappare direttamente > online...

... in ogni caso occorre un minimo di preparazione e di impegno personale; ...il lavoro non viene su da se;  niente di difficile, lo hanno fatto in molti...

... ma con un ricerca il rete se si è pazienti e fortunati si potrebbero trovare mappature già pronte da poter eventualmente adattare...

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Paolo V.
Paolo V.
User
Author

Ciao  KolAsim,

Grazie che tu sappia con photoshop si può fare?

Se utilizzo il sistema on line poi come lo integro su website?

Grazie

Read more
Posted on the from Paolo V.
Esse Di
Esse Di
User

Qui trovi un mio esempio di cartina dell'Italia cliccabile su ogni regione e responsive.

Se è quello che cerchi e sei interessato, posso fornirti maggiori dettagli

Read more
Posted on the from Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Paolo V.
Ciao  KolAsim, Grazie che tu sappia con photoshop si può fare? Se utilizzo il sistema on line poi come lo integro su website? Grazie

1) - sì, > si può fare

2) - allega la tua immagine al progetto, lasciando files come cartella destinataria proposta per default;

... il tag <img> da incollare in Oggetto Codice HTML sarà: 

<IMG SRC="files/nomeimmagine.png" ALT="Site map" USEMAP="#imgmapXYZ" >

... ed  seguito di <img>  incollare il tag <MAP> generato online...

... altro link online, forse più semplice ed intuitivo:  http://maschek.hu/imagemap/imgmap/

(di + x > responsive)!

ciao

.

(ps: ...  ingiro potrebbe anche o ancora esserci una Italia pappapronta in CSS fatta da Mirko, che magari potrebbe farsi vivo; ...le mie putroppo attualmente si sono dissolte...)

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Roberto N.
Roberto N.
User

Ciao Paolo Io per realizzare la mia pagina https://www.ilmioproduttoredifiducia.it/regioni-italiane.htm ho preso spunto da questi link... ci trovi un esempio che utilizza una immagine con l'Italia e poi spiega come creare zone sensibili in questo caso Sardegna e Sicilia su cui cliccare per andare a eventuali pagine lincate...

https://www.html.it/pag/16053/le-mappe-di-immagine

ecco un'altra pagina che spiega la mappatura delle immagini...

https://www.mrwebmaster.it/html/mappe-immagini_7326.html

Read more
Posted on the from Roberto N.
Roberto N.
Roberto N.
User

Scusa avevo indicato i link errati

Roberto N.
Ciao Paolo Io per realizzare la mia pagina https://www.ilmioproduttoredifiducia.it/regioni-italiane.htmho preso spunto da questi link... ci trovi un esempio che utilizza una immagine con l'Italia e poi spiega come creare zone sensibili in questo caso Sardegna e Sicilia su cui cliccare per andare a eventuali pagine lincate... https://www.html.it/pag/16053/le-mappe-di-immagine ecco un'altra pagina che spiega la mappatura delle immagini... https://www.mrwebmaster.it/html/mappe-immagini_7326.html

Ecco i link giusti

Ciao Paolo Io per realizzare la mia pagina https://www.ilmioproduttoredifiducia.it/regioni-italiane.html ho preso spunto da questi link... ci trovi un esempio che utilizza una immagine con l'Italia e poi spiega come creare zone sensibili in questo caso Sardegna e Sicilia su cui cliccare per andare a eventuali pagine lincate...

https://www.html.it/pag/16053/le-mappe-di-immagine

ecco un'altra pagina che spiega la mappatura delle immagini...

https://www.mrwebmaster.it/html/mappe-immagini_7326.html

Read more
Posted on the from Roberto N.
Esse Di
Esse Di
User

Roberto N,

molto probabilmente le immagini del mio esempio sono copiate dal tuo sito. Non ti ho citato solo perché non ne sono certo al 100%

In ogni modo, per rendere responsive la cartina e le definizioni delle regioni tramite i tag <area> occorre:

caricare la libreria "rwdImageMaps-min.js"

<script src="../_prove_res/rwdImageMaps-min.js" async defer> </script>

(il percorso è relativo al mio esempio)

collegare la mappa alla funzione rwdImageMaps()

<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>

Nel tuo sito lo fai, ma poi, nei tuoi post, non lo evidenzi

Read more
Posted on the from Esse Di
Roberto N.
Roberto N.
User

Ciao Esse D, hai pienamente ragione... me ne ero proprio dimenticato in quanto inizialmente la mia mappa non era responsive !

Per completezza in allegato ora ho messo i file con relativo codice che ho utilizzato per creare la mappa d'Italia responsive con aree sensibili... se manca qualcosa fatemelo sapere.

Read more
Posted on the from Roberto N.
Roberto N.
Roberto N.
User

Premetto che il codice va inserito in un "Oggetto codice HTML".

Read more
Posted on the from Roberto N.
Paolo V.
Paolo V.
User
Author

Ciao Roberto,

Ti ringrazio, esttamente come devo procedere per collegare un link ad ogni regioene che poi apra una singola regione?

Grazie

Read more
Posted on the from Paolo V.
Roberto N.
Roberto N.
User

Ciao Paolo, nel file zip sopra indicato trovi il file Codice-per-creare-una-mappa-con-aree-sensibili-responsive.txt il quale contiene il codice da copiare in un oggetto "Codice HTML" all'interno del quale devi poi modificare i link riportati da me sostituendoli con i tuoi...

esempio:

href="https://www.ilmioproduttoredifiducia.it/ricerca-produttori-prodotti.php?regione=Trentino-Alto Adige

lo sostituisci con href="https://www.tuosito.it/tuapagina.html"

Read more
Posted on the from Roberto N.
Roberto N.
Roberto N.
User

sempre nell'oggetto "Codice HTML" sezione "Esperto"  riporti

#mappaitalia {
max-width: 100%;
width: auto;
height: auto;
}

e nella sezione "file allegati al codice" ci aggiungi le immagini delle regioni. vedi esempio sotto

Read more
Posted on the from Roberto N.
Paolo V.
Paolo V.
User
Author

Ciao Roberto,

Quando dici sostituire intendi i file all'interno del faile testo?

Read more
Posted on the from Paolo V.
Paolo V.
Paolo V.
User
Author

Ciao Roberto,

Nella prima riga del file di testo:

<area shape="poly" coords="61,53,62,65,56,67,37,69,35,61,30,55,38,52,41,55,50,53,54,49" href="https://miosito.it/Valle d'Aosta.html?regione=Valle d'Aosta" alt="Valle d'Aosta" title="Valle d'Aosta" onMouseOver="document.Italia.src='images/Aosta.png';" onMouseOut="document.Italia.src='images/cartina_italia.png';"/>

Il resto rimane invariato?

E cosi per tutte le altre regioni?

Altra cosa

Il file js dove lo devo inserire?

Grazie mille

Read more
Posted on the from Paolo V.
Roberto N.
Roberto N.
User

Si il resto rimane invariato (attenzione... hai dimenticato di mettere www. davanti a "miosito.it/Valle d'Aosta.html")

il file java l'ho allegato nell'oggetto "Codice HTML", sezione "Esperto", sezione "File allegati al codice" (nel percorso relativo al server devi indicare una cartella valida del server in cui pubblichi il sito) 

Read more
Posted on the from Roberto N.