compatibilite de script de fondu

**Aquellito** · 10/11/2010, 10h53

Bonjour,

J'ai un souci avec une fonction que j'avoue j'ai piqué sur le web (d'où ma plus grande difficulté à résoudre mon problème).
Celle-ci sert à faire un défilement d'images en fondu enchainé.
Le problème est que cela ne maarche que sur IE, pas sur FireFox ni Google Chrome.

header :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// mettre un minimum de 4 images !!! 
 
var coef = 0.03 ; // avancement de l'opacité 
var temps = 50 ; // temps entre chaque changement d'opacité 
var temps_pause = 2500 ; // temps d'attente entre 2 changements d'images 
var nombre_image = 6 ; // nombre d'images a faire bouger 
var prefix_image = 'images/'; // chemin + prefix du nom des images 
var suffix_image = '.gif' ; // suffix + '.extension' du nom des images 
 
// pas touche 
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme 
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null; 
var img2 = null ;
var sens = 1; 
var tabImg; // tab contenant les images 
 
function prechargerImg(){ 
  tabImg = new Array(nombre_image); 
  for (i=0; i<=nombre_image -1; i++){ 
    tabImg[i]=new Image(); 
    tabImg[i].src = prefix_image+(i+1)+suffix_image; 
  } 
} 
 
function init() 
{ 
    img1 = document.getElementById("defilement1") ; 
    img2 = document.getElementById("defilement2") ; 
 
    prechargerImg(); 
    change_opacity(); 
} 
 
function change_opacity() 
{     
    var opacity1 = 0 ; 
    var opacity2 = 0 ; 
    if (isIE) // for IE 
    {    opacity1 = parseFloat(img1.filters.alpha.opacity); 
        opacity2 = parseFloat(img2.filters.alpha.opacity); 
    } 
    else // for mozilla 
    {    opacity1 = parseFloat(img1.style.MozOpacity); 
        opacity2 = parseFloat(img2.style.MozOpacity); 
    } 
 
    if (sens) 
    {    if (isIE) // for IE 
        {    img1.filters.alpha.opacity = opacity1 + coef * 100; 
            img2.filters.alpha.opacity = opacity2 - coef * 100; 
        } 
        else // for Mozilla 
        {    img1.style.MozOpacity = opacity1 + coef; 
            img2.style.MozOpacity = opacity2 - coef; 
        } 
    } 
    else 
    { 
        if (isIE) // for IE 
        {    img1.filters.alpha.opacity = opacity1 - coef * 100; 
            img2.filters.alpha.opacity = opacity2 + coef * 100; 
        } 
        else // for Mozilla 
        {    img1.style.MozOpacity = opacity1 - coef; 
            img2.style.MozOpacity = opacity2 + coef; 
        } 
    } 
 
    if (isIE) // for IE 
    {    opacity1 = parseFloat(img1.filters.alpha.opacity); 
        opacity2 = parseFloat(img2.filters.alpha.opacity); 
    } 
    else // for mozilla 
    {    opacity1 = parseFloat(img1.style.MozOpacity); 
        opacity2 = parseFloat(img2.style.MozOpacity); 
    } 
 
    // on fait varié le sens d'opacité du bazar 
    if (opacity2 <= 0) 
    {    img2.src=tabImg[indice++].src; 
        sens = 0; 
        if (indice == (tabImg.length)) indice=0; 
        window.setTimeout("change_opacity()",temps_pause) ; // attente 
        return 0; 
    } 
    else if (opacity1 <= 0) 
    {    img1.src=tabImg[indice++].src; 
        sens = 1; 
        if (indice == (tabImg.length)) indice=0; 
        window.setTimeout("change_opacity()",temps_pause) ; // attente 
        return 0; 
    } 
    window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec 
}

body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="rond_centrale_back">
			<!-- Premiere image id=defilement1 -->
		<img id="defilement1" src="images/1.gif" style="-moz-opacity:0;filter:alpha(opacity=0); position:absolute" border="0" />
			<!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
		<img id="defilement2" src="images/2.gif" style="-moz-opacity:1;filter:alpha(opacity=100); position:absolute" border="0" />
