i forgot to mention, the above revised code is assuming that you already know to use layering method (z-index) to lay your HTML over the flash background. that means flash background with a lower z-index number and the rest of content on top with higher z-index number. you can accomplish all this in CSS to avoid the messiness, but i am sure you already know that.
On Jan 4, 1:41 pm, Howard <[email protected]> wrote: > i found the answer to my own question. instead of being a dick and > leave, i'll post the solution here, hopefully it'll be helpful for > those who run into the same problem. apparently this is a farely wide > spread problem people run into. and no where within SWFobject java has > mentioned any of the how-to for embedding flash as background. > > <!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>Aquaflex</title> > <link href="style.css" rel="stylesheet" type="text/css"/> > <script type="text/javascript" src="scripts/swfobject.js"></script> > <script type="text/javascript" src="scripts/swffit.js"></script> > <script type="text/javascript"> > var flashvars = {}; > var params = {}; > params.play = "true"; > params.scale = "showall"; > params.salign = "t"; > params.wmode = "opaque"; > > params.allowfullscreen = "true"; > params.allowscriptaccess = "always"; > var attributes = {}; > attributes.id = "flashContent"; > attributes.align = "middle"; > swfobject.embedSWF("flash/slide_show_bg.swf", > "flashContent", > "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, > attributes); > params.wmode = "opaque"; > > swffit.fit("flashContent",800,480); > > </script> > > <div id="flashContent"> > <h1>Please Install Flash</h1> > <p><a > href="http://www.adobe.com/go/getflashplayer";><img > src="http://www.adobe.com/images/shared/download_buttons/ > get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> > </div> > > </head> > > <body> > > <div id="content"> > <h4>This is a sample text</h4> > </div> > > </body> > </html> > > On Jan 4, 11:26 am, Howard <[email protected]> wrote: > > > > > i've been trying to do this for the past few days, i know it's doable > > because i've seen other webpages do this. but i just can't figure out > > how. so far i've got my SWF to embed filling the whole screen by using > > SWFobject 2.2. but whatever i put in the HTML after that just doesn't > > show above the flash layer. > > > here's an example of the site that i saw has this kind of background > > swf implementation.http://www.samsung.com/us/ > > here's my codes. > > > <!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>Aquaflex</title> > > <link href="style.css" rel="stylesheet" type="text/css"/> > > <script type="text/javascript" src="scripts/swfobject.js"></script> > > <script type="text/javascript" src="scripts/swffit.js"></script> > > > </head> > > > <body> > > <script type="text/javascript"> > > > var flashvars = {}; > > var params = {}; > > params.scale = "default"; > > params.wmode = "opaque"; > > params.allowfullscreen = "true"; > > var attributes = {}; > > attributes.id = "flashContent"; > > attributes.align = "center"; > > swfobject.embedSWF("flash/slide_show_bg.swf", > > "flashContent", > > "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, > > attributes); > > swffit.fit("flashContent",800,480); > > > </script> > > > <div id="flashContent"> > > <h1>Please Install Flash</h1> > > <p><a > > href="http://www.adobe.com/go/getflashplayer";><img > > src="http://www.adobe.com/images/shared/download_buttons/ > > get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> > > </div> > > > <div id="content"> > > <h4>This is a sample text</h4> > > </div> > > > </body> > > </html> > > * the most important part is the wmode "opaque", notice there are two > (double) wmode "opaque" lines within the code, the first one is for > firefox (and presumably safari), the second one is for IE. if you > don't add another line at the bottom , IE won't show correctly. > > hopefully the author will see the importance and severity of this > problem, as it's sort of becoming a common problem now as people start > getting more creative (that means using full flash page with HTML > over). -- You received this message because you are subscribed to the Google Groups "SWFObject" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/swfobject?hl=en.
