Issues inserting a SWF on HTML

Hello,

I'm trying to insert a SWF (728x180) on HTML. The code I'm using for this is:

<div style="width:728px; height:90px; float:right">
<object width="728" height="180">
<param name="movie" value="http://www.peru.com/Advertisers/bcp/20100630/728x180_desplegable.swf">
<param name="wmode" value="transparent">
<embed src="http://www.peru.com/Advertisers/bcp/20100630/728x180_desplegable.swf" wmode="transparent" width="728" height="180">
</embed>
</object>
</div>

Code (markup):

And here are the results:

Firefox 3.6.6
Inactive (no mouse over): http://img808.imageshack.us/img808/7/inactiveff.png
Active (mouse over): http://img805.imageshack.us/img805/4093/activeff.png
ISSUE: labels, textboxes and button are over my SWF when the SWF should be over those objects.

IE8
Inactive (no mouse over): http://img690.imageshack.us/img690/4719/inactiveie8.png
Active (mouse over): http://img130.imageshack.us/img130/5725/activeie8.png
ISSUE: When active, the SWF isn't being fully displayed.

Any advice is welcome.

Thank you,
Jonathan

 

1) You don't want the wmode to be transparent - it takes CPU and your not using it. Set it to window.

http://kb2.adobe.com/cps/155/tn_15523.html

2) If this doesn't fix the problem, simply give it a high z-index.

 

Quoted from http://flash-video-player.blogspot.com/2009/04/flash-object-and-embed-tag-part-two.html
From the above explanation, I suggest you set wmode to be window or opaque.

 

If I change wmode to window (default) then this happens:

Firefox 3.6.6
Inactive (no mouse over): http://img686.imageshack.us/img686/7/inactiveff.png
Active (mouse over): http://img3.imageshack.us/img3/4093/activeff.png
ISSUE: now when inactive the SWF is using 728x180 when it should only use 728x90. 728x180 should be used when active only.

 

Set it to opaque:

Set zindex to -1

On mouseover use CSS to set zindex to 2

#topAD {
width:728px;
height:90px;
float:right;
z-index = -1;
}

#topAD:hover {
width:728px;
height:180px;
float:right;
z-index = 2;
}

(Note: reading up on :Hover may have some issues in IE - test it. JS can also do this but not as nice).