Creazione sito con 2 immagini di background

Printable View

04-08-2012, 10.34.58

Creazione sito con 2 immagini di background

Buongiorno a tutti.
Vi spiego brevemente il mio problema: vorrei creare un sito senza bottoni ne pagine di menù, solo con 2 immagini di sfondo che coprono tutta la grandezza della pagina e che cambiano con una semplice dissolvenza dopo un tot di tempo, con l'aggiunta di una musica di sottofondo.

Riguardo alla musica, anche se non l'ho ancora testato sono riuscito a trovare questo codice (poi al limite qualcuno che già lo usa mi può confermare se funziona)

Codice HTML:

<object type="audio/x-mpeg" data="/files/theme/4.mp3" width="200" height="16" autoplay="true"> <param name="src" value="/files/theme/4.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <param name="autostart" value="0" /> </object>

Riguardo invece alle immagini, visto che non posso utilizzare il classico

Codice HTML:

<body background="urlimmagine.gif">

che funziona con una sola immagine, ho passato la giornata di ieri a rileggere tutte le discussioni di questo forum relative all'argomento, ma ancora non sono riuscito a ricavare praticamente nulla quindi chiedo il vostro aiuto.

Se può essere servire, le 2 immagini in questione sono in alta risoluzione con dimensione: 4288x2848.

Grazie a tutti coloro che vorranno aiutarmi :)
04-08-2012, 10.54.42
sevenjeak

Per inserire più immagine di sfondo dovresti usare l'ultima versione dei fogli di stile ( CSS3 ), ma non tutti i browser, soprattutto quelli vecchi, lo supportano, dai un'occhiata qui per sapere come fare:

http://www.css3.info/preview/multiple-backgrounds/

Per cambiare sfondo ad intervalli ti tempi dovresti utilizzare il Javascript, sul forum c'è già una discussione a riguardo, dacci un'occhiata:

http://forum.it.altervista.org/javas...t-secondi.html

Non ho visto che funzione il tag object, ma dovrebbe funzionare.
05-08-2012, 02.05.24

Ciao e grazie per aver risposto alla mia richiesta.

L'idea dei fogli di stile mi sembra ottima e il fatto della compatibilità con le vecchie versioni dei browser non è un grande problema, tuttavia stò riscontrando delle difficoltà per metterla in pratica, nel senso che (se ho capito bene), dovrei inserire il seguente codice:

Codice HTML:

{ width: 500px; height: 250px; background-image: url(miaimmagine1.jpg), url(miaimmagine2.jpg); background-position: center bottom, left top; background-repeat: no-repeat; }

In un file .css a parte da collegare poi all'index.html principale, ma come faccio a farlo? qual'è il codice da inserire in quest'ultimo??

Riguardo allo script per il cambio delle foto, il codice indicato va inserito semplicemente nell'index.html giusto?

Mi scuso se le domande possono sembrare stupide o altro ma sono un neofita desideroso di apprendere^^

Grazie per la vostra pazienza.
05-08-2012, 08.45.44
sevenjeak

Intendi dire che non sia includere un foglio di stile nella pagina, giusto? se si ci sono tre differenti modi per farlo: dai un'occhiata:

http://www.html.it/pag/14211/inserir...-un-documento/

Per javascript lo devi mettere nella index, vale la stessa cosa dei fogli di stile, lo puoi includere da un file esterno o inserire direttamente nell'head della pagina, ora purtroppo non ho un link da darti, ma lo puoi trovare in qualsiasi guida su javascript questo.
05-08-2012, 15.07.51

Grazie per il link, alla fine ho optato per includerlo direttamente nell'index.hmtl e pare funzionare visto che ora riesco a vedere le 2 immagini sovrapposte, tuttavia non riesco a far funzionare lo script per il cambio automatico delle foto che mi hai indicato nell'altro link; dopo aver incluso anche quello, ora vedo diverse immagini sovrapposte e non cambia niente, potresti dare un'occhiata al mio codice per indicarmi dove sbaglio?

Codice HTML:

<html> <head> <title>La compagnia delle pelli</title> <style type="text/css"> body { width: 1024px; height: 680px; background-image: url(imgsfondo1m.jpg), url(imgsfondo2m.jpg); background-position: center bottom, left top; background-repeat: no-repeat; } </style> <div style="text-align:center;"><img src="http://testnuovosito.altervista.org/imgsfondo1m.jpg" id="img"></div> <script language="Javascript" type="text/javascript"> var secondi=1; var num=0; function CambiaImmagine() { var immagini=new Array(); immagini[0]="http://testnuovosito.altervista.org/imgsfondo1m.jpg"; immagini[1]="http://testnuovosito.altervista.org/imgsfondo2m.jpg"; document.getElementById("img").src=immagini[num]; num=(num+1>=immagini.length)?0:num+1; setTimeout(CambiaImmagine(),secondi*1000); } CambiaImmagine(); </script> </head> <body> </body> </head> </html>

