Changement de background image avec Mootools

Version imprimable

27/03/2011, 23h20
tikoad

Changement de background image avec Mootools

Bonjour,

J'ai besoin d'aide pour faire un background image qui change toute les 30 seconde. J'ai trouvé ca http://stackoverflow.com/questions/9...ffect-mootools. Le problème c'est que je ne sais pas comment mettre ca en forme. comment spécifier le chemin vers les images, ou mettre la fonction. bref, j'y comprend rien...

Merci pour votre aide

Je détaille mon problème:

Voici le code de ma page:

Code:

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="mootools-core-1.3.1-full-compat.js"></script>
  <style type="text/css">
  body {
    background-color: #d8da3d; }
  #main {
  border:#333333 solid 1px;
  width:500px;
  height:300px;
  }
  </style>
</head>
 
<body>
<div id="main">
  <p>&nbsp;</p>
  <p>Titre du site
  </p>
</div> 
		<script type="text/javascript">
                        
function backgroundChange(pBackground)
{
    var m = $('main');
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){ 
                m.setStyle('background-image','url(' + pBackground + ')');
                m.fade('in');
        }
    });
    fx.start('opacity',1,0);
}
 
                </script>
 
 
</body>
</html>

Est-ce que mon code est ok jusqu'ici ?
Comment est-ce que je dois nommer mes images de background ? En quel format ? Et à quel endroit ?

Merci.

28/03/2011, 12h56
vermine
Bonjour,

Cette fonction devra être appelée tous les x temps. Là vous avez la fonction pour changer l'image, mais une seule fois.

Les images, vous les placez où vous voulez tant que vous passez la bonne information lors de l'appel de la fonction :

Code:

backgroundChange(pBackground)

pBackground doit contenir le chemin de l'image, comme par exemple :
Code:

1 2 3 4 5 backgroundChange('/images/image1.jpg'); backgroundChange('/images/autreChemin/image2.png'); backgroundChange('/images/image3.jpg'); //...
28/03/2011, 14h11
tikoad

Ok
Comment j'appelle ma fonction tout les x temps?
28/03/2011, 14h21
tikoad

Par contre je m’aperçois d'un autre problème. pendant la transition, c'est tout ma div "main" qui disparait. pas uniquement le background!

Pour régler le problème de la "disparition" des éléments de la <div> lors du changement d'images, j'ai utilisé le z-index qui nécessite une position. J'ai donc rajouté une seconde <div> :

Code:

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
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="mootools-core-1.3.1-full-compat.js"></script>
<style type="text/css">
  #test {
  position:absolute;
  z-index:2;
  }
  
  #main {
  position:absolute;
  z-index:1;
  background-image: url('monImage.jpg');
  border:#333333 solid 1px;
  width:500px;
  height:300px;
  }
</style>
</head>
 
<body>
<div id="main">
 
</div> 
	<div id="test"> 
  <p>&nbsp;</p>
  <p>Titre du site</p>
</div>
 
<script type="text/javascript">
                        
function backgroundChange(pBackground)
{
    var m = $('main');
 
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){ 
                m.setStyle('background-image','url(' + pBackground + ')');
                m.fade('in');
        }
    });
    fx.start('opacity',1,0);
}       
</script>
 
 
</body>
</html>

Pour appeler la fonction tous les x temps, il faut regarder du côté de la fonction periodical.

Voici un exemple un peu plus complet :

Code:

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
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="mootools-core-1.3.1-full-compat.js"></script>
<script type="text/javascript">
window.addEvent( 'domready', function(){
     backgroundChange.periodical(4000);
} );
</script>
<style type="text/css">
  #test {
  position:absolute;
  z-index:2;
  }
  
  #main {
  position:absolute;
  z-index:1;
  background-image:     url('s.jpg');
  border:#333333 solid 1px;
  width:500px;
  height:300px;
  }
</style>
</head>
 
<body>
<div id="main">
 
</div> 
	<div id="test"> 
  <p>&nbsp;</p>
  <p>Titre du site</p>
</div>
 
<script type="text/javascript">
var tab_images = new Array ("b.jpg","s.jpg","b.jpg","s.jpg");   
var i = 0;
 
function backgroundChange()
{
    var m = $('main');
 
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){ 
                     
                      if(i == 4)
                        i = 0;
                    
                m.setStyle('background-image','url('+tab_images[i]+')');
                m.fade('in');
                
                i++;
        }
    });
    fx.start('opacity',1,0.2);
}       
 
</script>
 
 
</body>
</html>

Donc, il y a toujours cette histoire de z-index et de position:absolute dans les css, et maintenant il y a la notion de periodical.

Je lance la fonction tous les x temps. J'ai précisé 4 secondes (4000) :

Code:

backgroundChange.periodical(4000);

J'ai enlevé l'argument de la fonction et l'ai transformé en tableau global dans lequel je mets le chemin de mes images :

Code:

1
2
 
var tab_images = new Array ("b.jpg","s.jpg","b.jpg","s.jpg");

Pour aller d'une image à une autre, je rajoute une petite vérification selon la taille du tableau (ici 4) et j'appelle la bonne cellule du tableau via une variable que j'incrémente à chaque passage :

Code:

1
2
3
4
5
6
7
8
 
if(i == 4)
    i = 0;
 
m.setStyle('background-image','url('+tab_images[i]+')');
m.fade('in');
 
i++;