Modifica immagine di sfondo attraverso un bottone

[Gianluca66]

Ho un problema da risolvere:
Ho una pagina html con sfondo un'immagine, chiamiamola "001.jpg"
questa immagine rappresenta il simbolo "si può entrare"
Ora questa immagine deve essere modificata da persona che non sa gestire l'ftp, il quale deve sostituire all'immagine "si può entrare"
con l'immagine "10 minuti di attesa" o altra immagine con "30 minuti di attesa e cosi via...
A lui creerei una pagina html dove trova i diversi bottoni e cliccandoci modifica l'immagne di sfondo.
Quindi volevo creare dei bottoni, uno associato ad ogni immagine con cui cambiare l'immagine di sfondo in modo automatico.
Come posso fare?
Grazie

 

[Tommy03]

Beh, se si tratta di pagine diverse credo proprio che tu debba usare PHP.
Secondo me si potrebbe fare con un database, crei la pagina per lui con un form in cui c'è un input radio per scegliere l'immagine di sfondo e poi salvi il dato scelto nel database. Poi nella pagina che ha l'immagine di sfondo prelevi il dato dal database e lo mostri

 

[Gianluca66]

Beh, se si tratta di pagine diverse credo proprio che tu debba usare PHP.
Secondo me si potrebbe fare con un database, crei la pagina per lui con un form in cui c'è un input radio per scegliere l'immagine di sfondo e poi salvi il dato scelto nel database. Poi nella pagina che ha l'immagine di sfondo prelevi il dato dal database e lo mostri

Pensavo si potesse in qualche modo modificare quell'url, faccio un esempio se l'immagine che va a leggere il codice è ..../001.jpg, attraverso dei button trasformarlo in 002.jpg o 003.jpg e cosi via. Cosi che cambiando l'url cambia anche l'immagine.

 

[Max 1]

Da una pagina HTML non puoi sostituire il codice di un'altra pagina!

 

[Gianluca66]

Quindi se ho capito bene se io avessi una pagina php con tre tasti con "foto 1" - "foto2" - "foto 3 " e al cliccare di uno dei tre tasti l'url nel sorgente html mi si modifica questo si può fare?
Senza che chi lo fa deve necessariamente utilizza l'ftp.

 

[Tommy03]

Ma l'immagine di sfondo vuoi che quando viene modificata sia in modo permanente o solo per una singola visualizzazione?

 

[Gianluca66]

In modo permanente fino a che il soggetto preposto non clicca su un altro tasto e la cambia nuovamente, in altri termini ogni volta che si clicca su un tasto associato ad un immagine questa cambia, fino a che non viene ricliccato un'altro tasto con un'altra immagine.

 

[Gianluca66]

Premesso che non sono un sviluppatore, però con l'html un pò me la cavo, ora il mio medico di base sapendolo, con il discorso del covid-19 mi ha chiesto di creare un'indirzzo web dove compare un'immagine, questa immagine può essere rossa, gialla o verde, così i pazientiprima di andare vanno all'indirizzo indicato e vedono il colore ed in base al colore decidono di andare, chiaramente rosso
vuol dire che gente, giallo poca gente e verde possono tranquillamente partire da casa per andare all'ambulatorio.
Ora lui deve poter cambiare l'immagine, ma chiaramente l'unica cosa che ho pensato è dargli un'indirizzo dove trova tre pulsanti ed in basea quello che clicca l'immagine cambia, questo dovrei fare. Spero di essere stato più chiaro.
Grazie

 

[Max 1]

Sei stato chiaro anche prima!
Tu hai una pagina index.html che quando uno la apre dal suo browser di casa o d'ufficio o altro presenta un'immagine richiamata dal suo codice interno; ora tu da un'altra pagina con un semplice pulsante non puoi cambiare il codice della pagina index.html in modo che chiunque la apra veda la nuova immagine

Modificare l'immagine di sfondo lo potresti fare con dei pulsanti solo dalla stessa pagina

 

[Gianluca66]