Sempre nel link da te indicatomi, relativo al javascript, l'utente funcoolc chiede un aiuto in quanto nel codice sembra ci sia qualcosa che non funziona, e infatti gli viene fatto notare un errore (può essere per quello che non mi funziona?) ma non ho ben capito come si risolve :cry:

Grazie ancora per la pazienza.
05-08-2012, 19.18.39
sevenjeak

Il tuo problema e già stato risolto in un'altra discussione, dai un'occhiata qui:

http://forum.it.altervista.org/javas...t-secondi.html
05-08-2012, 20.18.41

Si, quella è la discussione a cui mi riferivo e come ho già detto non ho capito come risolvere il problema, cioè io non so cosa significa:

Citazione:

Attento, mi pare che nella funzione setTimeOut la funzione da chiamare debba essere passata come stringa...

Se neanche così si risolve il problema, prova a togliere la riga setTimeout e mettere FUORI dalla funzione setInterval ("CambiaImmagine()", secondi * 1000).

In termini pratici, cosa devo cambiare nel codice?

Grazie
06-08-2012, 08.55.49

Citazione:

Originalmente inviato da testnuovosito

In termini pratici, cosa devo cambiare nel codice?

Che devi mettere CambiaImmagine() tra virgolette... Cioè sostituire la riga:

setTimeout(CambiaImmagine(),secondi*1000);

con:

setTimeout("CambiaImmagine()",secondi*1000);
06-08-2012, 09.37.37
sevenjeak

Si, e da quello che ho visto modificando solo quella riga lo script funziona perfettamente.
06-08-2012, 14.34.00

Vi ringrazio entrambi, finalmente funziona!!

Però pensavo che incluso nel Javascript vi fosse anche la dissolvenza a cui avevo accennato nel primo post; ho letto varie discussioni qui sul forum e su altri siti, ma tutte si riferiscono a immagini statiche da utilizzare poi per creare uno slideshow con effetto di transizione, mentre io ho già le immagini in movimento ma senza effetto quindi non so bene come muovermi; potreste indicarmi un nuovo codice da aggiungere all'index, o anche da implementare con quello attuale? Mi basta un semplicissimo effetto fade, niente di più :)

A parte questo, c'è un punto critico di cui si è parlato molto in questo forum, e cioè la possibilità di avere un'immagine di background che cambia dimensione e si adatta a senconda della grandezza dello schermo su cui viene visualizzata, ma alla fine di ogni discussione non si riesce ad ottenere una risposta definitiva, per cui, ora è ovvio che sia possibile farlo ma finora tutti i siti su cui ho potuto constatare questo fatto sono stati creati e vengono gestiti con wordpress, joomla ecc, per cui la mia domanda è: esiste un codice (html, css, javascript ecc) che renda possibile ottenere lo stesso risultato, senza dover obbligatoriamente ricorrere ad un CMS?

Grazie ancora.
07-08-2012, 17.56.24

Tutto a posto, ho risolto entrambi i problemi con l'utilizzo di .css e di alcuni file .js esterni, ho solo un ultimo problema che riguarda la musica di sottofondo per il sito, in quanto il codice che ho inizialmente indicato nel mio primo post:

Codice HTML:

<object type="audio/x-mpeg" data="/files/theme/4.mp3" width="200" height="16" autoplay="true"> <param name="src" value="/files/theme/4.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <param name="autostart" value="0" /> </object>

Apre un mini lettore multimediale, mentre io vorrei che la musica partisse in automatico (semnza controlli di sorta tipo play, pausa ecc) appena si apre la pagina, possibilmente con funzione loop e con supporto multi-browser; potete darmi una mano?
08-08-2012, 09.58.15

Il codice, poveretto, fa quello che deve fare... Hai dato all'oggetto l'attributo autoplay con valore vero (che in sincerità non so se sia permesso), ma ammesso e non concesso che il browser lo interpreti, poi si trova il parametro autoplay e autostart tutti e due settati su falso (0=falso), per cui l'audio non parte da solo. :???:
Non vuoi i controlli? Hai settato controller su vero... :???:
Il player compare? Poveraccio, gli hai dato 200 pixel di larghezza e 16 di altezza, si vede sì... :???:

