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!!
 
Vale2

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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.
 
Vale2

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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
 
max_400

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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-
 
Vale2

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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.
 
max_400

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
 
Vale2

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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:
 
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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
 
max_400

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
 
Vale2

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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.
 
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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
 
max_400

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
Autore Titolo Forum Risposte Data
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
A Immagine decentrata con sfondo trasparente Photoshop 0
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
G Modifica immagine di sfondo attraverso un bottone PHP 18
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
V javascript - cambiare immagine di sfondo di un div Javascript 3
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
Zea problemi duplicazione immagine di sfondo HTML e CSS 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
P link su immagine di sfondo HTML e CSS 1
L fpdf .. immagine di sfondo e posizionamento testo PHP 1
G Inserire un immagine di sfondo con un disegno base Photoshop 1
L Bottone con immagine di sfondo HTML e CSS 2
P Immagine Sfondo body non completa HTML e CSS 6
F Immagine che si autoingrandisce dallo sfondo Flash 2
voldemort Immagine di sfondo fissa con CSS HTML e CSS 1
G Realizzare un'immagine con sfondo trasparente con Photoshop Photoshop 3
mkrapfen immagine sfondo sito a tutto schermo Javascript 2
L problemi con l'immagine di sfondo da ripetere Webdesign e Grafica 1
V Stampare dati Form su immagine di sfondo PHP 8
M [Firefox/CSS] Problema immagine di sfondo centrata HTML e CSS 1
Angel0 Rotazione immagine di sfondo con css HTML e CSS 3
emanuelevt immagine di sfondo del div HTML e CSS 5
P Immagine sullo sfondo dietro il centro del sito HTML e CSS 4
A script apertura immagine su sfondo nero Webdesign e Grafica 1
T Immagine di sfondo menu applet Javascript 10
Ailinen Immagine sfondo sito Webdesign e Grafica 15
C creare sfocatura su una porzione dell'immagine di sfondo Flash 0
B Adattare tabella a immagine di sfondo con Dreamweaver Cs3 Webdesign e Grafica 3
I Immagine di sfondo tabella - NVU Webdesign e Grafica 9
S Immagine sfondo Flash 3
C Immagine di sfondo, ad un bordo. HTML e CSS 0
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
H Immagine di sfondo a tabella: centrata e non affiancata Webdesign e Grafica 6
D Immagine di sfondo [era: help] HTML e CSS 11
I Immagine in sfondo di una classe che non compare. HTML e CSS 2
S fondere immagine con sfondo Webdesign e Grafica 3
J dreamweaver sfondo immagine Webdesign e Grafica 4
S Immagine di sfondo che cambia ad ogni accesso Javascript 2
J frontpage: mettere un'immagine di sfondo HTML e CSS 2
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2

Discussioni simili

Alto Basso