WebSite X5Help Center

 
Antonio G.
Antonio G.
User

Mappa con aree sensibili  it

Autore: Antonio G.
Visite 2866, Followers 1, Condiviso 0  

Ciao a tutti. Mi rivolgo a tutti coloro che, con pazienza, possono dare una mano ad un inesperto come me. Premetto che ho visto post precedenti inerenti il mio problema ma, o non sono più visibili i link o riguardano versioni troppo vecchie di website.  Dovrei realizzare una mappa di una città, dove dovrei inserire delle aree sensibili che si evidenziano al passaggio del mouse, magari quando il mouse ci va sopra appare una piccola foto, e poi cliccando l'area si apre una pagina con la descrizione di quel bene storico-architettonico. Premetto che non sono un programmatore, sono a digiuno di codici html, sono un utilizzatore del software website 12 con tanta voglia di imparare, tanta umiltà, ma bisognoso di essere guidato. C'è qualcuno che ha la pazienza di descrivermi se quello che desidero fare posso essere in grado di farlo? Vi ringrazio della pazienza, un caro saluto.

Postato il
6 RISPOSTE
Skeggia 12
Skeggia 12
Moderator

qui puoi fare una mappatura delle immagini online...
http://www.danirevi.it/online-image-map-editor.html
oppure puoi provare a farlo con dreamweaver... molto semplicemente...

  • apri un documento vuoto con dreamweaver
  • metti il cursore tra i tag <body> e </body>
  • premi contemporaneamente CTRL+ALT+I per inserire l'immagine... inserisci le giuste dimensioni, modificando i tag width e height...
  • premi il pulsante "Dividi" sopra la finestra del codice...ti si divide lo schermo e a destra visualizzi l'immagine...
  • in basso al codice c'è aperta la scheda "Proprietà" con varie informazioni...
  • nella finestra "map" inserisci un nome che vuoi dare alla mappatura...
  • clicca poi uno strumento sotto tra il rettangolo, il cerchio o quello per la tracciatura poligonale...
  • vai sulla mappa, e il cursore diventerè una croce...
  • traccia l'area che vuoi e assegna il link che si dovrà aprire...
  • fallo per tutte le volte che ti servono... salva il documento...
  • copia il codice generato da dreamweaver compreso tra i tag <head> e </head> (senza di essi)...
  • incollalo in un oggetto html sulla griglia di pagina...
  • nel tab esperto allega tutte le immagini che servono, specificando un percorso (ad esempio "files")...
  • modifica nel codice html precedentemente importato il percorso con quello che hai stabilito (ad esempio "files")... ANTEPRIMA...
  • se non ho dimenticato nulla dovrebbe funzionare...

prova veloce...qui...
http://www.skeggia12.it/test/automaticav12/pagina-4.html
cliccando sulle voci stadio olimpico, stadio dei marmi, ministero degli affari esteri...
ciao...

Leggi di più
Postato il da Skeggia 12
Skeggia 12
Skeggia 12
Moderator

lo stesso risultato si potrebbe ottenere semplicemente anche con webanimator... anche responsive... da aggiungere un segno dove cliccare... (olimpico, stadio dei marmi, ministero affari esteri)... (a pagina 5 del link postato sopra...)...

_______

aggiunto contorno area cliccabile...

Leggi di più
Postato il da Skeggia 12
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Antonio G.
... ... ... ... ... ...non sono un programmatore, sono a digiuno di codici html ... ... ...  ... ...C'è qualcuno che ha la pazienza di descrivermi se quello che desidero fare posso essere in grado di farlo? Vi ringrazio della pazienza, un caro saluto.

... ...se devi fare! ...devi comunque iniziare a studiare qualcosa...!...
... purtroppo le mie decine di esempi sulle mappature di tutti i tipi si sono estinti...
... ci sono vari programmi che mappano le immagini agevolando relativamente! la creazione del codice, per esempio, PSP, Gimp, altri, ...e per stare al passo con WebSiteX5 per mappare potresti usare OpenOffice.org, semplicissimo, però si fa prima a fare che a dire...
>> menu >> inserisci >> immagine || >> menu >> modifica >> ImageMap ... e vai!
... la guida è molto chiara...
 ... oppure puoi mappare direttamente in rete:   http://www.maschek.hu/imagemap/imgmap
... in ogni caso il codice ottenuto lo incollerai in un Oggetto Codice HTML, facendo attenzione ai percorsi dell'immagine che utilizzerai, per esempio, se alleghi l'immagine: "files/nomeimmagine.jpg"
... è certo che comunque, per quanto sia semplice, ci devi mettere sempre la tua attenzione ed il tuo impegno...

... ma! ...sembra di aver inteso da altro Topic che hai WebAnimator(che non conosco), col quale potresti mappare in modo semplice ed immediato, conoscendolo, (credo come lo si potrebbe/poteva fare con SwishMNax, insuperabile), quindi forse hai già in mano lo strumento più adatto, veloce e facile, e per come desumo da qui:   https://helpcenter.websitex5.com/post/139410#2  ... e come vedo già anticipato anche da Skeggia...
... poi, se ritieni superflua la presenza dell'area cliccabile, ... trovi qui un semplicissimo suggerimento che non richiede preparazione alcuna:
https://helpcenter.websitex5.com/post/140874#9
... ed anche qui: 
https://helpcenter.websitex5.com/post/135757#11
... con un copia/incolla te ne renderai conto subito, e poi ovviamente modificare i valori e relazioni per quel che ti serve...

... però, a parer mio, il metodo più semplice ed immediato, facilmente controllabile, e con minimo impegno, resta l'uso dell'Oggetto Testo (abilitato HTML "</>"), nel cui inserire la parole da linkare, controllandone le coordinate a vista (Anteprima), tramite ritorni a capo per controllo verticale, e spazi unificatori (per controllo orizzontale &nbsp; &ensp; &emsp; (1, 2, 4 spazi vuoti, abbinabili copia/incolla per velocizzare), oppure usare il TAG SPAN/padding-left per generare veloci spaziature;...l'immagina sarebbe da inserire come sfondo della cella contentete l'oggetto testo...
... esempio 1): &emsp; &emsp; &emsp; &emsp; pippo (20 spazi vuoti prima di pippo)
... esempio 2): <spanXX style="padding-left:100px"> </spanXX> pippo   (100 pixel vuoti prima di pippo)

...!!... togli dal codice le due doppie X (XX) ..!!..

... prova e ti renderai conto che ne avrai subito la situazione in mano...
.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Antonio G.
Antonio G.
User
Autore

Scusami KolAsim, intendi dire il programma Open Office? La suite?

grazie.

Leggi di più
Postato il da Antonio G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Antonio G.
Scusami KolAsim, intendi dire il programma Open Office? La suite? ... ...

... sì ...

... inserisci l'immagine nella pagina di OO.o, vai nel menu MODIFICA > ImageMap e seleziona le aree assegnando i link, quindi esporti/salvi la pagina in HTML, la apri nel blocco note di windows, e selezioni il TAG MAP ed IMG, lo copi, e lo incolli in un Oggetto Codice HTML della pagina in cui ti serve; ...correggi il percorso dell'immagine in "file/nomeimmagine.jpg", ed alleghi l'immagine nomeimmagine.jpg stesso Oggetto Codice HTML lasciando "files" come destinazione proposta per default...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Leonardo L.
Leonardo L.
User

Antonio,

vai sul mio sito : www.hamradioguide.net alla sezione HAMPEDIA - WORLD CALL AREAS. Una volta entrato sulla pagina clicca ad esempio sulla regione degli USA. Entrerai nel dettaglio degli USA, che per le mie esigenze ho suddiviso in base alle zone di chiamata dei radioamatori. Al momento sono pronte le mappe di USA ed Australia e ne sto implemenatndo delle altre. Fammi sapere se è il meccanismo che stavi cercando così ti do le istruzioni. Ovviamente c'è del codice html che viene generato da una piccola utility di gestione delle mappe e che dovrai inserire in un oggetto codice HTML di WSX5

Fammi sapere

Leggi di più
Postato il da Leonardo L.