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

milux

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1305
    • 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: 1305
    • 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: 10
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: 1305
    • 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: 10
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...