mettre un swf dans une iframe dans une page html

Version imprimable

Bonjour,

J'ai un fichier swf qui n'est pas de moi (c'est le carousel flshow, il ne fournit pas le .fla alors je ne peux pas le couper moi-même). La hauteur est de 500px trop haute pour mon site, et je ne veux pas écrire 400px dans le html puisque l'animation devient trop petite. Donc j'ai pensé à mettre ce swf dans une iframe de 400px pour qu'elle puisque cacher ce qu'il y a en trop sans rapetisser l'animation. Es-ce possible? Ceci est le code à mettre dans le html:
Code:

1 2 3 4 5 6 7 8 9 <div style="position:absolute; top: 0px; left: 0px;"> <div id="carousel1"> <p>This slideshow requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (or higher). JavaScript must be enabled.</p> </div> </div> <script type="text/javascript"> swfobject.embedSWF("Carousel.swf", "carousel1", "750", "500", "9.0.0", false, {xmlfile:"default.xml", loaderColor:"0xCCCCCC"}); </script>
Comment puis-je mettre ce code dans une iframe?

Merci

16/03/2011, 13h04
Loceka

Pourquoi dans une iframe et pas dans un div de taille fixe avec un overflow hidden ?

Comme ceci? :

Code:

1
2
3
4
5
<div style="position:absolute; top: -100px; left: 0px; width: 750px; 400px; overflow: hidden;">
	<div id="carousel1">
		<p>This slideshow requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (or higher). JavaScript must be enabled.</p>
	</div>
</div>

La partie de 100px qui dépasse n'est pas cachée. Et j'essaie de mettre des images par-dessus la partie qui est supposée être cachée, et les images ne veulent pas se positionner par-dessus mais à l'extérieur de mon conteneur.

Voici mon code 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
		<title>Mégan Online</title>
 
        <script type="text/javascript" src="swfobject.js"></script>
 
		<style type="text/css">
                        html, body {
                                font: 12pt Georgia, Times, serif;
                                color: white;
                                background-color: black;
                                background-image: url('bg.jpg');
                                background-repeat: no-repeat;
                                background-position:  50% 0%;
} 
 
 
.carousel_container 
{
position:absolute;
left: 50%;
width: 750px;
height: 445px;
margin: 245px auto 0;
margin-left: -375px; /* moitie de la largeur */
border: none;
background-color: black;
} 
a{outline: none;}
:focus{-moz-outline-style: none;}
</STYLE>
        </head>
 
<body>
 
 
<div class="carousel_container">
 
 
<div style="position:absolute; top: -100px; left: 0px; width: 750px; 400px; overflow: hidden;">
        <div id="carousel1">
                <p>This slideshow requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (or higher). JavaScript must be enabled.</p>
        </div>
</div>
 
<script type="text/javascript">
        swfobject.embedSWF("Carousel.swf", "carousel1", "750", "500", "9.0.0", false, {xmlfile:"default.xml", loaderColor:"0xCCCCCC"});
</script>
 
<div id="bout"><IMG SRC="bout1.jpg" style="position:absolute; top:0px; left:0px;"></div>
 
<div id="bout2"><IMG SRC="bout2.jpg" style="position:absolute; top:0px; left:750px;"></div>
 
 
</div>
</body>
</html>

16/04/2011, 02h58
petitevero

Ok ça fonctionne! Il fallait que je mette le overflow hidden dans le css du container et non dans le div.

Cool! Merci!