</div>

**vrd-74** · 10/11/2010, 21h12

Bonjour

Mieux vaut utiliser jquery pour gérer l'opacité des images. Pour le script en lui même, il suffit de placer les deux images en position absolues, donc l'une par dessus l'autre, et d'augmenter l'opacité de la nouvelle image tout en diminuant celle de l'ancienne.

Ça donne ça en gros :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('#previous-img').animate({
	opacity: 0
}, 600, function() {
	$(this).remove();
});
$('#next-img').animate({
	opacity: 1
}, 600, function() {
	$(this).attr('id', 'previous-img');
});

Il faut que next-img soit insérée avant en display none pour que cela fonctionne.

**Bovino** · 10/11/2010, 21h29

Envoyé par vrd-74

Mieux vaut utiliser jquery pour gérer l'opacité des images.

Pas d'accord

Bien sûr, ton code est assez court et succinct, mais il faut prendre en compte ce qui est fait derrière au niveau du framework et en particulier le nombre de méthodes utilisées !
En termes de performances, un framework rivalisera rarement avec un script spécifique à une action et intégrer jQuery (ou toute autre bibliothèque) juste pour ne pas avoir à gérer IE est selon moi une erreur de conception.
Un framework quel qu'il soit ne doit pas être une rustine aux mauvaises connaissances du développeur en JavaScript, au contraire, il doit être une aide au développeur qui connait bien JavaScript et qui utilise le framework dans un projet global dans lequel JavaScript tient une place importante.

Et puisqu'on parle de fondu, j'en profite pour signaler le script que j'avais fourni suite à une demande du même type : [SRC] Fondu enchainé

**vrd-74** · 10/11/2010, 21h40

Effectivement tout dépend du projet et de l'environnement de travail. Mais un framework bien exploité permet de gagner du temps, en particulier dans le cas de l'opacité ou il faut passer par les filtres pour IE, ce qui est pénible.
Mais si jquery est utilisé juste pour cette fonction c'est certain que ça n'en vaut pas la peine.

**Bovino** · 10/11/2010, 21h54

Tiens, un débat !

Mais un framework bien exploité permet de gagner du temps

Entièrement d'accord avec ça !
Le hic étant bien sûr le "bien exploité"...
D'expérience, je sais que JavaScript (comme du reste beaucoup de langages du Web) a cette particularité que beaucoup trouvent normal de l'utiliser sans l'apprendre. Et pour ça, jQuery est d'une aide excellente... sauf que du coup, il est mal exploité !

A l'inverse, on se rend aussi compte comme tu le soulignes à juste titre de l'aide que peut apporter un framework pour ceux qui ont prit la peine d'apprendre JavaScript, notamment en terme de temps de développement !

**vrd-74** · 10/11/2010, 22h00

Entièrement d'accord, il est dommage de faire l'impasse sur l'utilisation "traditionnelle" de javascript. Mais pour avoir passé des années sans frameworks à faire les requêtes ajax "à l'ancienne", je bénis les développeurs de jquery !

**Aquellito** · 22/11/2010, 11h18

Bonjour à tous et merci pour vos réponses.

Bon j'avou que je n'utilise pas JQuery alors je vais décortiquer ton code qui m'a l'air bien plus simle que le mien. Je vais essayer de l'adapter et je vous tiens au courant.

**Watilin** · 22/11/2010, 19h52

Envoyé par vrd-74

Entièrement d'accord, il est dommage de faire l'impasse sur l'utilisation "traditionnelle" de javascript. Mais pour avoir passé des années sans frameworks à faire les requêtes ajax "à l'ancienne", je bénis les développeurs de jquery !

Héhé… Tant que tu ne connaîtras qu’un seul framework, tu ne seras pas objectif

**Aquellito** · 13/12/2010, 20h49

Bon j'ai trouvé le problème...
C'était le "MozOpacity" dans la fonction Javascript qui ne marche plus avec les nouvelles normes... Il faut désormais remplacer par "opacity".

compatibilite de script de fondu

JavaScript

Discussions similaires

Partager

Partager