Reputation: 1775
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:
Is any of these possible? Any other options or ideas?
Thanks.
Upvotes: 0
Views: 821
Reputation: 456
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)
you need set parObj
and attObj
as "wmode=transparent"
(maybe {wmode:"transparent"}
)
Also you may need use
stage.scaleMode=StageScaleMode.NO_SCALE
in your swf
Where callbackFn is a JavaScript function that has an event object as a parameter:
function callbackFn(e) { ... }
Properties of this event object are:
success, Boolean to indicate whether the creation of a Flash plugin-in <object> DOM was successful or not
id, String indicating the ID used in swfobject.registerObject
ref, HTML object element reference (returns undefined when success=false)
Use id parameter in callback function to manipulate your flash object - move, resize, etc
Upvotes: 1