[XHTML-Javascript] Problemi di Background

Ciaba · 06-04-2011, 11:13

Ho questo codice per il cambio immagine a seconda dell'ora rilevata sul browser del visitatore. Il problema è che lavora su "background" tramite "onload"(e lo fa anche bene sia nel body che in html), ma dato che a "background" devo assegnare un'immagine tx2r di pochi kb ripetuta per l'intera pagina devo trovare una nuova collocazione per le immagini e lo script. Avevo provato un div(e concettualmente sarebbe stato perfetto per il mio scopo),ma "onload" non è compatibile con questo tag. Ho letto che l'unica alternativa sarebbe il tag "img" ma non ho assulutamente idea di come modificare lo script in questo senso. Qualche idea? Esistono metodi alternativi? Non chiedo uno script bello e pronto ma un'indicazione sarebbe molto gradita,...spero di essermi spiegato bene.

function cambia(){
var d=new Date();
var time=d.getHours();
if (time<6){
document.body.background = "notte.svg";
}else if (time<10){
document.body.background = "mattina.svg";
}else if (time<14){
document.body.background = "giorno.svg";
}else if (time<18){
document.body.background = "sera.svg";
}else if (time<23){
document.body.background = "notte.svg";
}

wingman87 · 06-04-2011, 13:42

Quote:

ma dato che a "background" devo assegnare un'immagine tx2r di pochi kb ripetuta per l'intera pagina devo trovare una nuova collocazione per le immagini e lo script.

Non ho capito questa parte, e quindi il problema...

Ciaba · 15-04-2011, 00:37

Scusami il late clamoroso

Allora: lo script che ho lavora a quanto ho capito su background tramite "onload". Ora, "onload" funziona solo per i tags "body" e "img" quindi dovrei capire come fare a modificare lo script per farlo lavorare sul tag "img" dato che nel body non posso mettercelo in quanto vorrei usare un'immagine di background(tx2r). In pratica ora come ora se metto un'immagine di sfondo(background-image), lo script non funziona. Se invece ci metto un colore lo script funziona alla perfezione. Non posso far coesistere le due cose a quanto ho capito, ho provato a spostare l'immagine tx2r in html invece che nel body ma niente stesso identico risultato. Quindi l'unica speranza è riuscire a piazzare le immagini che cambiano in body attraverso il tag img. Spiegazione-cane ma spero possa servire.

alemoppo · 15-04-2011, 12:55

l'onload non puoi metterlo nel <body>?

Altrimenti, potresti usare il "window.onload"...

---

Quote:

dato che nel body non posso mettercelo in quanto vorrei usare un'immagine di background(tx2r).

Scusami ma non ho capito...

Quote:

In pratica ora come ora se metto un'immagine di sfondo(background-image), lo script non funziona. Se invece ci metto un colore lo script funziona alla perfezione.

...strano.. sicuro che non hai fatto errori?

Ciao!

Ciaba · 16-04-2011, 00:30

Grazie alemoppo,....l'onload è perfetto per il body ma non posso mettere 2 immagini in uno stesso posto! Background-image del body mi serve per l'immagine di sfondo(la tx2r ripetuta), e quindi è occupato, le immagini da gestire col javascript quindi le devo piazzare al centro della pagina con img o in un div(almeno a me non viene in mente altro).
No, non ho fatto errori, lo script funziona bene ma è logico che lavorando sul background-image al momento che gli occupo quel "luogo" con un'immagine statica da css, e mettendosi in moto lo script alla fine del caricamento della pagina la precedenza è del css. La riprova è che disabilitando il bacround-image dal css lo script lavora perfettamente.
Il problema è che quello script è scritto per il body appunto e non ho idea di come modificarlo....o meglio non avevo idea. Mi hai dato un suggerimento con quel window.onload e ora provo

.....sto fondendo.

alemoppo · 16-04-2011, 15:52

Scusami, puoi postarmi il sorgente? Perché sinceramente non ho capito cosa vuoi fare:

(ti dico cosa ho capito):
Hai lo sfondo del body che lo vuoi mantenere costante, e modificare solo l'immagine al centro della pagina a seconda dell'ora.

Di quello che ho capito, ti scrivo un esempio:

Codice HTML:

<!doctype html>
<html>
<head>
<title>Prova</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
<style type="text/css">
#immagine
{
	position:absolute;
	height: 100px;
	top:50%;
	margin-top: -50px;
}
BODY
{
	background:url(immagine.jpg);
}
</style>
<script type="application/javascript">
function immagine()
{
	var d=new Date();
	var time=d.getHours();
	if (time<6)
		document.getElementById('immagine').src = "notte.svg";
	else if (time<10)
		document.getElementById('immagine').src = "mattina.svg";
	else if (time<14)
		document.getElementById('immagine').src = "giorno.svg";
	else if (time<18)
		document.getElementById('immagine').src = "sera.svg";
	else if (time<23)
		document.getElementById('immagine').src = "notte.svg";
	else
		document.getElementById('immagine').src = "errore.jpg";

	setTimeout("immagine()", 3600000);	//è inutile, ma non si sa mai: se uno tiene aperto per sbaglio la pagina più di un ora, si aggiorna ^^
}
</script>
</head>
<body onLoad="immagine()">
<img src="default.jpg" id="immagine">
</body>
</html>

...Se invece vuoi farlo aggiornare molto frequentemente, non ti conviene ogni volta sovrascrivere l'immagine, ma è meglio fare prima un controllo:

Codice PHP:


			
//metto [ php ] per dar colore alle righe...
function immagine()
{
    var d=new Date();
    var time=d.getHours();
    if (time<6)
        var url = "notte.svg";
    else if (time<10)
        var url = "mattina.svg";
    else if (time<14)
        var url = "giorno.svg";
    else if (time<18)
        var url = "sera.svg";
    else if (time<23)
        var url = "notte.svg";
    else
        var url = "errore.jpg";

    if(url != document.getElementById('immagine').src)
        document.getElementById('immagine').src = url;

    setTimeout("immagine()", 500);
}

Ciao!

Ciaba · 17-04-2011, 17:13

GENIO!!!!!

Complimenti davvero alemoppo, funziona tutto alla perfezione(testato su 5 browser), ho personalizzato un po' ma la risoluzione dello script è tutta meritatamente tua, grazie.

Ecco qua la versione definitiva:

...il codice xhtml...

Codice HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   
   <head>
      <title>Titolo Della Pagina XHTML</title>
      <meta name="Generator" content="Notepad++" />
      <link rel="stylesheet" type="text/css" href="foglio_style.css" />
      <script type="text/javascript" src="foglio_javascript.js"></script>
   </head>
   
   <body onload="bkground();">
      <img src="default.jpg" id="bkground" />
   </body>

</html>

...e il javascript.

Codice PHP:


			
function bkground()
{
   var d = new Date();
   var h = d.getUTCHours();
   if (h<6){
   document.getElementById('bkground').src = "NWnotte.svg";
   }else if (h<10){
   document.getElementById('bkground').src = "NWmattina.svg";
   }else if (h<14){
   document.getElementById('bkground').src = "NWgiorno.svg";
   }else if (h<18){
   document.getElementById('bkground').src = "NWsera.svg";
   }else if (h<23){
   document.getElementById('bkground').src = "NWnotte.svg";
   }
}

Al "document.getElementById(...)" ero arrivato anch'io nei giorni scorsi(applicandolo a un div

), ma per il resto nebbia, non avrei potuto svilupparla e risolverla così. Mi restano dei dubbi però che spero potrai spiegarmi:
1) la funzione di ".src" nella formula javascript.
2)il nome "default.jpg" come attributo a src nel tag "img".
Cmq, a parte i dubbi....

alemoppo · 17-04-2011, 18:08

Quote:

Originariamente inviato da Ciaba

1) la funzione di ".src" nella formula javascript.

Beh, tramite getElementById() prelevi l'id, poi modifichi l'attributo "src" dell'immagine... {cambiando quindi il percorso della stessa}

Quote:

Originariamente inviato da Ciaba

2)il nome "default.jpg" come attributo a src nel tag "img".

Quando si apre la pagina, prima dell'evento onload, che immagine metti? Quella è quella che si presenta di "default".. ovvero prima dell'evento onload, oppure per un utente che non ha attivato js. Ovviamente "default.jpg" l'ho messo io.. puoi modificarlo mettendo l'immagine che vuoi... Oppure, se vuoi far caricare prima la pagina, credo puoi mettere anche

Codice HTML:

<img src="#" id="bkground" />

..oppure non mettere niente nel scr.. (però non so in questi casi come si comporta il validatore

)

Ciao!

Ciaba · 17-04-2011, 23:26

Ok per il .src,...ottima la notizia su "default.jpg"!!! Pensavo fosse qualcos'altro, ma se è per chi non ha js attivato ottimo, potrei piazzarci un cartello stradale di pericolo generico con invito ad attivare il js sul browser

Scherzo(...forse), cmq non c'ero arrivato ed è segno che devo studiare ancora un bel po'.

Mi metto all'opera vah,...grazie di nuovo.

alemoppo · 17-04-2011, 23:42

Nel mio caso ho "imparato" {->ancora so ben poco

} sbriccando, e seguendo il forum di altervista..

Comunque, non è sbagliato metterci un cartello con scritto "attiva JS" o cose del genere... però ricorda che per quello, c'é il tag <noscript> che è fatto apposta