Già che sono stato chiaro per me è un successo. Poi mi sono accorto adesso che l'immagine si trova su un css e non html.
Che è questo:

body {
/* Location of the image */
background-image: url(images/sa01.jpg);

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its container's size */
background-size: cover;

/* Pick a solid background color that will be displayed while the background image is loading */
background-color:#464646;

/* SHORTHAND CSS NOTATION
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/sa01.jpg);
}
}


Ora forse non sarà facile ma ci sarà un modo per far cambiare ad una terza persona quel sa01.jpg, in sa02 jpg o sa03.jpg.

Il problema che sicuramente non sarà una cosa da niente come avevo pensato.
Comunqe grazie solo per l'interessamento.

 

[Tommy03]

Per fare quello che vuoi te la soluzione più semplice secondo me è usare un database. Crei una pagina (a cui può accedere solo colui che deve scegliere il colore) con un form, all'interno del quale metti un input radio. Poi nella stessa pagina scrivi codici PHP per salvare l'immagine scelta nel database. Infine, nella pagina che tutti vedono, con PHP prelevi dal database l'immagine attualmente scelta dal medico e la imposta come background

 

[Gianluca66]

Ti ringrazio Tommy03 ho capito il procedimento, ma per me, scrivere questo codice è quasi impossibile, considerando il tempo che ho da dedicargli, pensavo fosse una cosa più alla portata.

 

[Tommy03]

In realtà non è cosi difficile. Che hosting usi? Se hai già un database pronto da utilizzare ci vuole poco, sono solo 2 file da scrivere penso

 

[Gianluca66]

Uso Aruba e il database ce l'ho, si penso anche io che non sia così difficile per chi lo sa fare. Provo a vedere qualcosa in giro per il web

 

[Tommy03]

Se ti può aiutare, ecco una linea generale:
Servono 3 file:
-config.php (magari ce l'hai già), per connetterti al database, è da includere nelle altre due pagine.
-pagina1.php, riservata soltanto al medico, dove può scegliere il colore
-pagina2.php, la pagina che tutti vedono con l'immagine di background.

Per quanto riguarda config.php, nel web trovi molti esempi che ti possono aiutare.

pagina1.php invece deve contenere un form con il quale modificare il campo del database relativo al colore:

<?php
include("config.php");
if(isset($_POST['invia'])){
$colore = $_POST['colore'];
$query = mysqli_query($conn, "UPDATE nome_tabella SET nome_campo=$colore");
}
?>
...
<form method="post" action="">
<input type="radio" name="colore" value="rosso">
<input type="radio" name="colore" value="giallo">
<input type="radio" name="colore" value="verde">
<input type="submit" name="invia" value="Invia">
</form>

pagina2.php ha il background colorato:

<?php
include("config.php");
$query = mysqli_query($conn, "SELECT nome_campo FROM nome_tabella);
while($row = mysqli_fetch_assoc($query)){
$colore = $row['colore'];
}
?>
...
<style>
body{background-color:<?php echo $colore;?>;}
</style>

Spero che possa essere una buona base di partenza.
P.S. Poi pagina1.php dovresti proteggerla con una password, dato che così chiunque potrebbe modificare il colore.

 

[Gianluca66]

Grazie ora ci studio su

 

[Max 1]

@Gianluca66

Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice php, oppure la funzione codice dalla barra degli strumenti

Inoltre IMPORTANTE: Prima di creare una nuova discussione o di rispondere alle discussioni esistenti ricordati di leggere attentamente il Regolamento del Forum e l'eventuale regolamento specifico della sezione!

Grazie

Correggi i tuoi post mi raccomando altrimenti sarò costretto a cancellare le discussioni

 

[Gianluca66]

Scusami sono nuovo, vorrei correggere ma non ho capito cosa devo correggere

 

[Max 1]

Scusami sono nuovo, vorrei correggere ma non ho capito cosa devo correggere

devi mettere il codice che inserisce nel post negli appositi tag come ti go spiegato e messo l'immagine nel mio post precedente

Poi devi leggere il regolamento!!