Cartina italia cliccabile: regioni e link con effetto hover

[invasionealiena]

Salve a tutti, ringrazio prima di tutto i moderatori e sopratutto a chi mi dedicherà del tempo per risolvere questo problema.

Sto cercando di creare una mappa dell'italia cliccabile, e fin qui non ho problemi. Ho gia caricato il codice html e css con il relativo richiamo nell'index.php. In pratica funziona tutto ma mi trovo di fronte ad un problema che non ha soluzione. Sicuramente ci sarà ma non sono riuscito a trovare nessun tutorial sul web.

vi posto un link al sito web dove in home page c'è un esempio della catina.

http://www.mangiardove.it/

come potete vedere quando si passa su un immagine o su un link (della regione) si illuminano entrambi.

Esempio: passo con il mouse sulla toscana? si illumina la cartina e il link toscana.

Spero qualcuno possa essermi d'aiuto.

Grazie in anticipo a tutti. un abbraccio

[tomtomeight]

Ciao
Mi sembra normale che si illuminano, come dici, entrambi, perché vorresti fare diversamente?

[invasionealiena]

Ciao tom, grazie per avermi risposto. In effetti non mi sono spiegato bene. Nella mappa che ho creato si illumina tutto e funziona tutto. Ora dovrei implementare le regioni tramite link (accanto alla mapp) e fare in modo che si illuminino contemporaneamente alla regione su effetto hover. Vedi sito postato in precedenza



Puoi aiutarmi? Grazie ancora 

[tomtomeight]

Continuo a non seguirti, dici che funziona tutto e poi vuoi che si illuminano contemporaneamente regione (mappa) e regione (nome) su hover, ma già è così.

[bertino]

allora mangiardove non è un tuo sito? ma solo un esempio di come vorresti fare?


berto

[bertino]

ho guardato adesso e ho visto che è fatto con WP e quello è un altro mondo non questo qui di joomla che ogni cosa bisogna penare per farla o pagare per farsela fare


berto

[invasionealiena]

Buongiorno a tutti e grazie per l'attenzione e il supporto!

Allora il sito Mangiardove non è mio e dovrei realizzare una cosa del genere. Chiedo venia per essermi spiegato male. Grazie in anticipo a tutti

[invasionealiena]

Salve a tutti, rinnoVo il post


Qualcuno sa consigliarmi un tutorial o come fare per creare una mappa dell'Italia cliccabile con accanto un menù link con tutte le regioni?


La funzionalità che deve avere e' che al passaggio del mouse, sopra un link o u na regione, ci sia un effetto hover simile a quello del sito web MangiarDove.it ( vedi link nel primo post)


Purtroppo il cliente vuole a tutti i costi questa soluzione.


Grazie ancora

[maicolstaip]

Ciao,
non credo tu lo possa fare con joomla, devi trovare una soluzione esterna e poi la implementi nel sito.

[invasionealiena]

Grazie per la risposta Maicol.    Sapresti consigliarmi qualche tutorial? anche in inglese?

[bertino]

le soluzioni sono tante quando cerchi qualcosa prima di cercare a caso nel forum cerca negli articoli della community e particolarmente quelli di tonicopi una vera forza di joomla italia altro che i gemelli D & G alias Gi & Gi


http://www.joomla.it/articoli-community-16-e-17-tab/5367-una-mappa-interattiva-dellitalia.html


adesso usa google per trovarlo effettivamente in mezzoretta visto che in jed non c'è più


ma questa è anche meglio


http://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/country-maps/24229


berto

[invasionealiena]

Ciao Bertino, ti ringrazio per la risposta ma avevo già testato questo modulo. Potrebbe andare bene ma quello che vuole il mio cliente e' che i link a regione siano visibili a lato della mappa e non nel menù a tendina. In più sia i link che la regione si devono illuminare al passaggio del mouse.


Ho letto molti articoli e tutorial, sia di joomla che non. Ma non sono riuscito a trovare la soluzione che fa al caso mio. Mi piacerebbe scriverlo da zero, quindi non ho paura a seguire dei tutorial.


Spero che qualcuno possa essermi d'aiuto. Grazie 

[bertino]

semplice te la scrivi in flash ma il tuo cliente non si rende conto che poi i dispositivi portatili non la vedono? sei tu che devi educare i clienti non i clienti che insegnano a te! bello non vuol dire anche funzionale o funzionante!


berto

[invasionealiena]

Ciao Bertino, ti ringrazio per la risposta. Ma una soluzione come il sito web mangiardove.it ?
Quella non mi sembra in flash..


Grazie

[bertino]

magari prendendo quella che ti ho indicato io e modificandola o chiedere direttamente al produttore se lo può fare magari gli torna utile come idea per una nuova release


tentar non nuoce


berto

[invasionealiena]

Ho trovato una soluzione. Nei prossimi giorni la posto qui sotto sperando possa essere utile alla community di Joomla

[bertino]

siccome usa jquery potresti partire anche da questa http://davidlynch.org/projects/maphilight/docs/


berto

[invasionealiena]

Grazie Bertino, sono riuscito a trovare un soluzione. E' possibile mettere a disposizione della community il codice ccs e le immagini?

[Cereal___killer]

Quando volete copiare una funzionalità esistente in un sito, come nel tuo caso, basta copiarla per l'appunto e farla funzionare in locale in una normale pagina HTML (non in joomla); una volta che avete una pagina HTML funzionante con l'effetto desiderato, la implementate in joomla;


Per esempio in questo caso, dal sito che hai postato ho scaricato il codice HTML della lista delle regioni, il CSS del sito, lo script che si occupa dell'animazione (nel body del sito si trova diretto in coda alla suddetta lista);
Ho creato una pagina HTML vuota sul mio pc, ho incluso nell'header il CSS, il file JS dove ho copiato lo script, e prima di esso, jquery poiché lo script usa jquery; infine ho messo nel body il codice HTML copiato et voilà, funzionalità replicata tale e quale, tempo impiegato 5 min (ad essere lenti)...


Una volta che funziona, il codice HTML basta metterlo su joomla in un articolo, modulo o dovunque volete che venga visualizzato l'effetto, le regole CSS vanno incluse in un css qualsiasi e il js va aggiunto alla sezione header del template o copiato il suo codice in un CSS già esistente (se avete altri script jquery prob c'é la chiamata noConflict, quindi dovete sostituire "$" del nuovo script con "jQuery")...


Si fa tutto con "Ispeziona elemento di Chrome" e un minimo di pazienza per trovare lo script che si occupa dell'animazione