Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Cambio sfondo di un div a intervalli regolari, javascript in joomla con mootools

    Salve a tutti...
    Ho deciso di modificare un template joomla e impostare, quindi, uno sfondo che dovrebbe cambiare ogni 8 secondi.
    Ho quindi assegnato un id al div in questione (che ha già un'immagine di sfondo) e ho scritto (e inserito nel template) il seguente codice:
    codice:
    <script type="text/javascript">
    	var backgrounds = new array('immagine1','immagine2',...);
    	var maxBackground = backgrounds.length - 1;
    
    	function backgroundChange(currentBackground, id) {
    		$$(id).setStyle ("backgroundImage", currentBackground);
    	}
    
    	function randomBackground () {
    		backgroundChange(backgrounds[Math.floor(Math.random()*maxBackground)], 'mbc');
    		setTimeout(randomBackground(),8000);
    	}
    	setTimeout(randomBackground(),8000);
    </script>
    In particolare l'array backgrounds contiene gli url delle immagini (che dovranno essere impostate come sfondo in modo casuale). Questo array viene generato dinamicamente da php.
    mbc è invece l'id del mio div, con impostato uno sfondo di default:
    codice:
    <div class="..." id="mbc" style="background-image: url(..);">
    Ho anche provato senza mootools:
    codice:
    document.getElementById(id).style.background = 'url('+currentBackground+')';
    ma non ho ottenuto risultati.

    Non riesco proprio a capire perchè il codice non funziona (sto utilizzando joomla 1.5 che, se non erro, utilizza mootools 1.1)...
    Vi chiedo quindi una mano per aiutarmi a risolvere questo problema.
    In attesa di risposta vi ringrazio anticipatamente.

  2. #2
    È
    setTimeout(randomBackground,8000);

    Non

    setTimeout(randomBackground(),8000);

    perché tu devi passare al setTimeout la funzione che deve chiamare, facendo () alla fine invece la chiami tu.
    I DON'T Double Click!

  3. #3
    Grazie per la risposta ...
    ho modificato il codice (togliendo quindi le parentesi) come mi hai consigliato, ma, purtroppo, ancora non funziona.

  4. #4
    si, ho riletto meglio la tua funzione e dovresti cambiare:

    codice:
    function backgroundChange(currentBackground, id) {
    	$(id).setStyle ("background-image", 'url("'+currentBackground+'")');
    }
    I DON'T Double Click!

  5. #5
    e questo:

    document.getElementById(id).style.background = 'url('+currentBackground+')';

    non funziona perché dovrebbe essere backgroundImage
    I DON'T Double Click!

  6. #6
    Ti ringrazio: Ora funziona alla perfezione...
    Ho solo dovuto modificare la riga generata da php:
    codice:
    var backgrounds = new Array('immagine1','immagine2',...);

  7. #7
    Utente di HTML.it L'avatar di Think
    Registrato dal
    Jun 2005
    Messaggi
    1,008
    ciao

    mi interessa molto il codice!

    non ho capito dove devo posizionare il mootools:

    document.getElementById(id).style.backgroundImage = 'url('+currentBackground+')';
    grazie mille
    ciao

  8. #8
    Ecco il codice funzionante:
    codice:
    <script type="text/javascript">
    	var backgrounds = new Array('immagine1','immagine2',...);
    	var maxBackground = backgrounds.length - 1;
    
    	function backgroundChange(currentBackground, id) {
    		$(id).setStyle ("background-image", 'url("'+currentBackground+'")');
    		//oppure
    		//document.getElementById(id).style.backgroundImage = 'url('+currentBackground+')';
    	}
    
    	function randomBackground () {
    		backgroundChange(backgrounds[Math.floor(Math.random()*maxBackground)], 'mbc');
    		setTimeout(randomBackground,8000);
    	}
    	setTimeout(randomBackground,8000);
    </script>
    Mentre questo è il div:
    codice:
    <div class="..." id="mbc" style="background-image: url(..);">

  9. #9
    Utente di HTML.it L'avatar di Think
    Registrato dal
    Jun 2005
    Messaggi
    1,008
    Grazie Mille!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.