Changement de background image avec Mootools

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Changement de background image avec Mootools

    Bonjour,

    J'ai besoin d'aide pour faire un background image qui change toute les 30 seconde. J'ai trouvé ca http://stackoverflow.com/questions/9...ffect-mootools. Le problème c'est que je ne sais pas comment mettre ca en forme.

    Voici le code de ma page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script type="text/javascript" src="mootools-core-1.3.1-full-compat.js"></script>
    <style type="text/css">
    body {
    background-color: #d8da3d; }
    #main {
    border:#333333 solid 1px;
    width:500px;
    height:300px;
    }
    </style>
    </head>

    <body>
    <div id="main">
    <p>&nbsp;</p>
    <p>Titre du site
    </p>
    </div>
    <script type="text/javascript">

    function backgroundChange(pBackground)
    {
    var m = $('main');
    var fx = new Fx.Tween(m,{
    duration: 1500,
    onComplete: function(){
    m.setStyle('background-image','url(' + pBackground + ')');
    m.fade('in');
    }
    });
    fx.start('opacity',1,0);
    }

    </script>


    </body>
    </html>
    Es ce que mon code est ok jusqu'ici?
    comment es ce que je doit nommer mes images de background? et en quelle format? et à quel endroit?

    Merci pour votre aide

  • #2
    Re : Changement de background image avec Mootools

    Salut,
    - pour te faciliter la vie, il y a l'extension de lomart qui fait ce que tu recherches :
    Les site de Lomart avec plein de trucs, des astuces et des extensions pour Joomla.

    - la version Mootools que tu indiques est 1.3. elle n'est utilisée qu'à partir de Joomla 1.6
    - le code que tu montres est plutôt Mootools 1.2, utilisé dans Joomla 1.5 à partir du moment ou le plugin mtupgrade est installé (aux alentours de J!1.5.19)
    - la routine standard de Mootools est plutôt dans <head> :
    Code:
    <script src="mootools-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="mootools-more.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript" charset="utf-8">
    		window.addEvent('domready', function() {
    //code
    });
    </script>
    Le script core.js comprend les méthodes et fonctions indispensables de la librairie.
    Le script more. js, les "plugins".
    window.addEvent('domready', function(), etc ... implique que le dom doit être "ready" avant que le script ne fonctionne.
    Documentation :
    Mootools 1.2.5 : http://mootools.net/docs/core125/core
    Mootools 1.3.1 : http://mootools.net/docs/core

    NB : Dans Joomla 1.5, core.js et more.js sont fusionnés avec le plug mtupgrade
    Dans Joomla 1.6, core.js et more.js sont chargés séparément.

    * tu peux faire des tests de scripts Mootools avec jsfiddle:
    Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


    * si tu veux développer en dur, un joli script (en espagnol, mais demo et codigo completo se comprennent, mdr), testé Moo 1.2 et Moo 1.3 :


    Hope it helps.
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X