Pubblicato da: fedeweb | luglio 9, 2008

Permettere all’utente di cambiare lo sfondo del sito

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

Annunci

Responses

  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


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: