Effet d'image fondu et selection de plusieurs répertoires

**sam01** · 06/12/2010, 15h53

Bonjour à tous,

voilà j'aimerais afficher 5 photos (les unes à côté des autres), en appliquant un effet d'images fondu sur chacune de ces photos.

Ces 5 photos appartiennent à des répertoires différents.

donc l'image fondu de la première photo se ferait sur toutes les images du répertoire auquel elle appartient et même chose pour les autres photos.

Les images peuvent être du type jpg, png ou encore gif.

Merci d'avance pour votre aide.

**Bovino** · 06/12/2010, 18h11

J'ai rien compris à ton histoire de répertoire, mais voici un script de fondu : http://www.developpez.net/forums/d88...ondu-enchaine/

**sam01** · 06/12/2010, 23h14

Bonjour Bovino,

je vais essayer de me faire comprendre.

J'ai besoin de sélectionner un répertoire (qui contient 5 images par exemples)
et faire un fondu des 5 images. jusque là ça va.

Ca signifie que j'aurais sur le côté gauche de mon site, une photo avec un effet fondu.

mais j'ai besoin de remplir toute une ligne d'images, donc j'ai besoin de sélectionner un autre répertoire, et effectuer le même effet de fondu.

j'aurais à ce moment deux images (l'une à côté de l'autre) avec chacune son effet de fondu et ainsi de suite.

J'ai besoin de faire ça sur 5 répertoires différents et je pense que la difficulté est là.

Un peu comme cette image mais avec un effet fondu :

http://www.pixenli.com/image1291673924003418300.html

Merci d'avance pour votre aide.

**SpaceFrog** · 07/12/2010, 08h44

pas le même repertoire = juste modifier la path ... je ne vois pas de souci particulier sur le fait de rendre un path variable ..

**sam01** · 07/12/2010, 10h17

Donc il faut que je boucle le code java avec du php c'est bien ça ?

**SpaceFrog** · 07/12/2010, 10h30

tu veux le faire coté client ou serveur ???
mais que ce soit d'un coté ou de l'autre il faut juste rendre le path variable

**sam01** · 07/12/2010, 13h42

ha d'accord, bon je vais essayé.

Merci.

**sam01** · 08/12/2010, 07h47

Bonjour,

voilà j'essaie d'obtenir le fondu mais ça ne fonctionne pas...

J'ai uniquement la première images qui apparaît et il n'y pas du tout de fondu avec les autres..

Voici mon html :

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
 
	   <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="styles\styles.css" />
 
		<script type="text/javascript">
			var defilement = true;
			var Fondu = function(classe_img){
				this.classe_img = classe_img;
				this.courant = 0;
				this.coeff = 100;
				this.collection = this.getImages();
				this.collection[0].style.zIndex = 100;
				this.total = this.collection.length - 1;
				this.encours = false;
			}
			Fondu.prototype.getImages = function(){
				var tmp = [];
				if(document.getElementsByClassName){
					tmp = document.getElementsByClassName(this.classe_img);
				}
				else{
					var i=0;
					while(document.getElementsByTagName('*')[i]){
						if(document.getElementsByTagName('*')[i].indexOf(this.classe_img)>-1){
							tmp.push(document.getElementsByTagName('*')[i]);
						}
						i++;
					}
				}
				var j=tmp.length;
				while(j--){
					if(tmp[j].filters){
						tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
						tmp[j].style.filter = 'alpha(opacity=100)';
						tmp[j].opaque = tmp[j].filters[0];
						this.coeff = 1;
					}
					else{
						tmp[j].opaque = tmp[j].style;
					}
				}
				return tmp;
			}
			Fondu.prototype.change = function(sens){
				var prevObj = this.collection[this.courant];
				if(this.encours){
					return false;
				}
				this.encours = true;
				if(sens){
					this.courant++;
					if(this.courant>this.total){
						this.courant = 0;
					}
				}
				else{
					this.courant--;
					if(this.courant<0){
						this.courant = this.total;
					}
				}
				var nextObj = this.collection[this.courant];
				nextObj.style.zIndex = 50;
				var tmpOp = 100;
				var that = this;
				var timer = setInterval(function(){
					if(tmpOp<0){
						clearInterval(timer);
						timer = null;
						prevObj.opaque.opacity = 0;
						nextObj.style.zIndex = 100;
						prevObj.style.zIndex = 0;
						prevObj.opaque.opacity = 100 / that.coeff;
						that.encours = false;
					}
					else{
						prevObj.opaque.opacity = tmpOp / that.coeff;
						tmpOp -= 5;
					}
				}, 25);
			}
 
		</script>
 
 
 
 
   </head>
 
   <!--commentaire-->
 
 
 
<body onload="window.monFondu = new Fondu('img_142')">
 
 
<div class="global">
 
 
 
<div class="banniere">
 
<p class="galerie_image"><a href="lien1"><img src="images/es.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/fr.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/en.gif" ></a></p>
 
 
 
</div>
 
 
 
 
 
<div class="total">
 
 
<div class="colonne_gauche">
 
 
 
 
</div>
 
<div class="colonne_milieu">
 
 
 
 
 
<div class="isol_142_first">
 
<img src="images/photo/12/1.jpeg" class="img_142" style="z-index:100" />>
<img src="images/photo/12/3.jpeg" class="img_142">
<img src="images/photo/12/4.jpeg" class="img_142">
<img src="images/photo/12/8.jpeg" class="img_142">
 
</div>
 
 
 
</div>
 
 
</div> <!--fin du div total-->
 
 
</div> <!-- fin de div global -->
 
</body>
 
 
</html>

le css de la classe img_142 est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
 
.img_142
 {
 /*width:142px;*/
height:142px;
position: absolute;
top: 5em;
z-index: 0;
}

Merci d'avance pour votre aide.

**Bovino** · 08/12/2010, 20h16

Le paramètre passé à la fonction correspond au nom de classe CSS des images, mais tes images n'ont pas de classe, donc ce n'est pas étonnant que la fonction ne trouve pas d'élément à traiter.

**sam01** · 08/12/2010, 22h42

Bonsoir Bovino,

mais mes images ont bien une classe :

class="img_142"...

Effet d'image fondu et selection de plusieurs répertoires

JavaScript

Discussions similaires

Partager

Partager