Fondu enchainé javascript pur [Résolu]

[christele_r]

Bonjour,
Surement vieux jeux, je codes toujours mes javascript, (peut-être a tort )
Bref je voudrais faire un fondu echainé d'images, un code sommaire mais compatible IE FireFox Opera etc ...
pour cela j'utiliserais

Code :

Cadre.filters.blendTrans.Play(2)

par exemple avec un DIV ayant comme style

Code :

FILTER: blendTrans(Duration=2);

Apparament cela ne marche pas sous firefox

Que me conseillez vous
merci d'avance

[NoSmoking]

Bonjour,

Apparament cela ne marche pas sous firefox

FILTERS est exclusif IE si je ne m'abuse.

mais il existe http://javascript.developpez.com/demos/fondu/

[edit] Rubrique Contribuez, c'est ici http://www.developpez.net/forums/d88...ondu-enchaine/

[christele_r]

Merci a toi,
Mais sur ton premier lien il me dit

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Horodateur : Sat, 23 Jul 2011 09:27:06 UTC
Message : Cet objet ne gère pas cette propriété ou cette méthode
Ligne : 42
Caractère : 7
Code : 0
URI : http://javascript.developpez.com/demos/fondu/

[NoSmoking]

Message : Cet objet ne gère pas cette propriété ou cette méthode

ah oui!
...effectivement cela plante sour IE<9 because document.getElementsByClassName et donc par rebond Array.indexOf qui plante car non implémenté.

Il te faut donc modifer Fondu.prototype.getImages.
il y aurait plusieurs méthodes, je t'en livre une

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Fondu.prototype.getImages = function(){
  var tmp = [];
  if(document.getElementsByClassName){
    tmp = document.getElementsByClassName(this.classe_img);
  }
  else{
    var tImg, i=0;
/* PARTIE A SUPPRIMER --
    while(document.getElementsByTagName('*')[i]){
      if(document.getElementsByTagName('*')[i].indexOf(this.classe_img)>-1){
        tmp.push(document.getElementsByTagName('*')[i]);
      }
      i++;
    }
  }
*/
    // correctif Array.indexOf non supporte sur <IE9
    tImg = document.getElementsByTagName('*');
    while( tImg[i]){
      if( tImg[i].className && tImg[i].className.indexOf(this.classe_img)>-1){
        tmp.push( tImg[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;
}

voila, il faudrait faire remonter l'information dans le 2nd lien que j'ai mis.

[christele_r]

Ok et merci !

[Bovino]

En fait, ce n'est pas un bug mais un oubli dans le code.
Effectivement, pour IE<9 on passe dans le else mais il manque quelque chose dans la condition :

Code :

if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img)>-1)

en fait, on recherche si l'élément possède la classe souhaitée, j'avais juste oublié le className

EDIT : d'ailleurs, le code fourni dans la discussion est correct à ce niveau, c'est juste celui de la page d'exemple qui était erroné (c'est maintenant rectifié)

[christele_r]

Bonjour l'Ami ,
Tu es toujours disponible, et efficace, super pour moi cette mise au point !
merci a tous

[NoSmoking]

OUPS !!!

Envoyé par moi même

...et donc par rebond Array.indexOf qui plante car non implémenté.

j'ai répondu un peu vite, d'autant qu'il s'agit d'une nodeList et pas d'un tableau...