Per fare ciò che chiedi, si potrebbe quindi provare a operare così, inserendo anche un parametro loop:

<object type="audio/x-mpeg" data="/files/theme/4.mp3" width="0" height="0">
<param name="src" value="/files/theme/4.mp3" />
<param name="controller" value="false" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="loop" value="1" />

</object>

Così dovrebbe andare come vuoi tu.

Ti lascio però un'alternativa perché il codice così com'è, pur essendo (credo) corretto secondo lo standard W3C, ha problemi di compatibilità (e tu vuoi una cosa cross-browser)... Se ne hai la possibilità testalo con Internet Explorer 9... Sono quasi certo che ti dia casini!

L'alternativa che ti lascio è usare il comando EMBED, deprecato dallo standard W3C per HTML4, ma ripreso per HTML5, e quindi, in generale, funzionante.
Il codice è il seguente:

<embed src="/files/theme/4.mp3" autostart="true" hidden="true" loop="true" height="0" width="0" />

Che significa: incorpora ciò che trovi nel percorso "/files/theme/4.mp3", facendolo partire automaticamente, NASCOSTO, con loop, e se "nascosto" non è abbastanza, la sua altezza e larghezza con il player che sceglierai sarà zero.

Una cosa, quindi, completa, potrebbe essere:

Codice HTML:

<object type="audio/x-mpeg" data="/files/theme/4.mp3" width="0" height="0"> <param name="src" value="/files/theme/4.mp3" /> <param name="controller" value="false" /> <param name="autoplay" value="true" /> <param name="autostart" value="1" /> <param name="loop" value="1" /> <embed src="/files/theme/4.mp3" autostart="true" hidden="true" loop="true" height="0" width="0" /> </object>

che dovrebbero digerire più o meno tutti i browser.

Nota bene: i parametri indicati dipendono da che player l'utente usa... Per essere sicuro dell'effetto potresti COSTRINGERE il browser a caricarne uno (che so, RealPlayer o Quicktime), ma in tal caso se l'utente NON ha il player che TU scegli come plugin riproduttore, appare la fastidiosissima tendina "è richiesto di installare il plugin aggiuntivo bla bla bla", che direi è meglio evitare e rischiare al più che il player che l'utente ha non capisca che cosa vuol dire Loop e riproduca una volta sola il brano scelto, che CHIARAMENTE per buona pace della SIAE deve essere di tua proprietà! :wink:

Scusa la risposta lunga, ma spero almeno di averti un poco chiarito le idee.
17-08-2012, 17.15.48

Tu definisci la tua risposta lunga, io invece affermo che essa è chiara ed esauriente, e ti ringrazio per averla postata!

Ho provato ad utilizzare il tuo codice ed in effetti il lettore multimediale è sparito, ma in compenso ho avuto diversi problemi su ogni browser con cui ho provato ad aprire il sito:

Mozilla Firefox: Una finestra mi avverte che si è verificato un arresto anomalo sel plugin e di conseguenza la musica non parte;

Apple Safari: La musica parte ma la funzione loop non si attiva e quindi una volta terminato, il brano non riparte;

Internet Explorer: Qui niente finestre o messaggi di errore, la musica.... non parte e basta! xD

Quindi, alla luce di questi problemi, dopo svariate ricerche e infinite prove, ho deciso di utilizzare questo script:

Codice:

<script language="JavaScript">  </script>

E' riconosciuto da tutti i browser, la musica parte e per evitare che non si attivi la funzione loop ho modificato il file .mp3 in modo che la musica (che sottolineo essere di mia proprietà, suonata personalmente da me), venga ripetuta per un'ora intera!

Non sarà bello o elegante, ma a me non serve che lo sia, svolge la funzione che desidero ed è più che sufficiente.

Ringrazio tutti coloro che hanno speso del tempo per aiutarmi, presto tornerò sicuramente per sottoporvi altri quesiti, non dubitate! :lol:
18-08-2012, 23.14.20

Leggo da cellulare e quindi non riesco a visualizzare l'intero codice... Se funziona nella maggioranza dei casi ben venga. Dalla "faccia" mi sembra un normale "embed", che come detto ha parametri "ufficiali" ancora -a mio parere- poco chiari... Solo che i parametri vengono immessi in javascript... Ma può benissimo essere che passando per js il codice ne tragga beneficio. Mi togli una curiosità? Che ti dice la validazione W3C?
P.s.: la mia uscita riguardo SIAE e annessi era una stupidaggine tanto per scrivere qualcosa... Per quanto mi riguarda puoi tranquillamente inserire la musica che preferisci :-) Anche se, ovviamente, le regole ufficiali sono altre.