Changement de background image avec Mootools

**tikoad** · 27/03/2011, 22h20

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

**tikoad** · 28/03/2011, 10h47

Je détaille mon problème:

Voici le code de ma page:

Code html :

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

**vermine** · 28/03/2011, 11h56

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 :

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

backgroundChange(pBackground)

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

Code :

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

1
2
3
4
5
 
backgroundChange('/images/image1.jpg');
backgroundChange('/images/autreChemin/image2.png');
backgroundChange('/images/image3.jpg');
//...

**tikoad** · 28/03/2011, 13h11

Ok
Comment j'appelle ma fonction tout les x temps?

**tikoad** · 28/03/2011, 13h21

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!

**vermine** · 28/03/2011, 20h39

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 html :

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

**vermine** · 29/03/2011, 15h15

Voici un exemple un peu plus complet :

Code html :

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
 
<!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 :

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

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 :

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

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 :

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

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++;

Changement de background image avec Mootools

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager