stevedc
02-04-2009, 11:14 PM
Hi all. I have a pretty tricky question that I can't seem to figure out. I'm working on an animation that plays over an entire html / css page. The wmode is set to "transparent", which allows the html underneath of the swf to be seen(it's a butterfly that flys across the page), but nothing under the swf is clickable. Is there a way around this. I've tried using swf object 2.1 as well and still no luck. A butterfly flies across the entire page, lands etc. and turns into a logo of the exhibit. It looks great, but nothing underneath the swf is clickable.
<!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>Smithsonian Butterfly Animation</title>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<link href="-css/styles.css" rel="stylesheet" type="text/css" />
<link href="includes/css/CSS3.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="-css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="swf">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="-media/butterfly.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="-media/butterfly.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="container">
<div id="image">
<div id="animation">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="548" height="268">
<param name="movie" value="-media/homepage_slideshow.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="-media/homepage_slideshow.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="548" height="268" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="ocean-hall">
<p><a href="http://ocean.si.edu/ocean_hall">The Sant Ocean Hall</a> is our largest permanent exhibition. It explores the ancient, diverse, and constantly changing nature of the ocean, the historical connections humans have had with it, and ways in which we are impacting the ocean today.</p>
</div>
<div id="soil">
<p><a href="http://forces.si.edu/soils/">Dig It! The Secrets of Soil</a> - Journey into the skin of the earth and explore the amazing world of soil in this exciting new exhibit. Visitors will discover the amazing connections between soils and everyday life, and think about this hidden world in a whole new way. </p>
</div>
<div id="butterflies">
<p> <a href="http://www.butterflies.si.edu/">Butterflies + Plants: Partners in Evolution</a> - In this exhibit visitors can explore a living butterfly house and observe the many ways in which butterflies and other animals have evolved and adapted together with their plant partners over tens of millions of years. [Ticket Sales]</p>
</div>
<div id="squid">
<p> <a href="http://invertebrates.si.edu/giant_squid/index.html">Giant Squid</a> - Whether living or extinct, on land or at sea, in literature or in life, large animals have long fascinated people.The largest animals have all been hunted since prehistory. One giant animal, however, has remained almost unnoticed and unobserved in its habitat, the giant squid.</p>
</div>
</div>
</div>
</body>
</html>
Is there any work around this? Any help would be greatly appreciated.
~ Regards
Steve Case
<!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>Smithsonian Butterfly Animation</title>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<link href="-css/styles.css" rel="stylesheet" type="text/css" />
<link href="includes/css/CSS3.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="-css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="swf">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="-media/butterfly.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="-media/butterfly.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="container">
<div id="image">
<div id="animation">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="548" height="268">
<param name="movie" value="-media/homepage_slideshow.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="-media/homepage_slideshow.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="548" height="268" wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="ocean-hall">
<p><a href="http://ocean.si.edu/ocean_hall">The Sant Ocean Hall</a> is our largest permanent exhibition. It explores the ancient, diverse, and constantly changing nature of the ocean, the historical connections humans have had with it, and ways in which we are impacting the ocean today.</p>
</div>
<div id="soil">
<p><a href="http://forces.si.edu/soils/">Dig It! The Secrets of Soil</a> - Journey into the skin of the earth and explore the amazing world of soil in this exciting new exhibit. Visitors will discover the amazing connections between soils and everyday life, and think about this hidden world in a whole new way. </p>
</div>
<div id="butterflies">
<p> <a href="http://www.butterflies.si.edu/">Butterflies + Plants: Partners in Evolution</a> - In this exhibit visitors can explore a living butterfly house and observe the many ways in which butterflies and other animals have evolved and adapted together with their plant partners over tens of millions of years. [Ticket Sales]</p>
</div>
<div id="squid">
<p> <a href="http://invertebrates.si.edu/giant_squid/index.html">Giant Squid</a> - Whether living or extinct, on land or at sea, in literature or in life, large animals have long fascinated people.The largest animals have all been hunted since prehistory. One giant animal, however, has remained almost unnoticed and unobserved in its habitat, the giant squid.</p>
</div>
</div>
</div>
</body>
</html>
Is there any work around this? Any help would be greatly appreciated.
~ Regards
Steve Case