Discussion :

[Aquellito]

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]

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]

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]

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]

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]

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 !