[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

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

[SRC] Un petit script de fading d'image

Contribuez

Vue hybride

Discussions similaires

Partager

Partager