(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

(onclick pour 2 evenements) + onload function

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager