Fichier .swf en fond

Version imprimable

10/08/2013, 12h31
asphax

Fichier .swf en fond

Bonjour,

j'ai une page web avec en fond une image en .png dans cette image il y a une partie qui est transparente et je souhaiterais mettre derrière cette partie une animation en flash pour qu'elle se voit uniquement au travers de cette partie si quelqu'un pourrait me donner la marche à suivre merci d'avance :ccool:
12/08/2013, 17h08
bob633

Montre déjà ton code voir comment tu as ajouté ton arrière plan dans ta page principale.

Sinon le z-index devrait t'aider :ccool:

Suffit de superposer deux div avec cette propriété et ça devrait être bon.

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
<!doctype html>
<html>
 
 
<head>
 
<meta charset="UTF-8">		
  <title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
 
</head>
 
<div class="ripple"></div>
 
<body>
 
 
 
<div id="flashTrip"></div>
 
<img src="images/bouton1.png" onclick="loadTrip('789');" alt="cliquez moi" title="cliquez moi"  id="img1" />
 
 
 
<script>
 
function loadTrip(nomDeAnimation)
{
 
   document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="right" data="http://www.play-the-ga.me/789.swf" width="400px" height="450px" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>';
 
}
 
</script>
 
 
 
</body>
</html>

voilà mon code html

13/08/2013, 16h16
bob633

et ton css ? :roll:
13/08/2013, 18h53
shores

bonsoir c'est quelque chose qui m' intéresse aussi j'attends de voir la réponse

Voilà le css

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
body {
 
font-size: 10pt;
background-image: url("http://www.play-the-ga.me/images/8556.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-color: white;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
}
 
#img1 {
   position:relative;
  top:490px;
  left:1080px;
 
}
 
h1 {
 
}
.ripple,.ripple:before,.ripple:after {
  display:block;
  border-radius:2px;
  width:2px;
  height:2px;
  -webkit-animation:rip 10s 1;
  -moz-animation:rip 10s 1;
}
.ripple {
  position:absolute;
  z-index:-1;
  top:420px;
  left:400px;
}
.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}
.ripple:before {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;}
@-webkit-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 40px 300px transparent,
               0 0 10px 310px transparent,
               0 0 30px 320px transparent,
               0 0 5px 330px transparent;
  }
}
@-moz-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 40px 300px transparent,
               0 0 10px 310px transparent,
               0 0 30px 320px transparent,
               0 0 5px 330px transparent;
  }