(onclick pour 2 evenements) + onload function

**ditow** · 12/11/2010, 06h58

Bonjour,
Je fais un site pour une amie par plaisir d'apprendre (je suis styliste dans la vraie vie) donc les termes employés dans le titre ne sont peu-être pas exacts...Pardonnez moi.

Voila mon problème.

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
<html>
<head>
<style type="text/css">
<!--
 
#accueuil {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -125px;
 margin-left: -125px;
 height: 250px;
 width: 250px;
}
-->
</style>
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function sceau(){
	new Effect.Opacity('principal',
 {from: 0, to: 1, duration: 2 });
}
-->
</script>
</head>
	<body>
		<?php include 'site.html'; ?>
		<input type="image" img id="accueuil" src="images/accueuil.jpg" onclick="sceau();" onmouseup="new Effect.Opacity('accueuil', {from: 1, to: 0, duration: 2 });"/>		  
 
	</body>
</html>

Ce code fonctionne... Mais l'image qui apparait, apparait en même temps que l'autre disparrait, alors que je souhaiterais faire disparraitre l'image puis faire apparaitre la div contenu dans site.html.

J'ai essayer queue, afterfinish... mais ca ne marchait pas.... Si quelqu'un avait une idée.
merci beaucoup.
ditow

**gwyohm** · 12/11/2010, 13h03

Bonjour, et bienvenue sur le forum.

Tu passes par les événements click et mouseup pour essayer d'ordonner les effets de disparition / apparition ?

Je serai plutôt passé par l'option afterFinish :

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
 
function sceau() {
  new Effect.Opacity('accueuil', {
    from: 1, 
    to: 0, 
    duration: 2, 
    afterFinish: function() {
      new Effect.Opacity('principal', {
        from: 0, 
        to: 1, 
        duration: 2 
      });
    } 
  });
}

Qui peut s'écrire aussi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function sceau() {
  $('accueil').fade({
    duration: 2, 
    afterFinish: function(){
      $('principal').appear({
        duration: 2
      });
    }
  });
}

**ditow** · 12/11/2010, 20h25

Et bien merci milles fois, une seule réponse et c'est réglé... Parfait.
J'en profite pour poster une dernière question:

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
<html>
<head>
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript">
<!--
function prechargement() {
	var image = new Image();
	image.onload = fadein() {
  	new Effect.Opacity('accueuil', {
    from: 0, 
    to: 1, 
    duration: 2, 
    });
	}
	image.src = "images/accueuil.jpg";	
	}
-->
</script>
<script type="text/javascript">
<!--
function sceau() {
  new Effect.Opacity('accueuil', {
    from: 1, 
    to: 0, 
    duration: 2, 
    afterFinish: function() {
      new Effect.Opacity('principal', {
        from: 0, 
        to: 1, 
        duration: 2 
      });
    } 
  });
}
 
-->
</script>
<style type="text/css">
<!--
 
#accueuil {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -125px;
 margin-left: -125px;
 height: 250px;
 width: 250px;
 opacity:0.0;
}
-->
</style>
</head>
	<body onload="fadein()";>
		<?php include 'site.html'; ?>
		<input type="image" img id="accueuil" src="images/accueuil.jpg" onclick="sceau();" />		  
 
	</body>
</html>

j'essaye donc de précharger l'image "accueuil.jpg" (sinon elle s'affiche en plusieurs temps, c'est assez moche...) et une fois son chargement effectuer, la rendre visible en faisant changer l'opacité...

...ça ne marche pas... l'image reste en opacité 0.0

une idée?

**gwyohm** · 13/11/2010, 16h05

Envoyé par ditow

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
 
<!--
function prechargement() {
	var image = new Image();
	image.onload = fadein() {
  	  new Effect.Opacity('accueuil', {
            from: 0, 
            to: 1, 
            duration: 2, 
          });
	}
	image.src = "images/accueuil.jpg";	
}
-->
</script>

...ça ne marche pas... l'image reste en opacité 0.0
une idée?

Oui, ta syntaxe n'est pas bonne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function prechargement() {
	var image = new Image();
	image.onload = function() {
  	  new Effect.Opacity('accueuil', {
            from: 0, 
            to: 1, 
            duration: 2, 
          });
	};
	image.src = "images/accueuil.jpg";	
}

**ditow** · 13/11/2010, 20h30

Merci beaucoup, c'est corrigé, mais ça ne marche toujours pas... Tout marche sauf cette image (accueil.jpg) qui reste en opacité 0 même une fois chargée...

**gwyohm** · 14/11/2010, 13h45

Bonjour,

Il faut que sur le onload du body tu appeles prechargement() et non fadein...

sinon, tu peux nous montrer le code généré global de la page

**ditow** · 14/11/2010, 20h47

bonnour, oui j'ai bien corrigé aussi pour le onload... mais ca ne fonctionne pas.. c'est quoi le code généré?

**gwyohm** · 14/11/2010, 23h54

Envoyé par ditow

c'est quoi le code généré?

Sur ton navigateur, click droit / voir le code source

**ditow** · 15/11/2010, 05h05

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<html>
<head>
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function prechargement() {
	var image = new Image();
	image.onload = function() {
  	  new Effect.Opacity('accueuil', {
            from: 0, 
            to: 1, 
            duration: 2, 
          });
	};
	image.src = "images/accueuil.jpg";	
}
-->
</script>
<script type="text/javascript">
<!--
function sceau() {
  new Effect.Opacity('accueuil', {
    from: 1, 
    to: 0, 
    duration: 2, 
    afterFinish: function() {
      new Effect.Opacity('principal', {
        from: 0, 
        to: 1, 
        duration: 2 
      });
    } 
  });
}
 
-->
</script>
<style type="text/css">
<!--
 
#accueuil {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -125px;
 margin-left: -125px;
 height: 250px;
 width: 250px;
}
-->
</style>
</head>
	<body onload="prechargement()";>
		<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
 
<title>LUCILE MAISEAU</title>
<link href="css/style.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/reset.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/gallery.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/slideflow.css" media="all" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/slideflow/slideflow.js"></script>
<script type="text/javascript" src="js/slideflow/slider.js"></script>
<script type="text/javascript" src="js/slideflow/scrolling.js"></script>
<script type="text/javascript" src="js/xmlparser/xmlparser.js"></script>
<!--[if lte IE 6]>
	<script type="text/javascript" src="js/ie6fix/ie6fix.js"></script>
<![endif]-->
<script type="text/javascript">
<!--
var numPhotos;
var slideFlowSlider;
var slideFlow;
var currentImg;
var preloader;
var fadeInTimeout;
var scrollHandler;
var photos;
var currentEffect;
var slHover;
 
var SLIDE_TPL = {
	'b_vertical' : false, 'b_watch': true	/* update while dragging */, 'n_controlWidth': 300, 'n_controlHeight': 7,
	'n_sliderWidth': 14, 'n_sliderHeight': 7, 'n_pathLeft' : 0, 'n_pathTop' : 0, 'n_pathLength' : 300-14, 'n_zIndex': 1
}
 
var SLIDE_INIT = {
	'n_minValue' : 0, 'n_maxValue' : 100, 'n_value' : 0, 'n_step' : 1
}
 
var SLIDEFLOW_DATA = {
	'imgWidthNormal': 100, 'imgWidthTilted': 75, 'imgHeight': 90, 'slideDistance': 10,
	'onCenterClick': handleSlideClick, 'handleSlideMove': handleSlideMove, 'containerElement': null,
	'pathLeft': 'photos/left', 'pathCenter': 'photos/center', 'pathRight': 'photos/right',
	'transparentImg': 'images/transparent.gif', 'cursorOpenHand': 'images/openhand.cur', 'cursorClosedHand': 'images/closedhand.cur'
}
 
function handleSlideMove(pos) {
	if (slideFlowSlider)
		slideFlowSlider.f_setValue(pos, false, true /* kein update */);
}
 
function handleSlideClick(imgNumber) {
	swapPhoto(imgNumber);
}
 
function handleSlideSeek(pos) {
	slideFlow.disableMoveUpdate();
	slideFlow.glideToPerc(pos);
}
 
function swapPhoto(photoNumber) {
    /* Preload */
    var imgSrc = 'photos/large/'+ photos.item(photoNumber - 1).getElementsByTagName("src")[0].childNodes[0].nodeValue;
    var wasPreloading = (preloader != undefined);
    preloader = new Image;
    preloader.src = imgSrc;
    currentImg = photoNumber;
 
    /* Fade out and show new photo */
    if (!wasPreloading) {
		if (currentEffect && currentEffect.state != 'finished')
			currentEffect.cancel();
 
    	currentEffect = new Effect.Fade($('fadeArea'), { duration:0.4, to: 0.001, afterFinish: fadeIn });
    }
}
 
function skipPhoto(offset) {
	photoNumber = currentImg + offset;
	if (photoNumber < 1 || photoNumber > numPhotos)
		return;
 
	swapPhoto(photoNumber);
	slideFlow.glideToSlide(photoNumber);
}
 
function fadeIn() {
	fadeInTimeout = null;
 
	if (!preloader)
		return;
	else if (preloader.complete) {
		if (currentEffect && currentEffect.state != 'finished')
			currentEffect.cancel();
	    currentEffect = new Effect.Appear($('fadeArea'), {duration: 0.8, beforeSetup: function(effect) {
		$('photo').src = preloader.src;
		$('title').innerHTML = photos.item(currentImg - 1).getElementsByTagName("title")[0].childNodes[0].nodeValue;
		$('subtitle').innerHTML = photos.item(currentImg - 1).getElementsByTagName("subtitle")[0].childNodes[0].nodeValue;
		preloader = undefined;
	      }});
	} else if (!fadeInTimeout) {
		fadeInTimeout = window.setTimeout("fadeIn()", 100);
	}
}
 
function handleWheel(delta) {
	if (slideFlow)
		slideFlow.scroll(delta);
}
 
function handleKeys(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
    	//debugLog("key " + evt.keyCode);
		switch (evt.keyCode) {
			case 40: /* down */
			case 39: /* right */
				skipPhoto(1);
				return false;
				break;
			case 38: /* up */
			case 37: /* left */
				skipPhoto(-1);
				return false;
				break;
		 }
    }
}
 
function init() {
	swapPhoto(1);
	slideFlowSlider.f_show();
	document.onkeydown = handleKeys;
	scrollHandler = new ScrollHandler(handleWheel);
 
	/* Preload slider hover */
	slHover = new Image;
	slHover.src = "images/seekslider-hover.gif";	
 
	/* IE6 hover fix */
	if (window.ieFixHover) {
		 $$('.sliderbutton').each(ieFixHover);
	}
}
 
// -->
</script>
</head>
<body onload="init();">
<div id="principal">
<div id="frame">
  <div id="fadeArea">
    <div id="wrapper"><img id="photo" src="images/transparent.gif"/></div>
    <h5 id="title"></br>&nbsp;</h5>
    <h6 id="subtitle">&nbsp;</h6>
  </div></br></br></div></br></br>
  <div id="navigation" ondragstart="return false" onselectstart="return true">
		<a href="http://"adresse en clair" class="menu">IDENTITE VISUELLE&nbsp;</a>    	
		<a href="http://"adresse en clair" class="menu">COMMUNICATION PAPIER&nbsp;</a>    
		<a href="http://"adresse en clair" class="menu">ILLUSTRATION</a>
    <div id="slideflow">
      <script type="text/javascript">
			<!--
				httpReq = getHttpReq();
 
				if (httpReq) {
					xmlDoc = getXmlDoc(httpReq, "photos.xml");
 
					if (xmlDoc) {
						photos = xmlDoc.getElementsByTagName("photo");
 
						SLIDEFLOW_DATA['containerElement'] = $('slideflow');
 
						SLIDEFLOW_DATA['images'] = new Array();
 
						for (var i=0; i < photos.length; i++) {
							SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
						}
 
						slideFlow = new Slideflow(SLIDEFLOW_DATA);
						numPhotos = photos.length;
					}
				}
			//-->
			</script>
    </div></br>
     <div id="footer"><p style="font-size:10px; font-family: Walkway,AppleGothic,Lucida Grande,Verdana,Arial,Sans-Serif; color: #929392; letter-spacing: 0.1em;">CONTACTS&nbsp;&nbsp;&nbsp;+33 (0)6 15 10 14 11&nbsp;&nbsp;&nbsp;LUCILE.MAISEAU@GMAIL.COM&nbsp;&nbsp;&nbsp;WWW.LUCILEMAISEAU.COM&nbsp;&nbsp;&nbsp;N SIRET 512 699 372 0011&nbsp;&nbsp;&nbsp;PARIS</p></div>
  </div>
 </div>
 </div>
</body>
 
</html>		<input type="image" img id="accueuil" src="images/accueuil.jpg" onclick="sceau();" />		  
 
	</body>
</html>

le voila! Merci encore de m'aider

**gwyohm** · 15/11/2010, 09h34

Salut,

Dans le source que tu donnes, il y a 2 body, le premier contenant un 2ème tag html contenant lui même un body...

Il faut que tu commences par rendre ton html valide