Ciao!

06-04-2011, 11:13	#1
Ciaba Senior Member Iscritto dal: Nov 2002 Città: Firenze Messaggi: 4027	[XHTML-Javascript] Problemi di Background Ho questo codice per il cambio immagine a seconda dell'ora rilevata sul browser del visitatore. Il problema è che lavora su "background" tramite "onload"(e lo fa anche bene sia nel body che in html), ma dato che a "background" devo assegnare un'immagine tx2r di pochi kb ripetuta per l'intera pagina devo trovare una nuova collocazione per le immagini e lo script. Avevo provato un div(e concettualmente sarebbe stato perfetto per il mio scopo),ma "onload" non è compatibile con questo tag. Ho letto che l'unica alternativa sarebbe il tag "img" ma non ho assulutamente idea di come modificare lo script in questo senso. Qualche idea? Esistono metodi alternativi? Non chiedo uno script bello e pronto ma un'indicazione sarebbe molto gradita,...spero di essermi spiegato bene. function cambia(){ var d=new Date(); var time=d.getHours(); if (time<6){ document.body.background = "notte.svg"; }else if (time<10){ document.body.background = "mattina.svg"; }else if (time<14){ document.body.background = "giorno.svg"; }else if (time<18){ document.body.background = "sera.svg"; }else if (time<23){ document.body.background = "notte.svg"; } __________________ I soliti case ti hanno stancato? Passa all'UnCase Listen With Headphones

15-04-2011, 00:37	#3
Ciaba Senior Member Iscritto dal: Nov 2002 Città: Firenze Messaggi: 4027	Scusami il late clamoroso Allora: lo script che ho lavora a quanto ho capito su background tramite "onload". Ora, "onload" funziona solo per i tags "body" e "img" quindi dovrei capire come fare a modificare lo script per farlo lavorare sul tag "img" dato che nel body non posso mettercelo in quanto vorrei usare un'immagine di background(tx2r). In pratica ora come ora se metto un'immagine di sfondo(background-image), lo script non funziona. Se invece ci metto un colore lo script funziona alla perfezione. Non posso far coesistere le due cose a quanto ho capito, ho provato a spostare l'immagine tx2r in html invece che nel body ma niente stesso identico risultato. Quindi l'unica speranza è riuscire a piazzare le immagini che cambiano in body attraverso il tag img. Spiegazione-cane ma spero possa servire. __________________ I soliti case ti hanno stancato? Passa all'UnCase Listen With Headphones Ultima modifica di Ciaba : 15-04-2011 alle 00:43.

16-04-2011, 00:30	#5
Ciaba Senior Member Iscritto dal: Nov 2002 Città: Firenze Messaggi: 4027	Grazie alemoppo,....l'onload è perfetto per il body ma non posso mettere 2 immagini in uno stesso posto! Background-image del body mi serve per l'immagine di sfondo(la tx2r ripetuta), e quindi è occupato, le immagini da gestire col javascript quindi le devo piazzare al centro della pagina con img o in un div(almeno a me non viene in mente altro). No, non ho fatto errori, lo script funziona bene ma è logico che lavorando sul background-image al momento che gli occupo quel "luogo" con un'immagine statica da css, e mettendosi in moto lo script alla fine del caricamento della pagina la precedenza è del css. La riprova è che disabilitando il bacround-image dal css lo script lavora perfettamente. Il problema è che quello script è scritto per il body appunto e non ho idea di come modificarlo....o meglio non avevo idea. Mi hai dato un suggerimento con quel window.onload e ora provo .....sto fondendo. __________________ I soliti case ti hanno stancato? Passa all'UnCase Listen With Headphones Ultima modifica di Ciaba : 16-04-2011 alle 00:36.

