immagine sfondo casuale

A

alexesprit

Nuovo Utente
2 Feb 2009
6
0
0
Questo codice mi permette di cambiare l'immagine di sfondo della pagina ogni tot secondi:

Codice: 
<script type="text/javascript">

var bgImages = new Array();
bgImages.push("1.jpg");
bgImages.push("2.jpg");
bgImages.push("3.jpg");
bgImages.push("4.jpg");

function LoadRandomBackground()
{
	var randomImageIndex = Math.floor(Math.random()*bgImages.length)
 	document.body.background  = bgImages[randomImageIndex];
	
}

function StartBackgroundRefreshTimer()
{
	var timer = setInterval('LoadRandomBackground()',4000); // 4 seconds
}

</script>
</head>


<body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()">
</body>

1 - il problema è che l'immagine viene ripetuta mentre a me servirebbe fissa al centro. Cosa dovrei aggiungere o modificare nel codice per far ciò?

2 - si potrebbe fare in modo che l'immagine cambi solo quando viene ricaricata la pagina anzicchè ogni tot secondi?

Grazie mille!!
 
Ciao,

Codice: 
<style type="text/css">
body
{
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
} 
</style>
<script type="text/javascript">
var bgImages = new Array();
bgImages.push("1.jpg");
bgImages.push("2.jpg");
bgImages.push("3.jpg");
bgImages.push("4.jpg");
function LoadRandomBackground(){
var randomImageIndex = Math.floor(Math.random()*bgImages.length)
document.body.background  = bgImages[randomImageIndex];
}
</script>
</head>
<body onload="LoadRandomBackground()">

</body>


Valeria.
 
Ciao,

per impostare la grandezza dell'immagine di background basta aggiungere al css:

background-size:100% 100%;

in percenuale o in pixel 200px 200px

la prima è il width la seconda l'height


Valeria
 
uhm...proprio cosi non mi funziona su Firefox

ma in quest'altro modo

-moz-background-size: 100% 100%;
sotto altri modi per altri browser

questi con il cover ma taglia i contorni

Codice: 
html {
	background: url(images/background.jpg) no-repeat center center fixed;	
-moz-background-size: cover;
  
        -webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

-moz-background-size: cover;
qui è specificato modzilla


ed ecco l'esempio finale
http://max400.netne.net/immagine-causale-schermo-intero-valeria.html

e il codice finale
Codice: 
<style type="text/css">
body
{
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
//background-size:100% 100%;
//-moz-background-size: cover;
-moz-background-size: 100% 100%;

} 
</style>



<script type="text/javascript">

var bgImages = new Array();
bgImages.push("http://max400.netne.net/cop-pausini2692.jpg");
bgImages.push("http://max400.netne.net/portoghese-pau-200x150.jpg");
bgImages.push("http://max400.netne.net/carramba-200.jpg");
bgImages.push("http://max400.netne.net/meloni-pau.jpg");

function LoadRandomBackground()
{
	var randomImageIndex = Math.floor(Math.random()*bgImages.length)
 	document.body.background  = bgImages[randomImageIndex];
	
}

/*
function StartBackgroundRefreshTimer()
{
	var timer = setInterval('LoadRandomBackground()',4000); // 4 seconds
}

StartBackgroundRefreshTimer()"
*/


</script>
</head>


<body onload="LoadRandomBackground();">
</body>

ho messo sotto commento lo script del timer e l'ho eliminato dal body
e ho aggiunto i prefissi per altri browser -moz -webkit- -o-
 
Ciao,

non si mettono percentuali per ridimensionare un'immgine con -moz-background-size:

o cover o contain , con cover hai l'immagine che riempie lo sfondo ancge se ridimensioni la pagina, con contain no.

Nei css i commenti /* */ come per un blocco di codice in javascript // per una sola linea solo js.

Il background-size è supportato da Msie 9.0+ Firefox 4.0+ Safari 5.0+ Crome 3.0+ Opera9.5+

La proprietà può assumere quattro tipi di valori,

background-size: 50% 50%;
background-size: 200px 50px;
background-size: cover;
background-size: contain;

Dimensione in percentuale, in misura e le parole chiave cover e contain.

L'esempio postato fatto solo per FF non funziona, uso FF 9 e WinXp pro spk3, mentre con le percentuali e background-size: si.

Il problema è sempre il solito quandi si scrive codice, renderlo il più possibile crossbrowser.

Ogni browser ha il suo modo di interpretare i comandi e alcuni suno prioritari, funzionano solo con quello.

Saluti :byebye: Valeria.
 
Ehm... a me non mi risulta...

Vale2 ha scritto:
Ciao,

non si mettono percentuali per ridimensionare un'immgine con -moz-background-size:
o cover o contain , con cover hai l'immagine che riempie lo sfondo ancge se ridimensioni la pagina, con contain no.
Clicca per allargare...

ho fatto una prova e funziona:
-moz-background-size: 50% 100%;
l'immagine si è ristretta orizzontalmente...
http://max400.netne.net/immagine-causale-schermo-intero-valeria_.html


invece cosi non va
background-size: 50% 100%;
l'immagine ritorna piccola... e tutta la riga viene ignorata

il prefisso -moz- è necessario e le percentuali vengono utilizzate
per il contain l'immagine prende tutta l'altezza ma lascia i margini destra e sinistra in bianco.
cover non mi piace perchè non vedo i contorni.. la cornice...

Vale2 ha scritto:
Nei css i commenti /* */ come per un blocco di codice in javascript // per una sola linea solo js.
Clicca per allargare...
Vuoi dire che nei css non si usano gli asterischi? /*

Vale2 ha scritto:
Il background-size è supportato da Msie 9.0+ Firefox 4.0+ Safari 5.0+ Crome 3.0+ Opera9.5+
Clicca per allargare...
io uso Firefox 3.6 - e funziona soltanto se metto il prefisso -moz-

Vale2 ha scritto:
Il problema è sempre il solito quandi si scrive codice, renderlo il più possibile crossbrowser.
Clicca per allargare...
Perfetto! quindi sarebbe opportuno mettere "tutte le righe background-size"
per ridimensionare le foto a tutto schermo e renderli funzionanti per tutti gli utenti
indipendentemente da qualsiasi browser utilizzino.

au revoir
by Max_400
 
max_400 ha scritto:
ho fatto una prova e funziona:
-moz-background-size: 50% 100%;
l'immagine si è ristretta orizzontalmente...
http://max400.netne.net/immagine-causale-schermo-intero-valeria_.html


invece cosi non va
background-size: 50% 100%;
l'immagine ritorna piccola... e tutta la riga viene ignorata

il prefisso -moz- è necessario e le percentuali vengono utilizzate
per il contain l'immagine prende tutta l'altezza ma lascia i margini destra e sinistra in bianco.
cover non mi piace perchè non vedo i contorni.. la cornice...


Vuoi dire che nei css non si usano gli asterischi? /*


io uso Firefox 3.6 - e funziona soltanto se metto il prefisso -moz-


Perfetto! quindi sarebbe opportuno mettere "tutte le righe background-size"
per ridimensionare le foto a tutto schermo e renderli funzionanti per tutti gli utenti
indipendentemente da qualsiasi browser utilizzino.

au revoir
by Max_400
Clicca per allargare...

Ciao Max_400

il prefisso -moz- funziona solo con versioni di FF inferiori alla 4.0

mentre background-size: solo con la 9.0+ di Msie e FF dalla 4 in su come scritto sotto:

Il background-size è supportato da Msie 9.0+ Firefox 4.0+ Safari 5.0+ Crome 3.0+ Opera9.5+

Per questo io vedo correttamente con FF avendo la 9 mentre no con Msie, ho la 8

Questo è lo screenshot fatto con FF

ff.jpg


Questo con Msie

ms.jpg

Vuoi dire che nei css non si usano gli asterischi? /*

si usano ma no //

nel css hai due commenti

//background-size:100% 100%;
//-moz-background-size: cover;

da errore

/*
background-size:100% 100%;
-moz-background-size: cover;
*/

/*background-size:100% 100%;*/
/*-moz-background-size: cover;*/

Vista la problematica con i vari Browser, la soluzione è quella di adottare uno script che simula il background ma usa un normale tag <img per rendere l'utilizzo di immagini a schermo intero non ripetute a tutte le risoluzioni e compatibile con tutti i Browser.

au revoir
Valeria :byebye:
 
ciao
perchè non usate php al posto dell'ambaradan di js (che se disattivato non funzia)?

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<?php
$path="cartella_sfondi/";
//posso mettere/togliere in cartella_sfondi quante immagini voglio (almeno una)
//quindi non devo preuccuparmi di modificare lo script se aggiungo/tolgo immagini
$imm_sfondo=glob($path.'*.jpg');
//glob crea un array $imm_sfondo[0] => pinco.jpg $imm_sfondo[1] => pallo.jpg ecc....
//concatenando l'array posso estrarre volendo le .png e/o .gif
$estrai=rand(0,count($imm_sfondo)-1);//estrae un numero casuale da 0 a quante sono le foto -1 (l'array parte da zero)
//$imm_sfondo[$estrai] conterrà il nome dell'immagine estratta casualmente
$imm_casuale=$path.$imm_sfondo[$estrai];
echo <<< CSS
<style type="text/css">
body{
background-image:url(file:$imm_casuale)
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
//background-size:100% 100%;
//-moz-background-size: cover;
-moz-background-size: 100% 100%;
} 
</style>
CSS;
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
</head>
<body>
<!-- bla...bla...bla... -->
</body>
</html>
ogni volta che ricarico/aggiorno la pagina avrò un'immagine casuale.
se si tolgono i commenti si può notare il numero di righe di codice php rispetto a js
 
Caro Borghetto... a me non funziona!

mi da pagina bianca...sei sicuro che non ci siano errori?

intanto ne ho provato un altro, ho messo tutto dentro la stessa cartella
esempio
http://max400scuola.altervista.org/aaa/a-php/foto/foto-causali2.php

PHP: 
<?php
//definiamo il percorso alla cartella sorgente
$path="./";

//stabiliamo i formati riconoscibili
$formati=array('gif','jpg','bmp');

//apriamo la cartella che contiene le immagini
$open = opendir($path);

//leggiamo tutte le immagini con un ciclo
  $img=array();
  while(false !== ($f=readdir($open))) { 
    for($i=0;$i<count($formati);$i++){
       $formato=substr($f,(strlen($f)-3),strlen($f));
         if(in_array($formato,$formati)){
          $img[]=$f;
        }
     }
  }
  
  //mostriamo l'immagine casuale 
  if(count($img)==0);
  {
  $info = rand(0,(count($img)-1));
  
  }

$sfondo=$path.$img[$info];
?>
<style>
body{
background-image:url('<? echo $sfondo; ?>');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
-moz-background-size: 100% 100%;
} 
</style>


In php è senza dubbio meglio per il semplice motivo
che non c'è bisogno di mettere il nome delle foto
nel mio script basta aggiungere l'estensioni delle varie foto
Però se lo spazio web dell'utente supporta php... eh eh
 
Ciao,

prova questo trovato in rete, compatibilte con tutti i Browser.

Immagine random al refresh.
Codice: 
<script src="fixedbackground.js" type="text/javascript"></script> 

<script type="text/javascript">
img = new Array()
ran=Math.floor(4 * Math.random());
img[0]= '1.jpg'; 
img[1]= '2.jpg';
img[2]= '3.jpg'; 
img[3]= '4.jpg'; 
</script>

</head>

<body onload="fixedBackground(img[ran])">

il file fixedbackground.js

Codice: 
var backgroundset = false;
function fixedBackground(url) {
if(!backgroundset) {
document.body.style.overflow = 'hidden';
document.body.style.padding = '0px';
document.body.style.margin = '0px';
var overlay = document.createElement('DIV');
overlay.style.position = 'absolute';
overlay.style.top = '0px';
overlay.style.left = '0px';
overlay.style.height = '100%';
overlay.style.width = '100%';
overlay.style.overflow = 'auto';
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML	= '<img id="background" height="100%" width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0; top: 0; z-index: 0">';
document.body.appendChild(overlay);
backgroundset = true;
}
else
background.src=url;
}

per una sola immagine

</head>

<body onload="fixedBackground('nome_immagine.ext)">

senza onload con richiamo da script

Codice: 
<script>
fixedBackground('nome_immagine.ext');
</script>

Se trovo l'autore metto i diritti nel file fixedbackground.js


Valeria.
 
ciao
che funzi sono sicuro (vedi mia "foto d'autore").
il difetto di glob è che (es.)
$imm=glob('*.jpg');
se le immagin sono invece .JPG non le legge quindi bisogna fare (a parte la cartella)
PHP: 
<?php
$imm = array_merge(glob('*.jpg'), glob('*.JPG'));
//se voglio anche le .png e le .gif
$imm= array_merge($imm, glob('*.png'));
$imm= array_merge($imm, glob('*.gif'));
//oppure semplificando
$imm =  array_merge(array_merge(array_merge(glob('*.jpg'), glob('*.JPG')), glob('*.png')), glob('*.gif'));
var_dump($imm);
echo "<br>";
foreach($imm as $valore){
	echo "<img src=\"$valore\" width=\"100%\" height=\"100%\"><br>";
}
?>
glob è comunque più rapido del tuo sistema con opendir
pero attenzione stiamo andando OT (se se ne accorge alex sono c...i amari)

p.s.
PHP 4 >= 4.3.0, PHP 5
 
Caro Borghetto...

Caro Borghetto... questo è il risultato del tuo script
http://max400scuola.altervista.org/aaa/a-php/foto/immag-casuali-di-borghetto.php

ma la funzione random dove czz è?

Comunque hai ragione stiamo andando troppo OT anche perchè questa è la sez javascript e non php
onorevole Gatto chiudiamo con php

@Valeria: (il gatto femmina) mi segno il tuo script in una cartella "per tutti i browser"
adesso aspettiamo che sia l'utente che ha aperto questo discussione dev'essere lui a scegliere.

@Borghetto: La prossima volta caro Borghetto e meglio che non metti script php in questa sezione
(anche se personalmente preferisco di più il tuo script in php per evitare di scrivere i nomi delle foto *.*).
Per altri commenti mi mandi un MP.
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

F
Aiuto! cambio immagine di sfondo al cambio pagina
Risposte
2
Visite
2K
HTML e CSS
Fabrizio5778
F
gara1
inserire immagine di sfondo in canvas
Risposte
0
Visite
2K
Javascript
gara1
gara1
A
Immagine decentrata con sfondo trasparente
Risposte
0
Visite
1K
Photoshop
Agamennone
A
R
Non riesco a rinnovare l'immagine di sfondo
Risposte
1
Visite
1K
PHP
MarcoGrazia
MarcoGrazia
R
  • Bloccata
Non riesco a cambiare l'immagine di sfondo
Risposte
4
Visite
2K
PHP
Roberto_V
R
G
Modifica immagine di sfondo attraverso un bottone
Risposte
18
Visite
3K
PHP
Max 1
Max 1
L
  • Bloccata
[HTML] problema sfondo tutto schermo con immagine
Risposte
1
Visite
4K
HTML e CSS
Max 1
Max 1
felino
[Wordpress] Immagine di sfondo (sotto il template)
Risposte
8
Visite
2K
WordPress
Jonn
Jonn
A
[Javascript] Impostare immagine sfondo da checkbox, sito web
Risposte
1
Visite
2K
Javascript
Sevenjeak
Sevenjeak
V
javascript - cambiare immagine di sfondo di un div
Risposte
3
Visite
5K
Javascript
criric
criric
R
[Flash] Animare un testo con un' immagine sullo sfondo
Risposte
7
Visite
2K
Windows e Software
Max 1
Max 1
Papalla
CSS3 - immagine di sfondo con elementi che appaiono col mouse hover
Risposte
4
Visite
3K
HTML e CSS
Papalla
Papalla
Fuego2806
  • Bloccata
Stampare dati Form su immagine di sfondo con html
Risposte
1
Visite
1K
HTML e CSS
Max 1
Max 1
Fuego2806
[PHP] Stampare dati Form su immagine di sfondo con html
Risposte
70
Visite
10K
PHP
Fuego2806
Fuego2806
Gregia
Immagine con testo affianco (sfondo colore diverso)
Risposte
8
Visite
4K
HTML e CSS
Max 1
Max 1
Zea
problemi duplicazione immagine di sfondo
Risposte
3
Visite
2K
HTML e CSS
Zea
Zea
M
problema immagine di sfondo e risoluzione schermo
Risposte
1
Visite
2K
HTML e CSS
criric
criric
R
Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio?
Risposte
1
Visite
2K
Javascript
ruttan
R
P
link su immagine di sfondo
Risposte
1
Visite
1K
HTML e CSS
ByProgrammer
B
L
fpdf .. immagine di sfondo e posizionamento testo
Risposte
1
Visite
4K
PHP
luigi777
L
Alto Basso