**RomainVALERI** · 16/11/2010, 12h11

En survolant votre conversation, j'ai cru un instant qu'il y avait également (en plus des remarques très justes de gwyohm ^^) une confusion à cause de la faute d'orthographe à accueil écrit comme ceci : accueuil

... mais la faute est partout donc ce n'est pas "le" problème

**Bovino** · 16/11/2010, 12h42

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function prechargement() {
	var image = new Image();
	image.onload = function() {
  	  new Effect.Opacity('accueuil', {
            from: 0, 
            to: 1, 
            duration: 2, 
          });
	};
	image.src = "images/accueuil.jpg";	
}

C'est bien de vouloir faire apparaitre une image, mais à quel moment est-elle intégrée dans la page ?

**gwyohm** · 16/11/2010, 15h16

Envoyé par Bovino

C'est bien de vouloir faire apparaitre une image, mais à quel moment est-elle intégrée dans la page ?

L'élément d'id accueuil est un input d'ailleurs il a un attribut img invalide...

Je pense que l'idée de base de ditow est de faire un chargement de l'image puis de compter sur le cache navigateur pour afficher l'element accueuil qui utilise la même ressource ...

**ditow** · 18/11/2010, 01h17

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
<html>
<head>
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function prechargement() {
	var image = new Image();
	image.onload = function() {
  	  new Effect.Opacity('accueuil', {
            from: 0, 
            to: 1, 
            duration: 2, 
          });
	};
	image.src = "images/accueuil.jpg";	
}
-->
</script>
<script type="text/javascript">
<!--
function sceau() {
  new Effect.Opacity('accueuil', {
    from: 1, 
    to: 0, 
    duration: 2, 
    afterFinish: function() {
      new Effect.Opacity('principal', {
        from: 0, 
        to: 1, 
        duration: 2 
      });
    } 
  });
}
 
-->
</script>
<style type="text/css">
<!--
 
#accueuil {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -125px;
 margin-left: -125px;
 height: 250px;
 width: 250px;
}
-->
</style>
</head>
	<body onload="prechargement()";>
		<?php include 'site.html'; ?>
		<input type="image" img id="accueuil" src="images/accueuil.jpg" onclick="sceau();" />		  
 
	</body>
</html>

