Fw

Wordpress Creative Developer

Permettere all’utente di cambiare lo sfondo del sito

  • Plugin jQuery
  • -

Qualche giorno fa vi ho parlato dello slide panel, ovvero un div che compare a seconda dell’azione dell’utente.

Uno degli utilizzi più comuni di questo pannello è quello di permettere agli utenti di modificare le proprietà del sito web, come la dimensione dei caratteri, il colore di sfondo ecc.

In questo articolo cercherò di spiegarvi come è possibile cambiare l’immagine di sfondo del sito, tramite del semplice codice javascript (via CodeBelly). Per capire quello a cui voglio arrivare guardate questo esempio.

Vediamo come si può procedere:

1) Come prima cosa dobbiamo definire un array, che chiameremo backimage:

var backImage = new Array();

2) Ora questo array lo dobbiamo riempire con le immagini che abbiamo scelto per il nostro background; ad esempio, se abbiamo messo tutte le immagini (in questo caso tre) nella cartella “backimages”, dovremo scrivere:

backImage[0] = “backimages/1.jpg”;
backImage[1] = “backimages/2.jpg”;
backImage[2] = “backimages/3.jpg”;
backImage[3] = “”;

Inoltre suggerisco di mettere alla fine un elemento dell’array vuoto, in modo da poter permettere all’utente di non mettere nessuna immagine di sfondo.

3) Infine dovrete aggiungere la funzione che permette di di scambiare le immagini.

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}

Il codice scritto nei 3 punti precedenti dovete metterlo nell’header della pagina html, tra i tag <script> e </script>, in questo modo:

<script language=”Javascript”> codice dei punti 1), 2) e 3) </script>

oppure scrivere il codice in un file .js esterno, per una miglior gestione dei codici.

4) Bene ora non resta che agire sul codice html: ricordo che stiamo sfruttando lo slide panel e quindi il codice verrà messo dentro il div #panel visto nell’articolo riguardante tale argomento.

<div id=”panel”>
<a href=”javascript:changeBGImage(0)”>Img 1</a>
<a href=”javascript:changeBGImage(1)”>Img 2</a>
<a href=”javascript:changeBGImage(2)”>Img 3</a>

<a href=”javascript:changeBGImage(3)”>No image</a>
</div>

Bene, direi che è tutto…qui di seguito avete il sorgente e una pagina di esempio per vedere in funzione lo script. Se ci sono dubbi chiedete pure!!

Scarica il sorgente

Guarda l’esempio

6 Commenti

  1. Scusa della domanda forse banale ma di java nn capisco nulla. Lo script è comodissimo e riesco a farlo funzionare, anche grazie a te che sei stato mooolto preciso ma se io voglio partire da uno sfondo per poi cambiarlo con i pulsanti? Se lo imposto con i css poi nn funziona lo script

  2. Scusa non ho ben capito la domanda..quello che tu chiedi è già scritto nell’articolo come farlo…

  3. Cerco di spiegarmi,
    sul tuo esempio parti da un body senza sfondo per poi assegnarglielo con i pulsanti creati. Il sito che sto creando a già uno sfondo assegnato tramite css al body. Ora lo script che hai postato nn funziona se nn tolgo lo sfondo al tag body ma io nn voglio che come nell’esempio la mia pagina html parta con schermo bianco.
    Sono stato piu chiaro? Scusa se ti rompo!!! 🙂

  4. Come hai impostato lo sfondo di partenza al tuo sito?

    basta che nel foglio di stile css metti:

    body {

    background-color: quello che vuoi; /*se hai un colore di sfondo*/

    oppure:

    background: url (image/foto.jpg); /*se hai un’immagine di sfondo*/

    }

    Se ci sono altri dubbi chiedimi pure

  5. salve ^^ avevo una domanda XD

    come si fa a salvare lo sfondo? cioè… una volta usciti dalla pagina ritorna (ovviamente) quello originale… come si può fare in modo che invece resti impostato quello? tramite cookie o Html5storage?

    puoi aiutarmi? ^^

  6. Ciao Domenico e benvenuto nel blog 😉
    Si puoi utilizzare i cookie. Prova a leggere questo thread, forse ne vieni fuori!
    Ciao!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *