Dovrei realizzare una mappa con aree sensibili con webanimator plus 3
Author: Paolo V.
Visited 1378,
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
Con X5 no ma con WebAnimator puoi sicuramente, chiedi consigli qui.
http://forum.webanimator.com/viewforum.php?f=10
... 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
.
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
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
Avevo dimenticato di allefare il link
http://essedi.altervista.org/_EVO2020/_prove/image-mapping.html
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...)
.
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
Scusa avevo indicato i link errati
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
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
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.
Premetto che il codice va inserito in un "Oggetto codice HTML".
Author
Ciao Roberto,
Ti ringrazio, esttamente come devo procedere per collegare un link ad ogni regioene che poi apra una singola regione?
Grazie
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"
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
Author
Ciao Roberto,
Quando dici sostituire intendi i file all'interno del faile testo?
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
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)