Voila, je ne comprend pas toutes vos remarques (mis à part la remarque au sujet de l'orthographe de accueil...)
Je donne le code de ma page index.php, l'image est intégrée normalement il me semble... enfin voila...

Mon but est: quand on arrive sur le site, une image apparait en fade in, je veux pas qu'elle apparaisse au fur et a mesure du chargement (en sacadée quoi)

www.lucilemaiseau.com voila le site pour vous donnez une idée...
le problème de "body" vient sans doute du fait que j'utile un include d'une page qui en contient un body aussi... mais la ça va largement au dessus de mes compétence d'intégrée les deux pages en une seule... Je vous donne le code le l'autre page:

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
 
<title>LUCILE MAISEAU</title>
<link href="css/style.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/reset.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/gallery.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/slideflow.css" media="all" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/slideflow/slideflow.js"></script>
<script type="text/javascript" src="js/slideflow/slider.js"></script>
<script type="text/javascript" src="js/slideflow/scrolling.js"></script>
<script type="text/javascript" src="js/xmlparser/xmlparser.js"></script>
<!--[if lte IE 6]>
	<script type="text/javascript" src="js/ie6fix/ie6fix.js"></script>
<![endif]-->
<script type="text/javascript">
<!--
var numPhotos;
var slideFlowSlider;
var slideFlow;
var currentImg;
var preloader;
var fadeInTimeout;
var scrollHandler;
var photos;
var currentEffect;
var slHover;
 
var SLIDE_TPL = {
	'b_vertical' : false, 'b_watch': true	/* update while dragging */, 'n_controlWidth': 300, 'n_controlHeight': 7,
	'n_sliderWidth': 14, 'n_sliderHeight': 7, 'n_pathLeft' : 0, 'n_pathTop' : 0, 'n_pathLength' : 300-14, 'n_zIndex': 1
}
 
var SLIDE_INIT = {
	'n_minValue' : 0, 'n_maxValue' : 100, 'n_value' : 0, 'n_step' : 1
}
 
var SLIDEFLOW_DATA = {
	'imgWidthNormal': 100, 'imgWidthTilted': 75, 'imgHeight': 90, 'slideDistance': 10,
	'onCenterClick': handleSlideClick, 'handleSlideMove': handleSlideMove, 'containerElement': null,
	'pathLeft': 'photos/left', 'pathCenter': 'photos/center', 'pathRight': 'photos/right',
	'transparentImg': 'images/transparent.gif', 'cursorOpenHand': 'images/openhand.cur', 'cursorClosedHand': 'images/closedhand.cur'
}
 
function handleSlideMove(pos) {
	if (slideFlowSlider)
		slideFlowSlider.f_setValue(pos, false, true /* kein update */);
}
 
function handleSlideClick(imgNumber) {
	swapPhoto(imgNumber);
}
 
function handleSlideSeek(pos) {
	slideFlow.disableMoveUpdate();
	slideFlow.glideToPerc(pos);
}
 
function swapPhoto(photoNumber) {
    /* Preload */
    var imgSrc = 'photos/large/'+ photos.item(photoNumber - 1).getElementsByTagName("src")[0].childNodes[0].nodeValue;
    var wasPreloading = (preloader != undefined);
    preloader = new Image;
    preloader.src = imgSrc;
    currentImg = photoNumber;
 
    /* Fade out and show new photo */
    if (!wasPreloading) {
		if (currentEffect && currentEffect.state != 'finished')
			currentEffect.cancel();
 
    	currentEffect = new Effect.Fade($('fadeArea'), { duration:0.4, to: 0.001, afterFinish: fadeIn });
    }
}
 
function skipPhoto(offset) {
	photoNumber = currentImg + offset;
	if (photoNumber < 1 || photoNumber > numPhotos)
		return;
 
	swapPhoto(photoNumber);
	slideFlow.glideToSlide(photoNumber);
}
 
function fadeIn() {
	fadeInTimeout = null;
 
	if (!preloader)
		return;
	else if (preloader.complete) {
		if (currentEffect && currentEffect.state != 'finished')
			currentEffect.cancel();
	    currentEffect = new Effect.Appear($('fadeArea'), {duration: 0.8, beforeSetup: function(effect) {
		$('photo').src = preloader.src;
		$('title').innerHTML = photos.item(currentImg - 1).getElementsByTagName("title")[0].childNodes[0].nodeValue;
		$('subtitle').innerHTML = photos.item(currentImg - 1).getElementsByTagName("subtitle")[0].childNodes[0].nodeValue;
		preloader = undefined;
	      }});
	} else if (!fadeInTimeout) {
		fadeInTimeout = window.setTimeout("fadeIn()", 100);
	}
}
 
function handleWheel(delta) {
	if (slideFlow)
		slideFlow.scroll(delta);
}
 
function handleKeys(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
    	//debugLog("key " + evt.keyCode);
		switch (evt.keyCode) {
			case 40: /* down */
			case 39: /* right */
				skipPhoto(1);
				return false;
				break;
			case 38: /* up */
			case 37: /* left */
				skipPhoto(-1);
				return false;
				break;
		 }
    }
}
 
function init() {
	swapPhoto(1);
	slideFlowSlider.f_show();
	document.onkeydown = handleKeys;
	scrollHandler = new ScrollHandler(handleWheel);
 
	/* Preload slider hover */
	slHover = new Image;
	slHover.src = "images/seekslider-hover.gif";	
 
	/* IE6 hover fix */
	if (window.ieFixHover) {
		 $$('.sliderbutton').each(ieFixHover);
	}
}
 
// -->
</script>
</head>
<body onload="init();">
<div id="principal">
<div id="frame">
  <div id="fadeArea">
    <div id="wrapper"><img id="photo" src="images/transparent.gif"/></div>
    <h5 id="title"></br>&nbsp;</h5>
    <h6 id="subtitle">&nbsp;</h6>
  </div></br></br></div></br></br>
  <div id="navigation" ondragstart="return false" onselectstart="return true">
		<a href="http://"adresse en clair" class="menu">IDENTITE VISUELLE&nbsp;</a>    	
		<a href="http://"adresse en clair" class="menu">COMMUNICATION PAPIER&nbsp;</a>    
		<a href="http://"adresse en clair" class="menu">ILLUSTRATION</a>
    <div id="slideflow">
      <script type="text/javascript">
			<!--
				httpReq = getHttpReq();
 
				if (httpReq) {
					xmlDoc = getXmlDoc(httpReq, "photos.xml");
 
					if (xmlDoc) {
						photos = xmlDoc.getElementsByTagName("photo");
 
						SLIDEFLOW_DATA['containerElement'] = $('slideflow');
 
						SLIDEFLOW_DATA['images'] = new Array();
 
						for (var i=0; i < photos.length; i++) {
							SLIDEFLOW_DATA['images'][i] = photos.item(i).getElementsByTagName("src")[0].childNodes[0].nodeValue;
						}
 
						slideFlow = new Slideflow(SLIDEFLOW_DATA);
						numPhotos = photos.length;
					}
				}
			//-->
			</script>
    </div></br>
     <div id="footer"><p style="font-size:10px; font-family: Walkway,AppleGothic,Lucida Grande,Verdana,Arial,Sans-Serif; color: #929392; letter-spacing: 0.1em;">CONTACTS&nbsp;&nbsp;&nbsp;+33 (0)6 15 10 14 11&nbsp;&nbsp;&nbsp;LUCILE.MAISEAU@GMAIL.COM&nbsp;&nbsp;&nbsp;WWW.LUCILEMAISEAU.COM&nbsp;&nbsp;&nbsp;N SIRET 512 699 372 0011&nbsp;&nbsp;&nbsp;PARIS</p></div>
  </div>
 </div>
 </div>
