[SRC] Un petit script de fading d'image

Version imprimable

Problème récurrent de différence d'interprétation de l'opacité des images entre IE et FFX ...
Resolu simplement ici avec un simple test sur document.all :

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fading Pic</title>
</head>
 
<body>
<img id="spaffySpecial" src="lungs.gif" width=116 height=123 style="-moz-opacity:0;filter:alpha(opacity=0)">
<br/>
Opacité : <input type='text' id='result' style="width:40px;text-align:right;" />
<script>
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("spaffySpecial");
 
function fadePic(){        
                if (opacite<max && up){opacite+=2;}
                if (opacite>min && !up){opacite-=2;}
                if (opacite>=max){up=false;}
                if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("spaffySpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
</script>
</body>
</html>

à noter que l'on pourrait changer l'image lorsque le min est atteint, ce qui donnerait un diaporama avec fade ...

Un autre script en rapport direct avec la transparence, mais d'un autre type différent (simulation de boutons réactif avec une seule image) :

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
    <head>
        <title>Opacity modifier</title>
        <script><!--
            getLocation=function(node) {
                var loc = {"width":node.offsetWidth,"height":node.offsetHeight };
            	var left=node.offsetLeft;
            	var top =node.offsetTop;
            	while(node.offsetParent) {
            		node=node.offsetParent;
            		left+=node.offsetLeft;
            		top +=node.offsetTop;
            	}
                loc.left=left;
                loc.top=top;
            	return loc;
            }
 
            addOpacityChangeEffect=function(node, min, max) {
                node.oo = document.createElement("div");
                node.oo.realNode = node;
                node.oo.style.backgroundColor="black";
                node.oo.style.position="absolute";
                // Opacité minimum (maximum -100: arrière-plan masqué)
                // (souvent 0:transparent ou -15:masque éclaircissant)
                node.oo.maxOpacity=max;
                // Opacité maximum (maximum 100: arrière-plan masqué)
                // (souvent p: trnasparent ou 15:masque noircissant)
                node.oo.minOpacity=min;
                node.oo.opacity=node.oo.maxOpacity;
                node.oo.opacityModifier=0; // A laisser à 0 par défaut, taux de modification de l'opacité en [%/cs]
                node.oo.onmouseover=function(e) {
                    try {
                    this.opacityModifier=-1; // L'opacité diminue de 1% chaque centième de secconde
                    this.realNode.onmouseover(e)
                    } catch (err) {}
                }
                node.oo.onmouseout=function(e) {
                    try {
                    this.opacityModifier=1; // L'opacité se renforce de 1% chaque centième de secconde
                    this.realNode.onmouseout(e)
                    } catch (err) {}
                }
                node.oo.onclick=function(e) {
                    try {
                    this.realNode.onclick(e)
                    } catch (err) {}
                }
                node.oo.onmouseup=function(e) {
                    try {
                    this.realNode.onmouseup(e)
                    } catch (err) {}
                }
                node.oo.onmousedown=function(e) {
                    try {
                    this.realNode.onmousedown(e)
                    } catch (err) {}
                }
                node.oo.onmouseenter=function(e) {
                    try {
                    this.realNode.onmouseenter(e)
                    } catch (err) {}
                }
                node.oo.onmouseleave=function(e) {
                    try {
                    this.realNode.onmouseleave(e)
                    } catch (err) {}
                }
                node.oo.update=function(node) {
                    try {
                    // Place le div au bon endroit
                    var loc=getLocation(node);
                    this.style.left=loc.left+"px";
                    this.style.width=loc.width+"px";
                    this.style.top=loc.top+"px";
                    this.style.height=loc.height+"px";
                    // Effectue le changement d'opacité (valeur)
                    this.opacity+=this.opacityModifier; 
                    if (this.opacity>this.maxOpacity) {this.opacity=this.maxOpacity;}
                    if (this.opacity<this.minOpacity) {this.opacity=this.minOpacity;}
                    // Détermine si il s'agit d'un éclaircicement ou d'un noirciement
                    var realOpacity = this.opacity
                    if (this.opacity<0) {
                        this.style.backgroundColor = "white"
                        realOpacity = (-realOpacity)
                    }
                    else {
                        this.style.backgroundColor = "black"
                    }
                    // Effectue le changement d'opacité (style)
                    this.style.opacity=(realOpacity/100); // FF
                    this.style.filter="alpha(opacity="+realOpacity+")" // IE
                    // Place le div au dessus de l'image
                    var zi = parseInt(node.style.zIndex);
                    if (zi < 0) { zi = 0 }
                    zi+=1;
                    this.style.zIndex=zi;
                    } catch (err) {}
                }
                setInterval(function() { node.oo.update(node); }, 10);
                document.body.appendChild(node.oo);
            }
        --></script>
    </head>
    <body>
        <img 
            id="image1" name="image1"
            style="border: 2px outset; background-color: #E1E1E2"
            src="http://www.developpez.net/forums/images/logo16.gif" 
            onclick="window.location='http://www.developpez.net'"
            onmousedown="this.style.border='2px inset'"
            onmouseup="this.style.border='2px ouset'"
            onmouseout="this.style.border='2px outset'"
        />
        <script>addOpacityChangeEffect(document.getElementById("image1"), -15, 15);</script>
    </body>
</html>

20/05/2008, 10h32
speedev

Hello,

Script testé SpaceFrog, c'est nickel, et ça pourrait être utile qu'il soit compatible Opera. On l'oublie trop souvent ce navigateur et pourtant il est "clean".

a+
20/05/2008, 12h49
Auteur
Citation:

Envoyé par speedev

Hello,

Script testé SpaceFrog, c'est nickel, et ça pourrait être utile qu'il soit compatible Opera. On l'oublie trop souvent ce navigateur et pourtant il est "clean".

a+

Je sais qu'en CSS :
Code:

1 2 3 4 -moz-opacity: 0.30; /* FF */ opacity: 0.30; /* Opera et FF je crois*/ filter : alpha(opacity=30); /* IE */
SF a oublié la propriété opacity dans l'attribut style de la balise img, ce qui explique sans doute que le script ne fonctionne pas sous Opera (par contre il utilise bien la propriété opacity dans le script) :
Code:

1 2 <img id="spaffySpecial" src="lungs.gif" width=116 height=123 style="-moz-opacity:0;filter:alpha(opacity=0)">
Dans le script j'aurais écrit (je ne sais pas si ça changera grand chose) :
Code:

1 2 document.getElementById("spaffySpecial").style.opacity=parseFloat(opacite/100);
20/05/2008, 14h40
speedev

Oui Opera utilise aussi opacity.
C'est ce qui manquait je pense en effet.

j'ai appris que Konqueror et Safari utilisaient la propriété :
Code:

1 2 KhtmlOpacity
donc pour être complet :
Code:

1 2 3 4 5 -moz-opacity: 0.30; /* ancienne version de FF */ opacity: 0.30; /* Opera et FF */ filter : alpha(opacity=30); /* IE */ KhtmlOpacity : 0.30; /* Konqueror, Safari */
la source date de 2006, je pense que c'est toujours d'actualité.

16/06/2008, 10h11
le_chomeur

je pense qu'il serait bien également d'ajouter cette méthode en version prototype, puisqu'ici le fading n'agit que sur un élément de type image , même s'il est facilement adaptable , qu'en pensez vous ?? :oops:
16/06/2008, 23h08
Auteur

Citation:

Envoyé par le_chomeur

je pense qu'il serait bien également d'ajouter cette méthode en version prototype, puisqu'ici le fading n'agit que sur un élément de type image , même s'il est facilement adaptable , qu'en pensez vous ?? :oops:

Tu peux essayer et poster ton code à la suite ;)
18/06/2008, 21h02
FremyCompany

Citation:

Envoyé par Auteur

la source date de 2006, je pense que c'est toujours d'actualité.

Tant "-moz-opacity" (FireFox gère opacity depuis la 2.0) que "-khtml-opacity" (d'où le JS KhtmlOpacity) ne sont plus d'application (Safari gère Opacity depuis la 3.0, peut-être la 2.0, les dernières versions de konquéror aussi).
19/06/2008, 21h35
le_chomeur

je confirme , je n'utilise que opacity et filter:alpha(opacity... ) et compatible IE 6/7 FF et safari

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
40
41
42
43
44
45
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fading Pic</title>
<script type="text/javascript">
//<![CDATA[
var IsIE=!!document.all;
function initialise(){
	var opImg = document.getElementById('refImg').getElementsByTagName('img');
	for(var i=0;i<opImg.length;i++){
		if(IsIE){
			opImg[i].style.filter='alpha(opacity=50)';
			opImg[i].filters[0].opacity=50;
		}
		else{opImg[i].style.opacity='0.5';}
		opImg[i].onmouseover = function(i){fadePic(this, 50, 100)}
		opImg[i].onmouseout = function(i){fadePic(this, 100, 50)}
	}
}
function fadePic(elt, debut, fin){
	if(debut==fin){return false}
	IsIE?elt.filters[0].opacity=debut:elt.style.opacity=debut/100;
	debut>fin?debut-=2:debut+=2;
	setTimeout(function(){fadePic(elt,debut,fin);},10);
}
//]]>
</script>
</head>
 
<body>
<img src="image1.jpg" alt="Image sans fading" />
<br/>
<div id="refImg">
<img src="image1.jpg" alt="Image avec fading" />
<br/>
<img src="image2.jpg" alt="Image avec fading" />
<br/>
<img src="image3.jpg" alt="Image avec fading" />
<br/>
<img src="image4.jpg" alt="Image avec fading" />
<br/>
</div>
</body>
</html>

Petite contribution sur la base du code initial de SpaceFrog.

Le script n'influe que sur les images à l'intérieur du bloc 'refImg', il initialise l'opacité en javascript, donc peut être validé CSS (je sais, c'est un peu tricher...) et permet donc un effet survol des images sélectionnées.
Testé sous ie6 (ietester), ie7, ff2, ff3, opera 9.50, safari 3