Autore Topic: Cartina d'Italia  (Letto 3303 volte)

milux

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1512
    • 3MD
Cartina d'Italia
« il: 19 Dicembre, 2011, 09:31:48 »
Questo tutorial vi spiega uno dei tanti sistemi possibili per creare una cartina cliccabile.


In rete ci sono tantissimi esempi e quello che abbiamo trovato è forse uno dei più semplici e immediati da utilizzare.


Tutti i files che vi servono li trovate qui : http://css.flepstudio.org/css-menu/css-mappa-italia-8.html ; scaricate il file .zip e decomprimetelo in una cartella a vostro piacere.


All'interno della cartella troverete un file index.html e una cartella /img che contiene le immagini necessarie.


1) Creiamo quindi con Website X5 versione 9 un nuovo progetto , utilizzando un semplice modello predefinito.


2) andiamo al passo 2 e creiamo una pagina (il nome lo lasciamo alla vostra fantasia) in cui inseriremo il codice hmtl necessario. Nel nostro caso l'abbiamo chiamata Mappa ITALIA


3) Con un editor di testo (personalmente uso PSPAD) apriamo il nostro file index.html che abbiamo precedentemente scaricato. Il file contiene anche la parte relativa al CSS che noi dovremo suddividere.


4) Ritorniamo a WSX5 e all'interno della nostra pagina inseriamo l'oggetto "codice HTML" e clicchiamo sopra l'oggetto per aprirlo.


5) con l'editor copiamo (ctrl+c) dalla pagina index.html tutta la parte compresa tra i <div id="contenitore"> e </ div>


6) con la funzione incolla (ctrl+v) riportiamo il contenuto nell'oggetto html di WSX5; il risultato è questo (non si vede tutto il codice perchè ci sono molte righe..)


[ Guests cannot view attachments ]

nel caso aveste problemi potete scaricare qui la parte da inserire (formato txt)


[ Guests cannot view attachments ]

7) sempre con l'editor di testo selezioniamo dal file index.html la parte relativa al CSS e la riportiamo nella sezione Esperto del codice HTML che abbiamo inserito. Risultato finale :


[ Guests cannot view attachments ]


8 ) Adesso dobbiamo allegare o mettere in rete le immagini contenute nella cartella /img.


  • Metodo A) Possiamo utilizzare il caricamento dei files dalla sezione Esperto dell'Oggetto HTML. Per selezionare più files contemporaneamente usare il tasto CTRL e cliccando sui var files. Nota: questa modalità di esecuzione non sembra funzioni su tutti i sistemi operativi e/o PC. Dovete quindi provare e nel caso non funzionasse la selezione multipla, dovete fare l'inserimento per singolo file o passare al metodo B. Questo metodo ha anche un'altro svantaggio è cioè che ogni volta che fate un aggiornamento del vs sito internet, farà comunque l'ftp degli allegati.
  • Metodo B) Upload della cartella con i contenuti. Lo potete eseguire con il vostro programma preferito di FTP o altri tipi di procedure. Personalmente è la procedura che preferisco in quanto.
9) Adesso con Website creiamo le varie pagine dedicate ad ognuna delle regioni : nel nostro caso abbiamo creato ad esempio la Lombardia dove abbiamo inserito una semplice immagine e un testo. Il nome del file lo lasciamo di default e nel nostro caso si chiama lombardia.html ; per poter aprire la pagina dalla nostra cartina dobbiamo  specificare il nome del file. Riapriamo il nostro oggetto html della pagina Mappa ITALIA e modifichiamo inserendo il nome del file :


[ Guests cannot view attachments ]


Il procedimento è da ripetere per ogni pagina che andrete a creare.


A questo punto se avete fatto tutto correttamente , fate l'esportazione del progetto e verificate che sia tutto corretto.   Il resto lo lasciamo alla vostra fantasia.


Qui potete vedere il lavoro finito : CARTINE
« Ultima modifica: 19 Dicembre, 2011, 13:46:14 da milux »
**OS : Windows 7 - 63Bit (uno è andato perso e non lo trovo..)
**Website X5 : Evo 8(active) - Evo 9(active) - Evo 10(standby)
**Wysiwyg Web Builder 9 (passa al lato oscuro..)
**Hosting : LINUX
**Editor : Notepad ++ / Geany

milux

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1512
    • 3MD
Re:Cartina d'Italia
« Risposta #1 il: 05 Novembre, 2012, 09:52:14 »
Sulla base dell'esercizio precedente è stata introdotta una variante e cioè la possibilità di avere l'elenco delle provincie cliccando sulla regione. Ovviamente cliccando sulla provincia scelta si accede alla pagina corrispondente..


Il procedimento è identico al precedente salvo alcune righe di codice in più che dovremmo aggiungere.


codice javascript da inserire nella sezione esperto della pagina prima del tag /HEAD


Codice: [Seleziona]
<script type="text/javascript">
function fix(obj) {

for (var i = 0; i < 20; i++) {
if (i != obj.substring(3)) {
document.getElementById("reg" + i).style.display='none';
document.getElementById("reg" + i).className='notfixme';
}
}

document.getElementById(obj).className='fixme';
document.getElementById(obj).style.display='block';
}
</script>


Nella pagina il codice html da inserire che dovrà essere completato con le pagine corrispondenti..


[ Guests cannot view attachments ]


Un grazie a Stesil per il contributo alla modifica del codice.




qui la pagina di prova