</body>
 
</html>

voila... merci bien
ditow

**gwyohm** · 18/11/2010, 09h43

Envoyé par ditow

le problème de "body" vient sans doute du fait que j'utile un include d'une page qui en contient un body aussi... mais la ça va largement au dessus de mes compétence d'intégrée les deux pages en une seule...

C'est pourtant un point que tu devras corrigé.

Pour tester le comportement en mode "normal", peux-tu temporairement supprimer l'include et supprimer les éléments que j'ai surligné en rouge ? et ajouter ceux en vert ?

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
<html>
<head>
<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function prechargement() {
	var image = new Image();
	image.onload = function() {
  	  new Effect.Opacity('accueuil', {
            from: 0, 
            to: 1, 
            duration: 2, 
          });
	};
	image.src = "images/accueuil.jpg";	
}
//-->
</script>
<script type="text/javascript">
<!--
function sceau() {
  new Effect.Opacity('accueuil', {
    from: 1, 
    to: 0, 
    duration: 2, 
    afterFinish: function() {
      new Effect.Opacity('principal', {
        from: 0, 
        to: 1, 
        duration: 2 
      });
    } 
  });
}
 
//-->
</script>
<style type="text/css">
<!--
 
#accueuil {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -125px;
 margin-left: -125px;
 height: 250px;
 width: 250px;
}
-->
</style>
</head>
	<body onload="prechargement()";>
		<?php include 'site.html'; ?>
		<input type="image" img id="accueuil" src="images/accueuil.jpg" onclick="sceau();" />		  
		
	</body>
</html>

Pourquoi utiliser un input image et pas directement une image ?

**ditow** · 18/11/2010, 13h42

Alors en suivant tes indications ( supprimer et rajouter les choses), ça marche bien.

En revanche dès que je rajoute le include ça ne fonctionne plus... Pour le input, absolument aucune idée... les exemple de code que j'ai trouver fonctionnait avec un boutonqui commandai la fonction fade... j'ai garder le input pensant que c'était nécéssaire...visiblement non...

**gwyohm** · 19/11/2010, 09h50

Envoyé par ditow

Pour le input, absolument aucune idée... les exemple de code que j'ai trouver fonctionnait avec un bouton ...

Pour ce qui est de l'input image, tu peux remplacer par

Code :

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

1
2
 
<img id="accueuil" src="images/accueuil.jpg" onclick="sceau();"/>

Pour ce qui est de ton include php,
Il n'y a malheureusement pas 36 solutions, il faut que tu arrives à ne renvoyer qu'un body...

**ditow** · 19/11/2010, 14h08

Ouai c'est ce que j'avais fait pour le input...
Tu penses que c'est le fait qu'il y ai 2 body qui empeche le fade in sur l'image accueil?

**gwyohm** · 19/11/2010, 14h32

oui, je pense que le navigateur n'enregistre qu'un seul des onload, donc ta fonction de prechargement ne doit pas se lancer... De toutes façons, c'est mieux de n'avoir qu'un body(de même que pour les noeuds html et head)

**ditow** · 20/11/2010, 20h58

Bien, et bien j'ai réussi à régler mon problème en mettant tout sur une seule page (je n'ai donc plus deux body etc...) et tout simplement en mettant <body onload="init() ; prechargement";>

voila.. merci encore mille fois.
ditow

(onclick pour 2 evenements) + onload function

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager