Sfondo secondo risoluzione

**Fr3d3R!K** · 30-07-2006, 19:07

Ciao a tutti gli utenti di html.it mi chiamo Federico e sono alle prese con uno spinosissimo problema (alla quale neanche il motore di ricerca interna di questo forum ha dato risposta

):
il mio problema è che ho 3 immagini di 3 risoluzioni diverse (800x600 1024x768 e 1280x1024) che vorrei impostare come sfondo a seconda della risoluzione rilevata da javascript...il mio codice (all'interno dell' <head>) era (anzi fino ad ora è)

codice:

<script language="JavaScript">
var larghezza=window.screen.width;
var altezza=window.screen.height;
if((larghezza==800)&&(altezza==600))
{
	document.body.style.backgroundImage='url(rosa800x600.jpg)';
}
else
{
	if((larghezza==1024)&&(altezza==768))
	{
		document.body.style.backgroundImage='url(rosa1024x768.jpg)';
	}
	else
	{
		if(larghezza==1280)&&(altezza==1024))
		{
			document.body.style.backgroundImage = 'url(rosa1280x1024.jpg)';
		}
}
</script>

ma appena l'ho provato non fa niente...sfondo bianco come se non avessi messo nulla...stesso risultato se metto lo script nel body...avrei anche usato una funzione per l'evento onload del body anche ma non so:
• come tornare l'immagine al body e fargli capire che deve impostare quella...
potreste aiutarmi? grazie in anticipo!
Federico

**SuperJepy** · 30-07-2006, 19:25

Ciao, io sono alle prese con un problema simile ma il tuo, rispetto al mio, mi sembra più abbordabile. Tanto per cominciare prova ad inserire la proprietà tags in questo modo:

document.tags .body.style.backgroundImage='url(rosa1024x768.jpg) ';

Non sono sicuro che risolvi il problema perché non ho provato se funziona ma in base ai manuali che sto studiando dovrebbe andare bene.

Veniamo al mio problema: io devo estendere un'immagine di sfondo in base alla grandezza della finestra del browser (o meglio, alla risoluzione dello schermo). Prendiamo in esame la cosa più semplice, cioè la risoluzione perché essa non può cambiare, mentre la grandezza della finestra del browser si.
Se ho una risoluzione di 800x600 e voglio estendere l'immagine a tutta l'area del documento, le dimensioni del documento non saranno di 800x600 perché in verticale dovrei sottrarre l'altezza delle barre degli strumenti, ecc.; e in orizzontale dovrei sottrarre le barre di scorrimento laterali, e così via.
La mia domanda è: come faccio a conoscere la larghezza e l'altezza del documento e ad applicare queste dimensioni ad un'immagine?
Grazie

**Fr3d3R!K** · 31-07-2006, 11:06

non funziona...

**pierofix** · 31-07-2006, 11:18

Il primo problema che noto è che molto probabilmente una finestra non ha esattamente le dimensioni, ad esempio, di 800×600. Forse qualcosa di meno.

Potresti pertanto usare un controllo del genere:

codice:

if ( larghezza <= 800 && altezza <= 600 )

Poi forse sarebbe da dare una sistemata alla sintassi e usarne una più standard, per il resto dello script.

**Fr3d3R!K** · 31-07-2006, 11:36

io come risoluzione ho 1280x1024 e non va ne su iexplore ne su firefox....cmq ora provo come dici tu..
edit:
ho corretto lo script così

codice:

<script language="JavaScript">
var larghezza=window.screen.width;
var altezza=window.screen.height;
if((larghezza<=800)&&(altezza<=600))
{
	document.body.style.backgroundImage='url(rosa800x600.jpg)';
}
else
{
	if((larghezza==1024)&&(altezza==768))
	{
		document.body.style.backgroundImage='url(rosa1024x768.jpg)';
	}
	else
	{
		if(larghezza>=1280)&&(altezza>=1024))
		{
			document.body.style.backgroundImage='url(rosa1280x1024.jpg)';
		}
		else
		{
			document.write("risoluzione non standard!");
		}
}
</script>

e non ho ottenuto nessun risultato non scrive nemmeno "risoluzione non standard!"...come faccio????

**Fr3d3R!K** · 31-07-2006, 11:50

un amico di un altro forum mi ha saputo aiutare grazie lo stesso!!!

**pierofix** · 31-07-2006, 12:10

Prova una cosa del genere:

codice:

<script type="text/javascript"><!--
window.onload = function()
{
   var larghezza = window.screen.width
   var pagina = document.getElementsByTagName('body').item(0)
   
   if ( larghezza <= 800 )
   {
      pagina.className = 'sfondo800'
   }
   else if ( larghezza > 800 && larghezza <= 1024 )
   {
      pagina.className = 'sfondo1024'
   }
   else
   {
      pagina.className = 'sfondo1280'
   }
}
//--></script>

Nel CSS, poi:

codice:

body.sfondo800
{
   background-image:url('rosa800x600.jpg')
}
/* e via dicendo */

Edit: Ah, ops: non avevo letto. Bè, visto che hai sollevato la questione, potresti essere così gentile da postare la soluzione anche qua, o perlomeno darci il link alla discussione sull'altro forum?

**Fr3d3R!K** · 31-07-2006, 15:57

ah scusami cmq ecco la soluzione perfettamente funzionante:

codice:

<head>
<script type="text/javascript">
<!--
function setBack ()
{
    var larghezza = window.screen.width;
    var altezza = window.screen.height;
    if (larghezza == 800 && altezza == 600)
        document.body.style.backgroundImage = 'url("800x600.jpg")';
    else if (larghezza == 1024 && altezza == 768)
        document.body.style.backgroundImage = 'url("1024x768.jpg")';
    else if (larghezza == 1280 && altezza == 1024)
        document.body.style.backgroundImage = 'url("1280x1024.jpg")';
}
//-->
</script>
</head>
<body onload="setBack()">
</body>

grazie anche per quella soluzione comunque e per il tempo usato per aiutarmi!!!

**pierofix** · 31-07-2006, 17:08

Ok.

Comunque, per fare un confronto tra le soluzioni, quella del tuo amico implica il dover andare ad inquinare il markup con l'evento onload applicato all'elemento body. Oltretutto, si utilizza l'oggetto style di javascript, quando la stessa cosa può ottenere mediante i fogli di stile.

La soluzione che ti propongo io, invece, tiene separato lo script dalla struttura di markup (lasciandola più pulita) e sfrutta a dovere gli strumenti che abbiamo a disposizione; per gestire la grafica, infatti, dobbiamo rifarci ai CSS.

Comunque, vedi tu quale meglio si adatta alle tue esigenze.

Discussione: Sfondo secondo risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo secondo risoluzione

Permessi di invio