Cambiare contenuto al click pulsante senza ricaricare pagina

[LukeFiles]

Salve a tutti ragazzi, volevo sapere come creare una tabella dinamica con delle varie sezioni, tipo così:



Prendiamo come esempio questo box (per rispetto del forum ho censurato il nome del sito): ha 3 sezioni, ovvero 3 giorni diversi (22 Febbraio, 23 Febbraio, 24 Febbraio). Selezionando uno tra questi 3 giorni, il box cambia l'immagine della previsione senza aggiornare la pagina. Bene, vorrei gentilmente che mi indicaste come realizzare una cosa simile attraverso una guida o una breve spiegazione oppure se si può realizzare il tutto mediante un plugin (siccome uso WordPress)! Grazie mille per l'eventuale supporto.

[Alhazred]

Benvennuto.

Si fa con HTML, CSS e Javascript, guarda come esempio le tabs di Bootstrap (se usi questo hai già tutto pronto), qui la documentazione ufficiale e qui qualche esempio funzionante.

Se volessi farlo con PHP, cosa che ti sconsiglio vista l'esiguità dei dati da mostrare, al click del pulsante dovresti inviare una richiesta AJAX (quindi con javascript) verso uno script php, lo script php dovrebbe recuperare i dati e stamparli con un echo in un formato comodo da leggere (quindi xml o json), la funzione javascript così potrà recuperare i dati ed usarli per sostituirli a quelli esistenti... un casino per soli 3 contenuti.
Tanto vale generarli tutti insieme e mostrare quelli che servono e nascondere gli altri.

Per ulteriori informazioni sul funzionamento delle tabs, chiedi nella sezione CSS.

[LukeFiles]

Benvennuto.

Si fa con HTML, CSS e Javascript, guarda come esempio le tabs di Bootstrap (se usi questo hai già tutto pronto), qui la documentazione ufficiale e qui qualche esempio funzionante.

Se volessi farlo con PHP, cosa che ti sconsiglio vista l'esiguit� dei dati da mostrare, al click del pulsante dovresti inviare una richiesta AJAX (quindi con javascript) verso uno script php, lo script php dovrebbe recuperare i dati e stamparli con un echo in un formato comodo da leggere (quindi xml o json), la funzione javascript così potrai recuperare i dati ed usarli per sostituirli a quelli esistenti... un casino per soli 3 contenuti.
Tanto vale generarli tutti insieme e mostrare quelli che servono e nascondere gli altri.

Per ulteriori informazioni sul funzionamento delle tabs, chiedi nella sezione CSS.

il sito in questione stampa sottoforma di immagine il contenuto, giusto? Ma in realtà l'ha realizzato in php con le varie tabelle ben messe? Mi sembra strano si tratti di un immagine...

http://sitocensurato/Servizi/Previsi...rno=23/02/2017

L'url dell'immagine sopracitata si presenta così... quindi, non essendo un maestro del PHP, mi consigli di realizzarla in HTML/CSS e JS? Partiamo dal presupposto che devo fare una cosa simile, facendolo con i linguaggi che mi hai consigliato uscirebbe simile? Inoltre, vorrei fare un collegamento col pannello di controllo Wordpress dove aggiorno giorno per giorno la cartina delle previsioni, se no farlo sistematicamente dal file mi costerebbe troppo... è fattibile come cosa secondo te?

[Alhazred]

Il link che hai postato non è valido, quindi non so dirti se quella sia un'immagine o altro.

Se sei un neofita, in ogni caso non è una cosa facile da fare da zero, sia che usi HTML, CSS e JS o che usi la soluzione PHP e JS (html e css ti serviranno comunque).
Sulla riuscita simile, certo, se qualcuno lo ha fatto, vuol dire che si può rifare uguale, basta esserne capaci.
Per quanto riguarda Wordpress, che intendi per "collegamento col pannello di controllo"?
Vuoi modificare i dati contenuti nel DB di WP da uno script che non è un modulo di WP? In tal caso devi stare molto attento e sapere cosa e come devi modificare, perché non rispettando tutti i vincoli del framework di WP è facile far casini e non far funzionare più niente.

[LukeFiles]

Il link che hai postato non � valido, quindi non so dirti se quella sia un'immagine o altro.

Se sei un neofita, in ogni caso non � una cosa facile da fare da zero, sia che usi HTML, CSS e JS o che usi la soluzione PHP e JS (html e css ti serviranno comunque).
Sulla riuscita simile, certo, se qualcuno lo ha fatto, vuol dire che si puoi rifare uguale, basta esserne capaci.
Per quanto riguarda Wordpress, che intendi per "collegamento col pannello di controllo"?
Vuoi modificare i dati contenuti nel DB di WP da uno script che non � un modulo di WP? In tal caso devi stare molto attento e sapere cosa e come devi modificare, perch� non rispettando tutti i vincoli del framework di WP � facile far casini e non far funzionare pi� niente.

Il sito � weathersicily.it, mentre il link corretto � http://www.weathersicily.it/Servizi/...rno=23/02/2017 (puoi censurarli dopo averli visualizzati!)

Ho pensato fosse un immagine, perch� me la fa salvare sottoforma di immagine, ma non penso sia cos�, almeno credo!... a me basterebbe fare una semplice tabella anche con 3 immagini, dove una la visualizzerei di default (quindi la previsione odierna), e le altre due immagini nascoste e visualizzate solo se cliccate a uno dei due giorni successivi... non pretendo di fare un sistema complesso in PHP. Per quanto riguarda il collegamento al pannello di controllo di WP, non vorrei fare nessun collegamento col database in quanto userei la via meno complessa (quella che mi hai consigliato prima di tutte)... fare 3 stringhe dove sostituerei giorno per giorno le cartine previsionali (in questo caso le immagini), senza aprire ogni volta il file e sostituirle... aspetto una tua risposta, gentilissimo!

[Alhazred]

Quella sulla pagina è effettivamente un'immagine PNG, generata probabilmente con la libreria GD di PHP.
Per realizzare una cosa del genere dovresti avere un'immagine png della regione e un'immagine png per ogni condizione meteo.
Poi sapendo le coordinate X e Y delle varie città sull'immagine png ci vai ad applicare la relativa immagine della situazione meteo.
Stessa cosa per le temperature, sapendo le coordinate di ogni riga puoi andare a scrivere nel punto esatto.
Alla fine salvi tutto ed hai la mappa con il meteo.

Per sapere come fare a mostrare la mappa di cui si è selezionato il giorno e nascondere le altre, dovresti chiedere nella sezione CSS (anche se in realtà c'entra anche JS).
Resta il fatto che non è semplicissimo se non sai destreggiarti con JS.