Cambiare immagine di sfondo con css

**zeropunto** · 20-03-2006, 17:09

Ciao, esiste un metodo con click, per cambiare l'immagine di sfondo della pagina senza dover ricaricare la pagina stessa?

**Mich_** · 20-03-2006, 17:26

Esistono le pseudoclassi :hover e :active, che pero` non dipendono dal click.

Se vuoi un evento al click, serve JS.

Comunque si puo` cambiare uno sfondo senza ricaricare la pagina. Esempi:
onclick="document.body.style.background='url(nuova imm.gif)';"
onclick="document.getElementById('ID_OGGETTO').sty le.background='url(nuovaimm.gif)';"

**fcaldera** · 20-03-2006, 17:49

forse usando in qualche modo la pseudoclasse :active ...

**pierofix** · 20-03-2006, 17:56

A parer mio dobbiamo finirla di suggerire utilizzi simili di javascript.

Credo convenga continuare a sfruttare al massimo CSS e usufruire del DOM, più precisamente del metodo di attribuzione delle classi.

Un esempio veloce. Diciamo di avere una cosa simile:

codice:

<body id="pagina">

Prepariamo una classe CSS apposita che ospiterà lo sfondo 'destinazione' dopo il clic. Ad esempio:

codice:

#pagina
{
   background:#fff url('sfondo.png') no-repeat fixed 0 0;
}
.sfondo-dopo
{
   background-image:url('sfondo-dopo.png');
}

Realizziamo una funzione js che attribuisce a #pagina la classe sfondo-dopo:

codice:

var pag = document.getElementById('pagina')
function cambia_sfondo()
{
   pag.className = 'sfondo-dopo'
}

Nella struttura di markup ci basterà inserire un collegamento tipo questo:

codice:

<a href="javascript:void(0)" onclick="cambia_sfondo()">
   Cambia sfondo
</a>

**zeropunto** · 20-03-2006, 19:19

Mitico, ora provo!!

*pragma · 20-03-2006, 19:37

ti voglio dare un suggerimento che va:
a) contro l'accessibilità. Ma l'accessibilità va rispettata (l'esempio ti serve come palestra)
b) contro questa sezione. ... Pazienza!
Ecc...
il javascript puoi metterlo anche in un foglio esterno.
Per copiare devi prima quotare.

Un CSS esterno definisce 3 classi per lo sfondo: 'in'; 'egg'; e 'graf', ma non ne imposta alcuna come attiva. background-attachment deve essere impostato a scroll.

Lo sfondo lo applico in un div, ma è evidente che puoi metterlo di sfondo al body.
<html>
<head>
<title></title>
<style>
.in {background-image:url('imm.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
}

.egg {background-image:url('immagine.bmp');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
}

.graf {background-image:url('graf.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50%;
}

</style>
<script language="javascript">
window.onload = function() {
sfondo() }

function sfondo() {
var cl = document.getElementById('qui');

if (cl.className == "") {
cl.className = "in"; }
else if (cl.className == "in") {
cl.className = "egg"; }
else if (cl.className == "egg") {
cl.className = "graf"; }
else { cl.className = "in"}
}
x = window.setInterval("sfondo()", 3000);
</script>
</head>
<body>
<div id="qui" style="border:1px green solid; width:460px;height:120px;color:red;font-size:26px;">Un po' di testo.</div>

</body>
</html>

**pierofix** · 21-03-2006, 09:57

Originariamente inviato da zeropunto
Mitico, ora provo!!

N.B. 'javascript' va scritto tutto attaccato.

Oh, abbiamo scoperto come cambiare lo sfondo di un documento tramite un pulsante contenuto al suo interno: occhio a non abusare di queste cose, però.

Non dimentichiamoci mai che un documento web è un recipiente strutturato di contenuti e se l'utente deve maneggiare in modo particolare questi contenuti dovrebbe rifarsi ai 'pulsanti' (funzionalità) del browser, non a bottoncini inseriti nella pagina.

Distinguere i campi di competenza potrebbe essere uno dei passi fondamentali per realizzare buoni siti. Insomma, in casi particolari si può essere fantasiosi in questo senso, tuttavia usare sempre giudizio e analizzare con attenzione la situazione ed il contesto.

**danielepennati** · 28-03-2006, 18:23

Originariamente inviato da Mich_
onclick="document.getElementById('ID_OGGETTO').sty le.background='url(nuovaimm.gif)';"

ciao
mi interessa questa funzione, ma non riesco ad evitare che faccia il repeat dell'immagine... c'è modo di evitarlo?
ciao e grazie
daniele

**fcaldera** · 28-03-2006, 18:32

Originariamente inviato da danielepennati
ciao
mi interessa questa funzione, ma non riesco ad evitare che faccia il repeat dell'immagine... c'è modo di evitarlo?
ciao e grazie
daniele

codice:

onclick="document.getElementById('ID_OGGETTO').style.background='url(nuovaimm.gif) no-repeat';"

**danielepennati** · 28-03-2006, 18:49

grazie...
non era difficile...

potevo anche arrivarci da me...
ciao
daniele

Discussione: Cambiare immagine di sfondo con css

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare immagine di sfondo con css

Permessi di invio