Cambiare in colpo unico sfondo Body e due immagini

**LainX** · 14-10-2008, 11:33

Ciao a tutti avrei un piccolo problema.
Premetto che non sono pratico di Javascript.

Ho bisogno di cambiare in un colpo unico lo sfondo di background del body, un'immagine che è impostata come logo e un'altra immagine che crea l'effetto sfumatura.

Il mio sito è il seguente per farvi un'idea : http://zenofjapan.ilbello.com

Come potete vedere nel logo ci sono quattro quadrati che vanno a caricare 4 differenti logo, colori sfondi e sfumatorue.

Per il background ho trovato questo e funziona ma manca il resto :

<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#eacb00';
backColor[1] = '#da8544';
backColor[2] = '#10537d';
backColor[3] = '#78ad3b';
function changeBG(whichColor)
{
document.bgColor = backColor[whichColor];
}
</script>

<div class="square">
<div class="s1">[img]image/square/orange.jpg[/img]</div>
<div class="s2">[img]image/square/brown.jpg[/img]</div>
<div class="s3">[img]image/square/blue.jpg[/img]</div>
<div class="s4">[img]image/square/green.jpg[/img]</div>
</div>

Potete fornirmi qualche indicazione in merito ?!

**dav22** · 14-10-2008, 11:45

ma io farei qualcosa del tipo..

codice:

<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#eacb00';
backColor[1] = '#da8544';
backColor[2] = '#10537d';
backColor[3] = '#78ad3b';

var logos = new Array();
logos[0] = 'image/logo_brown.jpg';
logos[1] = 'image/logo_yellow.jpg';
logos[2] = 'image/logo_blue.jpg';
logos[3] = 'image/logo_red.jpg';

function changeBG(index)
{
document.bgColor = backColor[index];

var logo = document.getElementById('yellow');
if (logo) logo.src = logos[index];
}
</script>

ma non l'ho provato quindi ... ehm
ciao

**LainX** · 14-10-2008, 11:55

Ciao !

Grazie mille per la dritta.
Funziona e anche a dovere

!
Ora devo solo cambiare la parte laterale.

Grazie mille !

**dav22** · 14-10-2008, 12:01

Figurati sono contento che funzioni al primo colpo

per la parte laterale se non hai esigenze particolari puoi fare lo stesso, tra l'altro il layout che stai facendo mi piace.. complimenti

Ciao

**LainX** · 14-10-2008, 12:29

Ho fatto come mi hai consigliato te :

<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#eacb00';
backColor[1] = '#da8544';
backColor[2] = '#10537d';
backColor[3] = '#78ad3b';
var logos = new Array();
logos[0] = 'image/logo_yellow.jpg';
logos[1] = 'image/logo_brown.jpg';
logos[2] = 'image/logo_blue.jpg';
logos[3] = 'image/logo_red.jpg';
var shadows = new Array();
shadows[0] = 'image/shadow_yellow.jpg';
shadows[1] = 'image/shadow_brown.jpg';
shadows[2] = 'image/shadow_blue.jpg';
shadows[3] = 'image/shadow_red.jpg';
function changeBG(index)
{
document.bgColor = backColor[index];
var logo = document.getElementById('logo');
if (logo) logo.src = logos[index];
var shadow = document.getElementById('shadow');
if (shadow) shadow.src = shadows[index];
}
</script>

Ma in questo caso, l'immagine non si ripete sull'asse X fino alla fine dello schermo

**dav22** · 14-10-2008, 12:35

puoi darmi il codice html o ancor meglio metterlo online?

ciao

**LainX** · 14-10-2008, 12:56

Caricato proprio ora.

**dav22** · 14-10-2008, 14:20

ottimo, eccoti come farei io..

codice:

 

<html> 
<head> 
	<title> Zen of Japan </title> 
	<link rel="stylesheet" type="text/css" href="http://zenofjapan.ilbello.com/style/style.css"> 
	
	<script type="text/javascript" language="JavaScript">
	
		var backColor = new Array();
		backColor[0] = '#eacb00';
		backColor[1] = '#da8544';
		backColor[2] = '#10537d';
		backColor[3] = '#78ad3b';
		
		var logos = new Array();
		logos[0] = 'http://zenofjapan.ilbello.com/image/logo_yellow.jpg';
		logos[1] = 'http://zenofjapan.ilbello.com/image/logo_brown.jpg';
		logos[2] = 'http://zenofjapan.ilbello.com/image/logo_blue.jpg';
		logos[3] = 'http://zenofjapan.ilbello.com/image/logo_red.jpg';
		
		var shadows = new Array();
		shadows[0] = 'http://zenofjapan.ilbello.com/image/shadow_yellow.jpg';
		shadows[1] = 'http://zenofjapan.ilbello.com/image/shadow_brown.jpg';
		shadows[2] = 'http://zenofjapan.ilbello.com/image/shadow_blue.jpg';
		shadows[3] = 'http://zenofjapan.ilbello.com/image/shadow_red.jpg';
		
		function changeBG(index)
		{
			document.body.style.background = backColor[index]+' url(\''+shadows[index]+'\') repeat-x 0 0';
			
			var logo = document.getElementById('logo');
			if (logo) logo.src = logos[index];
			//var shadow = document.getElementById('shadow');
			//if (shadow) shadow.src = shadows[index];
		}
	</script> 
 
	
</head> 
<body onload="changeBG(0);return false;" style="margin:0;padding:0;border:0;">
	 
	<div class="container"> 
		<div class="header"> 
			 
			<div class="square"> 
				<div class="s1"></div> 
				<div class="s2"></div> 
				<div class="s3"></div> 
				<div class="s4"></div> 
			</div> 
		</div> 
		<div class="box_menu"> 
			<div class="intro Stile1"> 
			  <div align="left">Questo è una prova</div> 
			</div> 
		  <div class="menu Stile1"> 
		    <div align="center">Home | News | Viaggi | Forum | Blog | Hobby | Storia | Gallery | Sport | Musica | Contact Us</div> 
		  </div> 
		  <div class="submenu"></div> 
		</div> 
		<div class="site"> 
			<div class="white_box"> 
				<div class="hd_box"></div> 
				<div class="in_box"></div> 
				<div class="foot_box"></div> 
			</div> 
		</div> 
</body> 
</html>

ciao

**LainX** · 14-10-2008, 14:25

Ho provato quello che mi hai postato, ma ora non funziona nessuna delle 3

**dav22** · 14-10-2008, 14:38

mmm a me funziona, considera che ho aggiunto ovunque http://zenofjapan.ilbello.com/ per non dovermi scaricare le immagini / css e ricostruirmi le cartelle.. e sui metodi onMouseOver

ho tolto javascript: e aggiunto return false;

io ho provato con ff, ie e chrome. tu cosa usi come browser? ma sia localmente che sul server non funziona?

edit: ma ti da qualche errore se usi firefox e apri la console degli errori?

Discussione: Cambiare in colpo unico sfondo Body e due immagini

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare in colpo unico sfondo Body e due immagini

Permessi di invio