Cambiare l'immagine di sfondo con JavaScript

sabato 19 dicembre 2009 - 21.19

perla0279 Profilo | Senior Member

Ciao

stò cercando di creare un funzione in javascript che mi cambi lo sfondo di un div secondo una lista di immagini .....

ma pultroppo la mia poca praticità con il codice richiede un piccolo aiutino da parte vostra....... :-) :-)


Allora ho scritto :
<style>
#content{
background: url(images/back_all1.jpg) no-repeat;
height: 758px;
}



<script>
function ChangeBgImg(imgs) {
var div = document.getElementsById("content");
div.style.backgroundImage = 'url('+imgs+')';
}
</script>

<div id="content">
<a href="#" onclick="ChangeBgImg('1.jpg');return false"></a>
<a href="#" onclick="ChangeBgImg('2.jpg');return false"></a>
<a href="#" onclick="ChangeBgImg('3.jpg');return false"></a>

...codice del div ............

</div>


Ma sembra non funzionare..... penso non si possa fare con il div..........
come posso fare ???

alx_81 Profilo | Guru

>Ciao
Ciao

><script>
>function ChangeBgImg(imgs) {
>var div = document.getElementsById("content");
>div.style.backgroundImage = 'url('+imgs+')';
>}
></script>

>Ma sembra non funzionare..... penso non si possa fare con il
hai provato ad aggiungere la cartella in cui probabilmente (vedendo la prima) sono poste le immagini?
ChangeBgImg('images/1.jpg');
magari è solo il posizionamento dei file e quindi quando cerchi di collegare un'immagine che non si trova non hai l'effetto sperato.
Detto questo, mi permetto di consigliarti alcuni plugin che fanno già il cambio immagine e in più danno un certo tipo di animazione gradevole.
Il tutto tramite jquery (http://jquery.com):
http://www.twospy.com/galleriffic/#1

ti invito a guardare gli esempi. Sono molto gradevoli.

--

Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi

perla0279 Profilo | Senior Member

Alla fine ho fatto così..........

window.onload = function() { sfondo() } function sfondo() { var cl = document.getElementById('main1'); if (cl.className == "") { cl.className = "in"; } else if (cl.className == "in") { cl.className = "in1"; } else if (cl.className == "in1") { cl.className = "in2"; } else if (cl.className == "in2") { cl.className = "in3"; } else if (cl.className == "in3") { cl.className = "in4"; } else if (cl.className == "in4") { cl.className = "in5"; } else { cl.className = "in"} } x = window.setInterval("sfondo()", 5000); .in1 { width: 100%; background: url(images/sitebg1.jpg) no-repeat bottom left fixed;

con foglio di stile formatato:
.in1 { width: 100%; background: url(images/sitebg1.jpg) no-repeat bottom left fixed; } .in2 { width: 100%; background: url(images/sitebg2.jpg) no-repeat bottom left fixed; } .in3 { width: 100%; background: url(images/sitebg3.jpg) no-repeat bottom left fixed; ecc...


Adesso vorrei mettere un'interpolazione tra le due foto, non so per esempio un effetto dissolvenza, un bagliore,.... insomma un effetto carino per non fare in modo che il cambio di immagine sia brusco......


Come posso fare ???
Cosa devo usare per farlo ??

alx_81 Profilo | Guru

>Adesso vorrei mettere un'interpolazione tra le due foto, non
>so per esempio un effetto dissolvenza, un bagliore,.... insomma
>un effetto carino per non fare in modo che il cambio di immagine
>sia brusco......
appunto, perchè non mi ascolti?
imparati quel poco che serve di jquery e vedrai che effetti otterrai, se vuoi guarda qui cosa ho fatto usando s3slider plugin di jquery:
http://www.graficamalvisi.it/Default.aspx

lo slider di immagini è fatto con due righe di codice jquery ed il plugin legge semplicemente un html formattato in un certo modo.
Guarda la sorgente della pagina..
--

Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi

alexmed Profilo | Guru

Ciao Alessandro
Dopo aver scaricato l'esempio (http://www.serie3.info/s3slider/index.php), per fare delle prove, ho un piccolo problema che se riuscissi a risolvere sarei a cavallo.
Per prima cosa ho provato a sostituire la struttura ad elenco <ul><li></li></ul> con i div e funziona correttamente.
Tanto per capirci:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Ho inoltre apportato qualche modifica anche agli stili

<style type="text/css" media="screen"> #slider { width: 160px; /* important to be same as image width */ height: 120px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent { width: 100%; /* important to be same as image width or wider */ height: 100%; /* important to be same as image height */ position: absolute; top: 0; margin-left: 0; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 0px; width: 100%; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } ul { list-style-type: none;} img { width: 100%; /* important to be same as image width */ border: 0px; } </style>

In pratica stò cercando di fare in modo che cambiando le dimensioni dello #slider, le immagini si adattino automaticamente.
L'unico problema che riscontro è quando tra le immagini ne ho una "verticale".
Se lascio il codice come sopra praticamente mi taglia la foto in due in quanto viene adatta in base alla larghezza.
Se al blocco img{...} aggiungo height: 100% (per adattarla in altezza) me la streccia
Se metto solo height: 100% non me la scala.

C'è una soluzione?

Grazie
alexmed

alexmed Profilo | Guru

Ok risolto

.sliderImage { float: left; position: relative; display: none; width:100%; height:100%; text-align:center; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 5px; width: 100%; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; text-align:left; }
alexmed

alx_81 Profilo | Guru

ehehe, ottimo.
Quindi possiamo chiudere il thread? Se ti ha aiutato accetta la risposta
--

Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi

alexmed Profilo | Guru

Per me si, possiamo chiuderlo ma non avendolo aperto io non mi dà il tasto accetta.

Ciao
alexmed
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2023
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5