Plusieur actions lors chargement page (body onload)

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Plusieur actions lors chargement page (body onload)

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Plusieur actions lors chargement page (body onload) (Lu 2079 fois)

Plusieur actions lors chargement page (body onload)
« sur: le 16-11-2013 a 18:31:48 »

Flomaluso
Membre récent

Hors-Ligne

Messages: 17

Bonsoir à tous,

Je reviens auprès de vous puisque j'ai de nouveau un problème. J'essaye actuellement d'insérer un diaporama sur l'une des pages de mon site. J'ai utilisé ce code :

Code:
<style type="text/css">

         #containimage{
            height: 200px;
             left: 50%;
margin-left: -365px; /* moitié de la largeur */
         }
         .images{
            position: absolute;
                         left: 50%;
margin-left: -365px; /* moitié de la largeur */
            z-index: 0;
         }
         p{
            width: 800px;
            text-align: center;
         }
      </style>
      <script type="text/javascript">
         var defilement = false;
         var Fondu = function(classe_img){
            this.classe_img = classe_img;
            this.courant = 0;
            this.coeff = 100;
            this.collection = this.getImages();
            this.collection[0].style.zIndex = 100;
            this.total = this.collection.length - 1;
            this.encours = false;
         }
         Fondu.prototype.getImages = function(){
            var tmp = [];
            if(document.getElementsByClassName){
               tmp = document.getElementsByClassName(this.classe_img);
            }
            else{
               var i=0;
               while(document.getElementsByTagName('*')[i]){
                  if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img)>-1){
                     tmp.push(document.getElementsByTagName('*')[i]);
                  }
                  i++;
               }
            }
            var j=tmp.length;
            while(j--){
               if(tmp[j].filters){
                  tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
                  tmp[j].style.filter = 'alpha(opacity=100)';
                  tmp[j].opaque = tmp[j].filters[0];
                  this.coeff = 1;
               }
               else{
                  tmp[j].opaque = tmp[j].style;
               }
            }
            return tmp;
         }
         Fondu.prototype.change = function(sens){
            var prevObj = this.collection[this.courant];
            if(this.encours){
               return false;
            }
            this.encours = true;
            if(sens){
               this.courant++;
               if(this.courant>this.total){
                  this.courant = 0;
               }
            }
            else{
               this.courant--;
               if(this.courant<0){
                  this.courant = this.total;
               }
            }
            var nextObj = this.collection[this.courant];
            nextObj.style.zIndex = 50;
            var tmpOp = 100;
            var that = this;
            var timer = setInterval(function(){
               if(tmpOp<0){
                  clearInterval(timer);
                  timer = null;
                  prevObj.opaque.opacity = 0;
                  nextObj.style.zIndex = 100;
                  prevObj.style.zIndex = 0;
                  prevObj.opaque.opacity = 100 / that.coeff;
                  that.encours = false;
               }
               else{
                  prevObj.opaque.opacity = tmpOp / that.coeff;
                  tmpOp -= 5;
               }
            }, 25);
         }
         function defil(){
            var boutons = document.getElementsByTagName('input');
            if(defilement){
               clearInterval(defilement);
               defilement = false;
               boutons[1].value = 'Défilement automatique';
            }
            else{
               monFondu.change(true);
               defilement = setInterval(function(){monFondu.change(true);},2000);
               boutons[1].value = 'Stopper le défilement';
            }
            boutons[0].disabled = !boutons[0].disabled;
            boutons[2].disabled = !boutons[2].disabled;
         }
      </script>
   </head>
   <body onload="window.monFondu = new Fondu('images')" onload="document.getElementById('myLink').click()">

      <div id="containimage">
         <img class="images" src="/testbande/band.jpg" alt="Image" style="z-index:100" />
         <img class="images" src="/testbande/cor.jpg" alt="Image" />
         <img class="images" src="/testbande/percussions.jpg" alt="Image" />
         <img class="images" src="/testbande/trombone.jpg" alt="Image" />
         <img class="images" src="/testbande/clarinette.jpg" alt="Image" />
         <img class="images" src="/testbande/trompette.jpg" alt="Image" />
         <img class="images" src="/testbande/hautbois.jpg" alt="Image" />
         <img class="images" src="/testbande/saxophone.jpg" alt="Image" />
         <img class="images" src="/testbande/euphonium.jpg" alt="Image" />
      </div>
      <p><input type="button" value="<<" onclick="monFondu.change(false);" /><input type="button" id="myLink" value="Défilement automatique" onclick="defil()"/><input type="button" value=">>" onclick="monFondu.change(true);" /></p>


Le code en lui même marche bien. Mais comme vous pouvez le voir à la balise <body>, j'essaye d'appeler lors du chargement, mon script et faire que toujours lors du chargement, cela clic tout seul sur le bouton "Défilement automatique". Mais visiblement cela ne veut pas marcher. J'ai essayé plusieurs syntaxes mais sans succès. Je me tourne donc vers vous dans l'espoir que quelqu'un pourra m'aider à réaliser ces deux actions lors du chargement de la page.

Merci par avance ,
A très bientôt,
Flo'