View Full Version : I-frame over .swf

Dec 18th, 2008, 08:59 AM
Hopefully this is possible, but I'm really not sure. I'm way out of the loop on HTML - it's been forever.

I'm making a flash site for a friend, but I want her to be able to edit the text so I was going to put an IFrame in the red highlighted area in this image:

Screenshot (http://img224.imageshack.us/img224/7518/jesscn2.jpg)

I've got it to where the IFrame is set in a div with the z-index above the .swf. That's working until I click on the .swf, then the iframe drops behind it. That's in IE, in FF the iframe stays behind the .swf no matter what I do.

Here is the code, I put it together from another thread from 2004 I found on an old site so if the code isn't up to date I'm just ignorant :)

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jessica Haggy Ministries</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
body {position:relative; left:0px; top:0px; z-index:0;}

<div id=layer1 style="position:absolute; center; width:1024; height:760; z-index:-1;">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1024','height','760','title','jess','src','jessica_index','qu ality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','jessica_index' ); //end AC code
</script><noscript><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="1024" height="760" title="jess">
<param name="movie" value="jessica_index.swf" />
<param name="quality" value="high" />
<embed src="jessica_index.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1024" height="760" wmode=transparent></embed>
<div id=layer2 style="position:absolute; top:44px; right:175px; width:500; height:300px; z-index:99;">
<iframe src="home.html" height="500" width="300" style="z-index: 99"></iframe>

Is it possible for this to function? If so, can someone give me an idea of what I need to do?

Thanks in advance.

Dec 18th, 2008, 09:20 AM
Have you tried adding highlighted:

<param name="movie" value="c4g.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />

Dec 18th, 2008, 07:09 PM
You might also consider driving that dynamic content with XML. That way the design is completely controlled by your flash file and the content is controlled by the XML (which your friend can easily edit in notepad).

This method is actually potentially more SEO friendly than using an iframe (which will not register as content for the page it lies in). Googlebot already came out with a beta flash text scraper so looking to the future... choice is obvious.

Also, you cannot control flash layering cross-browser with z-index, nor can you control it cross-browser with position: absolute. Using rangana's suggestion to make your flash render transparent would allow you to see through your flash to the iframe underneath, but the content will be unselectable and unscrollable via the mouse.

Dec 19th, 2008, 05:36 AM
Thanks guys, I'll check out the XML.

Dec 19th, 2008, 05:45 AM
Thanks guys, I'll check out the XML.