[JavaScript] [SRC] Un petit script de fading d'image

SpaceFrog · 12/02/2007, 10h51

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 :

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
<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 ...

FremyCompany · 12/02/2007, 18h25

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 :

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
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>

speedev · 20/05/2008, 10h32

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+

Auteur · 20/05/2008, 12h49

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 :

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

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 html :

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

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 javascript :

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

1
2
 
document.getElementById("spaffySpecial").style.opacity=parseFloat(opacite/100);

speedev · 20/05/2008, 14h40

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

Auteur · 15/06/2008, 11h45

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

Code css :

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

1
2
 
KhtmlOpacity

donc pour être complet :

Code css :

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

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é.

le_chomeur · 16/06/2008, 10h11

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 ??

Auteur · 16/06/2008, 23h08

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 ??

Tu peux essayer et poster ton code à la suite

FremyCompany · 18/06/2008, 21h02

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).

le_chomeur · 19/06/2008, 21h35

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

Bovino · 02/07/2008, 18h05

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
<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

20/05/2008, 10h32	#3
speedev Membre éclairé Développeur Web Inscription : mai 2006 Messages : 936 Détails du profil Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2006 Messages : 936 Points : 347 Points : 347	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+ __________________ Développeur indépendant sur technos Web à votre service
	00

20/05/2008, 14h40	#5
speedev Membre éclairé Développeur Web Inscription : mai 2006 Messages : 936 Détails du profil Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2006 Messages : 936 Points : 347 Points : 347	Oui Opera utilise aussi opacity. C'est ce qui manquait je pense en effet. __________________ Développeur indépendant sur technos Web à votre service
	00

16/06/2008, 10h11	#7
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	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 ?? __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

19/06/2008, 21h35	#10
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	je confirme , je n'utilise que opacity et filter:alpha(opacity... ) et compatible IE 6/7 FF et safari __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email