**OS : Windows 7 - 63Bit (uno è andato perso e non lo trovo..)
**Website X5 : Evo 8(active) - Evo 9(active) - Evo 10(standby)
**Wysiwyg Web Builder 9 (passa al lato oscuro..)
**Hosting : LINUX
**Editor : Notepad ++ / Geany

ale_dj

  • Nuovo arrivato
  • *
  • Post: 27
Re:Cartina d'Italia
« Risposta #2 il: 20 Gennaio, 2014, 08:41:15 »
buongiorno ma il link sopra non funziona più come faccio per reperire la pagina???


milux

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1512
    • 3MD
Re:Cartina d'Italia
« Risposta #3 il: 20 Gennaio, 2014, 10:09:29 »
se ti riferisci a flepstudio effettivamente sembra essere offline..
**OS : Windows 7 - 63Bit (uno è andato perso e non lo trovo..)
**Website X5 : Evo 8(active) - Evo 9(active) - Evo 10(standby)
**Wysiwyg Web Builder 9 (passa al lato oscuro..)
**Hosting : LINUX
**Editor : Notepad ++ / Geany

ale_dj

  • Nuovo arrivato
  • *
  • Post: 27
Re:Cartina d'Italia
« Risposta #4 il: 20 Gennaio, 2014, 10:26:30 »
Si Milux... volevo sapere dove poter trovare una cartina per ricreare una lista di rivenditori...

Topografo

  • Utente inesperto
  • **
  • Post: 119
Re:Cartina d'Italia
« Risposta #5 il: 30 Aprile, 2014, 22:02:37 »
Era una cosa che interessava pure a me... non si trova più ne il file zippato nè il sito con l'esempio.
... :?

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1250
    • lemonsong's links
Re:Cartina d'Italia
« Risposta #6 il: 30 Aprile, 2014, 23:53:09 »
Non ho capito se ti riferisci a questo esempio allegato.

[ Guests cannot view attachments ]

ale_dj

  • Nuovo arrivato
  • *
  • Post: 27
Re:Cartina d'Italia
« Risposta #7 il: 01 Maggio, 2014, 00:52:33 »
si esatto... ma come faccio ad inserire i css??? non ci capisco nulla!!!ihihihihih

Topografo

  • Utente inesperto
  • **
  • Post: 119
Re:Cartina d'Italia
« Risposta #8 il: 01 Maggio, 2014, 01:31:39 »
Si, Lemonsong... proprio a quell'allegato.
Ma che fine ha fatto la pagina http://www.3md.it/mappe/italia-e-province.html per vedere come veniva?

milux

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1512
    • 3MD
Re:Cartina d'Italia
« Risposta #9 il: 01 Maggio, 2014, 08:54:57 »
Si, Lemonsong... proprio a quell'allegato.
Ma che fine ha fatto la pagina http://www.3md.it/mappe/italia-e-province.html per vedere come veniva?


ho il server giù , a breve dovrebbe tornare on-line
**OS : Windows 7 - 63Bit (uno è andato perso e non lo trovo..)
**Website X5 : Evo 8(active) - Evo 9(active) - Evo 10(standby)
**Wysiwyg Web Builder 9 (passa al lato oscuro..)
**Hosting : LINUX
**Editor : Notepad ++ / Geany

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1250
    • lemonsong's links
Re:Cartina d'Italia
« Risposta #10 il: 01 Maggio, 2014, 10:55:38 »
In attesa che il server torni up, linko l'esempio di stesil: http://stesil.altervista.org/cartina/

Non so se è simile all'esempio di milux; qui il topic di riferimento: http://www.unofficialwsx5.com/index.php?topic=1069.0



Topografo

  • Utente inesperto
  • **
  • Post: 119
Re:Cartina d'Italia
« Risposta #11 il: 01 Maggio, 2014, 12:22:05 »
Perfetto, grazie a tutti e due :)
Ho implementato tutto in una pagina di un sito che stò provando a fare (ma c'è solo un template) e non viene nulla... :D

Ok, magari deve essere un progetto a se stante.
O più facilmente quando ho inserito i file nella sezione esperto ho sbagliato qualcosa.... :( (in effetti si, se si inseriscono i files da "sezione esperto" la cartella non è img/ ma files/

E poi devo creare sicilia.html... :O

Visto che ho dormito 3 ore torno a letto in attesa del pranzo :)

inorridite! :D

http://veronacitysera01.altervista.org/veronacity/mappa.html

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1250
    • lemonsong's links
Re:Cartina d'Italia
« Risposta #12 il: 01 Maggio, 2014, 13:41:05 »
Controlla bene e decidi quale esempio seguire, hai dimenticato alcuni CSS.

Inoltre hai inserito i tag <style type="text/css"> </style> all'interno del file pcss/mappa.css... non è corretto.

Topografo

  • Utente inesperto
  • **
  • Post: 119
Re:Cartina d'Italia
« Risposta #13 il: 02 Maggio, 2014, 07:15:48 »
Ok, avevo dimenticato qualcosa... la parte di Milux
Ho levato dalla sezione esperto i css, li ho messi tutti in proprietà della pagina prima del tag </head> e qualcosa migliora
Ma qualcosa no... mi sà che lo riguardo stanotte.

http://veronacitysera01.altervista.org/Veronacity/mappa.html


lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1250
    • lemonsong's links
Re:Cartina d'Italia
« Risposta #14 il: 02 Maggio, 2014, 16:46:31 »
Se hai scelto l'esempio di milux devi prendere anche i CSS di milux: http://www.3md.it/mappe/pcss/italia-e-province.css

Ovviamente inserendoli nel modo corretto (come già stato scritto).