Link to home
Start Free TrialLog in
Avatar of Aspirin99
Aspirin99

asked on

How to make Flash transparent in all browsers with swfobject?

My Flash is only transparent in Firefox. How can I make it cross-browser compatible, and still get the absolute positioning with Flash on top of the background image?  

Here's a link to the page where I'm testing this:

http://www.cowfly.com/test/kb/

Here's my code.

<!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" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kenny Bellew's Personal Website</title>
            
            <script type="text/javascript" src="swfobject.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<link href="mysite.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
      background-color: #90260C;
}
-->
</style></head>

<body>

    <div align="center" style="position:absolute; top: 0px;
clear:both; left: 0px; z-index: 0">
<img src="images/background.jpg" alt="background" width="775" height="740" />

</div>


    <div align="center" style="position:absolute; top: 6px;
clear:both; left: 75px; z-index: 4">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="75" id="myName">
        <param name="movie" value="Name.swf" />
        <param name=”wmode” value=”transparent”>
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="Name.swf" width="300" height="75" id="myName" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 1</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

    <div align="center" style="position:absolute; top: 375px;
clear:both; left: 110px; z-index: 5">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="300" id="myTypewriter">
        <param name="movie" value="typewriter.swf" />
        <param name=”wmode” value=”transparent”>
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="typewriter.swf" width="200" height="300" id="myTypewriter" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 2</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

</body>
</html>

<!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" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kenny Bellew's Personal Website</title>
		
		<script type="text/javascript" src="swfobject.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<link href="mysite.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
	background-color: #90260C;
}
-->
</style></head>

<body>

    <div align="center" style="position:absolute; top: 0px;
clear:both; left: 0px; z-index: 0">
<img src="images/background.jpg" alt="background" width="775" height="740" />

</div>


    <div align="center" style="position:absolute; top: 6px;
clear:both; left: 75px; z-index: 4">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="75" id="myName">
        <param name="movie" value="Name.swf" />
        <param name=”wmode” value=”transparent”> 
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="Name.swf" width="300" height="75" id="myName" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 1</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

    <div align="center" style="position:absolute; top: 375px;
clear:both; left: 110px; z-index: 5">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="300" id="myTypewriter">
        <param name="movie" value="typewriter.swf" />
        <param name=”wmode” value=”transparent”> 
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="typewriter.swf" width="200" height="300" id="myTypewriter" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 2</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

</body>
</html>

Open in new window

Avatar of Member_2_6031504
Member_2_6031504

Although you will never get this featuie wokring in 100% of browsers
The fastest/easiest solution is to use the swfobject to embed your .swf file

Get the object here:
http://code.google.com/p/swfobject/

Here is an example of transparency:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
Avatar of Aspirin99

ASKER

I've tried to read that documentation page, but it does not have enough information for me to know how to do everything I need to do-- like absolute positioning. My attempts to make it work have failed.

I also haven't found a complete sample of how to use it .  Can you provide an example of how I would change my page?
ASKER CERTIFIED SOLUTION
Avatar of Aspirin99
Aspirin99

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial