I have an HTML page with a background image. I now want to add a flash (swf) to the corner of the page (a paper-like fold that can be peeled). The thing is the the flash is a small piece of UI (fold) that later opens to a larger view that covers more of the HTML (2 states that switch when clicking). I'm using swfObject.js and embedSwf:
swfobject.embedSWF("fold.swf", "pageFold", "auto", "400px", "9.0.0");
And my HTML is:
<div id="pageFold"></div>
I did several different tries with the width and height parameters, including having them fixed, but my problem is that the swf keeps on covering the HTML's backgound image, even when the swf is in it's smaller state (the folded corner)
Ideally, I would like to have one of the two:
- Have a transparent background to the swf, so that I'll always see the HTML background image.
- Dynamically change the size of the embedded swf - when it in the smaller state (a folded corner), keep the embedded object small. When the swf is clicked and therefore the flash UI is enlarged, give the embedded object some more space in the HTML.
Is any of these possible? Any other options or ideas?
Thanks.