16-04-2011, 15:52	#6
alemoppo Member Iscritto dal: Apr 2010 Messaggi: 163	Scusami, puoi postarmi il sorgente? Perché sinceramente non ho capito cosa vuoi fare: (ti dico cosa ho capito): Hai lo sfondo del body che lo vuoi mantenere costante, e modificare solo l'immagine al centro della pagina a seconda dell'ora. Di quello che ho capito, ti scrivo un esempio: Codice HTML: <!doctype html> <html> <head> <title>Prova</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style type="text/css"> #immagine { position:absolute; height: 100px; top:50%; margin-top: -50px; } BODY { background:url(immagine.jpg); } </style> <script type="application/javascript"> function immagine() { var d=new Date(); var time=d.getHours(); if (time<6) document.getElementById('immagine').src = "notte.svg"; else if (time<10) document.getElementById('immagine').src = "mattina.svg"; else if (time<14) document.getElementById('immagine').src = "giorno.svg"; else if (time<18) document.getElementById('immagine').src = "sera.svg"; else if (time<23) document.getElementById('immagine').src = "notte.svg"; else document.getElementById('immagine').src = "errore.jpg"; setTimeout("immagine()", 3600000); //è inutile, ma non si sa mai: se uno tiene aperto per sbaglio la pagina più di un ora, si aggiorna ^^ } </script> </head> <body onLoad="immagine()"> <img src="default.jpg" id="immagine"> </body> </html> ...Se invece vuoi farlo aggiornare molto frequentemente, non ti conviene ogni volta sovrascrivere l'immagine, ma è meglio fare prima un controllo: Codice PHP: //metto [ php ] per dar colore alle righe... function immagine() { var d=new Date(); var time=d.getHours(); if (time<6) var url = "notte.svg"; else if (time<10) var url = "mattina.svg"; else if (time<14) var url = "giorno.svg"; else if (time<18) var url = "sera.svg"; else if (time<23) var url = "notte.svg"; else var url = "errore.jpg"; if(url != document.getElementById('immagine').src) document.getElementById('immagine').src = url; setTimeout("immagine()", 500); } Ciao! __________________ MSI B550-A PRO\|Ryzen™ 5 3600\|Freezer 13 PRO\|RX 6600\|CORSAIR CX600\|Crucial P3 Plus 1TB\|BL2K8G32C16U4B 3200 MHz\|Q27G2G4 Ultima modifica di alemoppo : 17-04-2011 alle 00:45.

17-04-2011, 17:13	#7
Ciaba Senior Member Iscritto dal: Nov 2002 Città: Firenze Messaggi: 4027	GENIO!!!!! Complimenti davvero alemoppo, funziona tutto alla perfezione(testato su 5 browser), ho personalizzato un po' ma la risoluzione dello script è tutta meritatamente tua, grazie. Ecco qua la versione definitiva: ...il codice xhtml... Codice HTML: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Titolo Della Pagina XHTML</title> <meta name="Generator" content="Notepad++" /> <link rel="stylesheet" type="text/css" href="foglio_style.css" /> <script type="text/javascript" src="foglio_javascript.js"></script> </head> <body onload="bkground();"> <img src="default.jpg" id="bkground" /> </body> </html> ...e il javascript. Codice PHP: function bkground() { var d = new Date(); var h = d.getUTCHours(); if (h<6){ document.getElementById('bkground').src = "NWnotte.svg"; }else if (h<10){ document.getElementById('bkground').src = "NWmattina.svg"; }else if (h<14){ document.getElementById('bkground').src = "NWgiorno.svg"; }else if (h<18){ document.getElementById('bkground').src = "NWsera.svg"; }else if (h<23){ document.getElementById('bkground').src = "NWnotte.svg"; } } Al "document.getElementById(...)" ero arrivato anch'io nei giorni scorsi(applicandolo a un div ), ma per il resto nebbia, non avrei potuto svilupparla e risolverla così. Mi restano dei dubbi però che spero potrai spiegarmi: 1) la funzione di ".src" nella formula javascript. 2)il nome "default.jpg" come attributo a src nel tag "img". Cmq, a parte i dubbi.... __________________ I soliti case ti hanno stancato? Passa all'UnCase Listen With Headphones Ultima modifica di Ciaba : 17-04-2011 alle 17:17.

17-04-2011, 23:26	#9
Ciaba Senior Member Iscritto dal: Nov 2002 Città: Firenze Messaggi: 4027	Ok per il .src,...ottima la notizia su "default.jpg"!!! Pensavo fosse qualcos'altro, ma se è per chi non ha js attivato ottimo, potrei piazzarci un cartello stradale di pericolo generico con invito ad attivare il js sul browser Scherzo(...forse), cmq non c'ero arrivato ed è segno che devo studiare ancora un bel po'. Mi metto all'opera vah,...grazie di nuovo. __________________ I soliti case ti hanno stancato? Passa all'UnCase Listen With Headphones

17-04-2011, 23:42	#10
alemoppo Member Iscritto dal: Apr 2010 Messaggi: 163	Nel mio caso ho "imparato" {->ancora so ben poco } sbriccando, e seguendo il forum di altervista.. Comunque, non è sbagliato metterci un cartello con scritto "attiva JS" o cose del genere... però ricorda che per quello, c'é il tag <noscript> che è fatto apposta Ciao! __________________ MSI B550-A PRO\|Ryzen™ 5 3600\|Freezer 13 PRO\|RX 6600\|CORSAIR CX600\|Crucial P3 Plus 1TB\|BL2K8G32C16U4B 3200 MHz\|Q27G2G4

Strumenti
Mostra una versione stampabile Invia questa pagina per email