image above flash element

Question

Hello,

I have a flash embedded, it is required for uploading a file and i want to place a image over it.

Image1 Shows the expected result: http://i42.tinypic.com/2jcfshv.png

but however i dont know how to achieve it, it looks like this:

Image2 Shows the actual result rendered by browser:   
http://i40.tinypic.com/2hnp848.png

This is My Flash

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="16" HEIGHT="16" id="flashUpload" ALIGN="">


<PARAM NAME=movie VALUE="{swf_upload_url}?UploadSession={upload_session}&AccessKey={AccessKey}&ServerID={ServerID}&ShowTopBtn=1&TopBtnIcon={SKIN_DIR}/images/a.png">  
 <PARAM NAME=quality VALUE=high>  
 <PARAM NAME=allowScriptAccess VALUE=always>  
 <PARAM NAME=bgcolor VALUE=#000000>  
 <EMBED src="{swf_upload_url}?UploadSession={upload_session}&AccessKey={AccessKey}&ServerID={ServerID}&ShowTopBtn=1&TopBtnIcon={SKIN_DIR}/images/a.png" quality=high bgcolor=#000000  WIDTH="32" HEIGHT="32" NAME="flashUpload" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"&gt;&lt;/EMBED&gt;  
</OBJECT>

Though there is "&TopBtnIcon={SKIN_DIR}/images/a.png" it doesnt work.

Thank You.

Regards,

Shishant Todi

Answer 1

You should be able to correct that by using the z-index css property of your image.

Try setting it to a huge number like: z-index:100000;

This happens because the flash player tries to be above all other elements on the page it is in.

Edited: this works if you use the "wmode" in the flash player as indicated above.

Answer 2

In order for HTML elements to display above Flash, you have to set the "wmode" paramater in your Flash embed to "transparent.

<PARAM NAME=wmode VALUE=transparent> <EMBED src="{swf_upload_url}?UploadSession={upload_session}&AccessKey={AccessKey}&ServerID={ServerID}&ShowTopBtn=1&TopBtnIcon={SKIN_DIR}/images/a.png" quality=high bgcolor=#000000 wmode=transparent WIDTH="32" HEIGHT="32" NAME="flashUpload" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"&gt;&lt;/EMBED&gt;

Add the extra PARAM tag that I've placed above, and then add the "wmode" attribute to the EMBED tag (as seen in my example) and you should be golden.