Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2876 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Demande d'aide: fondu entre deux images sous htm

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Demande d'aide: fondu entre deux images sous htm

n°2118395
eblt37
Posté le 27-12-2011 à 07:10:36  profilanswer
 

Bonjour, j'ai trouvé le code ci-dessous pour faire fondu entre deux images. Par contre, étant novice en htm, je suis un peu paumé. Comment rendre ce défilement automatique en faisant disparaitre le bouton et la nécéssité de cliquer sur celui-ci pour démarrer le fondu? Merci de votre aide. Voici le code:
 
<!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" xml:lang="fr-FR" lang="fr-FR">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Fondu enchainé</title>
  <style type="text/css">
   h1{
    text-align: center;
   }
   #container{
    height: 600px;
   }
   .images{
    position: absolute;
    top: 5em;
    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')">
  <h1>Galerie avec effet de fondu</h1>
  <div id="container">
   <img class="images" src="IMAGE1.JPG" alt="Image" style="z-index:100" />
   <img class="images" src="IMAGE2.JPG" alt="Image" />
   <img class="images" src="IMAGE3.JPG" alt="Image" />
   <img class="images" src="IMAGE4.JPG" alt="Image" />
   
  </div>
  <p><input type="button" value="&lt;&lt;" onclick="monFondu.change(false);" /><input type="button" value="Défilement automatique" onclick="defil()" /><input type="button" value=">>" onclick="monFondu.change(true);" /></p>
 </body>
</html>

mood
Publicité
Posté le 27-12-2011 à 07:10:36  profilanswer
 

n°2118415
AzOo
Posté le 27-12-2011 à 11:27:07  profilanswer
 

regarde du côté de ton :
 

Code :
  1. <body onload="window.monFondu = new Fondu('images'); ">


 
et de ta fonction qui te permet de faire défiler les images ...


---------------
*** [Feed-Back] AzOo ***
n°2118467
eblt37
Posté le 27-12-2011 à 17:43:17  profilanswer
 

je suis VRAIMENT novice. Peut tu être plus explicite?

n°2118473
AzOo
Posté le 27-12-2011 à 17:55:32  profilanswer
 

Hello,
 
Etre novice n'empêche pas de chercher un peu ;)
 
Bref, regarde à quoi te sert l'attribut onLoad de ton élément body (aide : http://www.w3schools.com/jsref/event_body_onload.asp) et ensuite utilise la fonction qui est utilisée lorsque tu cliques sur le bouton "Défilement automatique".
 
Je te donne pas la solution directement car tu apprendras plus en cherchant un peu et en comprenant ce que tu fais ! ^^


---------------
*** [Feed-Back] AzOo ***
n°2118475
eblt37
Posté le 27-12-2011 à 18:10:27  profilanswer
 

Merci pour tes éclaicissements
j'ai cherché et j'ai réussi à faire cela. Par contre maintenant, je ne vois pas comment ajouter un effet de fondu. Voici le code:
<HEAD>
<script>var tab = ["IMAGE1.JPG", "IMAGE2.JPG"];
var secondes = 3;
var numero = -1;
var
aleatoire = false;function changerImage () {
if (aleatoire) {
var n = numero;
while (n == numero) {
n = Math.floor(Math.random() *
tab.length);
}
numero = n;
}
else {
numero++;
if (numero >= tab.length) numero =0;
}
document.getElementById('image1').src =
tab[numero];
setTimeout("changerImage();", secondes*1000);
}
 
// -->
</script>
 
 
</head>
<body>
<P ALIGN="CENTER"><img src="" id="image1">
<script type="text/javascript">
<!--
 
changerImage();
 
// -->
</script
</body>

n°2118527
AzOo
Posté le 28-12-2011 à 10:36:31  profilanswer
 

Hello !
 
Alors tout ce que tu as réussi à faire c'est de copier/coller "bêtement" le code que tu as trouvé sur un autre site.
Donc finalement tu n'as rien appris du code que tu avais récupérer précédemment.
 
 
Le premier code contient une fonction qui te permet de jouer sur l'opacité d'une image, donc d'avoir ton effet de fondu.
 
Le second code change juste ton image aléatoirement via la fonction changerImage().
 
Essaye de comprendre comment le second code fonctionne, petite aide : regarde où est utilisé la fonction cité en gras au dessus dans ton code, et essaye de voir si tu ne peut pas appliquer la même astuce au premier code sans passer par le onLoad.
 
Voila, n'hésite pas à poser des questions, mais surtout ne reviens pas avec un 3ème code que tu auras pompé je ne sais où et que tu ne comprendras pas.


---------------
*** [Feed-Back] AzOo ***

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Demande d'aide: fondu entre deux images sous htm

 

Sujets relatifs
aide pour modifier un petit programme avant le 21/12, 9hAIDE script bash avec en sortie, arborescence navigable
aide pour 1er partie c++Faire un espace entre 2 images en html
[MySQL] Urgent, PB export dans la BDD !Help besoin d'aide pour un exercie logique
Besoin d'aide svpAide pour un noob
Bash aide projet 
Plus de sujets relatifs à : Demande d'aide: fondu entre deux images sous htm


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR