Cambiare immagine di sfondo in un div

di il
3 risposte

Cambiare immagine di sfondo in un div

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 ???

3 Risposte

  • Re: Cambiare immagine di sfondo in un div

    perla0279 ha scritto:


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

    <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>
    Dunque, un paio di precisazioni e ritocchi nel codice potrebbero aiutare:

    La dichiarazione CSS background accetta come primo parametro il colore di sfondo e solo dopo l'eventuale immagine (e sarebbe comunque meglio, per amor di sintassi, aggiungervi il posizionamento), perciò, per evitare errori grossolani nell'interpretazione dello stile, bisognerebbe modificare quelle righe in questo modo:
    <style>
    #content{
    background: transparent url(images/back_all1.jpg) no-repeat left top;
    height: 758px;
    }
    </style>
    Dopodichè nell'HTML i tre tag A non posseggono testo all'interno, perciò sono poco cliccabili, ma immagino tu l'abbia nascosto di proposito.
    Infine arriviamo al fatidico JavaScript. Prima di tutto, la funzione getElementsById() non esiste, in quanto, dato uno specifico ID, è impossibile trovare più di un elemento nel DOM, perciò la sintassi giusta usa il singolare: getElementById(). Inoltre, ma questo è solo per fare il puntiglioso e il rompi, se anche le immagini 1.jpg, 2.jpg e 3.jpg si trovano nella cartella images/ allora potresti specificarlo direttamente nel JS (questo poi dovrai verificarlo tu, io azzardo solo). Il codice JS con tali modifiche diventa:
    <script>
    function ChangeBgImg(imgs) {
    var div = document.getElementById("content");
    div.style.backgroundImage = 'url(images/'+imgs+')';
    }
    </script>
    Saluti
  • Re: Cambiare immagine di sfondo in un div

    Ciao
    se volessi creare un minimo di transizione tra un'immagine e l'altra....
    tanto per addolcire il cambio che è molto brusco....
  • Re: Cambiare immagine di sfondo in un div

    perla0279 ha scritto:


    ciao
    se volessi creare un minimo di transizione tra un'immagine e l'altra....
    tanto per addolcire il cambio che è molto brusco....
    Mmmh l'unico consiglio che saprei darti è di utilizzare jQuery, gli effetti Animate


    Altrimenti si potrebbe pensare a due DIV sovrapposti che si scambiano di opacità.

    Purtroppo altro non so dirti, scusa
Devi accedere o registrarti per scrivere nel forum
3 risposte