I have a problem on positioning my swf file on top of another swf file. I have tried the solution here:
http://jsfiddle.net/j08691/ezXjx/
<div id="a"><object type="application/x-shockwave-flash"
data="http://edmullen.net/flash/relog.swf"
width="200" height="200">
<param name="movie" value="http://edmullen.net/flash/relog.swf">
<param name="WMode" value="Transparent">
</object></div>
<div id="b"><object type="application/x-shockwave-flash"
data="http://edmullen.net/flash/relog.swf"
width="200" height="200">
<param name="movie" value="http://edmullen.net/flash/relog.swf">
<param name="WMode" value="Transparent">
</object></div>
#a {
position:absolute;
top:0;
left:0;
z-index:10;
}
#b {
position:absolute;
top:0px;
left:0px;
z-index:20;
}
and I was able to position them on top of each other. The problem is, they are not EXACTLY on top of each other. The other one is slightly on the lower right.
here it is:
http://www.marinessrivera.com/trial.html
i'm a noob in these kind of things.. please help me
the css is invalid. on your example homepage it says:
<style>
#homepage {
the #homepage style is never applied. remove <style>
at the end of the css there are also two </style> closing tags. remove one.
I have a div containing a Flash Player:
<div id="player">
<div id="player2">
<object type="application/x-shockwave-flash" data="flash/player_mp3_maxi.swf" height="20" width="25">
<param name="movie" value="flash/player_mp3_maxi.swf">
<param name="bgcolor" value="#e2dcde" />
<param name="FlashVars" value="mp3=file.mp3&showslider=0&autoplay=1&loop=1&width=25">
</object>
</div>
</div>
I need to make the div with id player semitransparent. So I applied the CSS property opacity to it:
#player{
opacity: 0.3;
}
This works in Chrome, FF, IE8. But not in Opera 12.16. I need to make it work in this browser.
In Opera12 opacity isn't applied to the Flash Player. How can I solve it?
You need to add one more parameter to your object, "wmode=opaque". This way:
<param value="opaque" name="wmode">
is it possible to load multiple swf files directly on top of each other? I feel like I'm close using divs with different z-indexing, but what about the flash player? Am I wrong in thinking that for each swf there is an individual flash player associated with it? And if that is true, can they be stacked directly on top of each other(on the z-axis)?
thanks for clearing this up for me. I don't want to beat my head against the wall if it is structurally impossible.
to clarify this: you would only be able to see the top swf, but if it were removed, say with swfobject.removeSWF(), there would be another one in the exact same location, but with a lower Z-index
Sure it's possible. See this jsFiddle example.
HTML
<div id="a">
<object type="application/x-shockwave-flash" data="http://edmullen.net/flash/relog.swf" width="200" height="200">
<param name="movie" value="http://edmullen.net/flash/relog.swf" />
<param name="WMode" value="Transparent" />
</object>
</div>
<div id="b">
<object type="application/x-shockwave-flash" data="http://edmullen.net/flash/relog.swf" width="200" height="200">
<param name="movie" value="http://edmullen.net/flash/relog.swf" />
<param name="WMode" value="Transparent" />
</object>
</div>
CSS
#a {
position:absolute;
top:0;
left:0;
z-index:10;
}
#b {
position:absolute;
top:100px;
left:100px;
z-index:20;
}
I have a problem with an flash object. The object is an expanding topbanner, but when retracted, the on mouse over effect still appears on the invisible part of the banner. The code is the following:
<div id="exp_banner" style="width:930px; height:180px; overflow: hidden; position: absolute; z-index: 100;">
<object type="application/x-shockwave-flash" data="test.swf" width="930" height="360">
<param name="movie" value="test.swf">
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>
I have tried to add a style height to the object with an height of 180px, but then the banner scales down.
make position:relative for parent DIV to make overflow work
and keep wmode="transparent" also to overflow work good for flash object
I want to make it so that when I click anywhere on the embedded Flash element, it takes me to a destination URL.
Here is my current code, which does not produce the desired effect:
<div class="contentdiv" style="margin:-72px 0 10px 0px; cursor:pointer;" onclick="location.href='http://example.com/';">
<object height="410" width="720">
<param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700">
</embed>
</object>
</div>
Right now it is making the space behind the .swf file clickable for the link, but the Flash element is not clickable.
If the right thing to do is to edit the .swf file somehow, please let me know that. I don't consider myself a Flash developer, but are there any resources on where to get started or how to do something this basic with an existing .swf file?
Any suggestions are much appreciated!
I had the same problem, found this thread, but ended up creating my own solution.
I added transparent element to the link, then made it overlap the embeded swf
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="http://www.theslap.com/swf/slap_logo.swf">
<embed src="http://www.theslap.com/swf/slap_logo.swf" height="400" width="700"></embed>
</object>
<i style="display:block; height: 410px; width: 720px; position: relative; z-index: 9; margin-top: -410px;"></i>
</a>
Note - you should probably include the css in a separate file for production code.
Update after more research:
This question has been asked before, and the best answer is that you have to create the link within flash.
Usually this is done dynamically by passing a parameter (conventionally named clickTAG) to the .swf to tell it where to link to.
In your case (since someone else provided your swf files) I can see 2 options:
Your .swf author may have already implemented the clickTAG method (you can ask them, or just try it out on the .swf to see if it works.)
You could make a flash wrapper file that implements clickTag, and have it load and display your .swf file. I know this seems like a hack, but I can't see any other alternatives.
Hope this helps!
I've also seen something like this used [edit: but I can't get it to work! Googling suggests that it's not possible]
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700"></embed>
</object>
</a>
(For example here)
Put a transparent .gif or .png file over the flash using z-index and just anchor that transparent image with your URL.
You could create your own swf (or have someone do it for you) that has a button editable with FlashVars over the stage and that loads in your subject swf underneath that button.
I've created one for you: Download.
You just need to add two FlashVars when you embed it:
url - The URL that will be visited if the swf is clicked.
swf - The swf file to load.
I got mad to solve the issue.... I tried several tricks including jquery and javascript.
Definitely the SOLUTION that works and works in ALL browser is the one above my reply.
Thanks user user2628529
<div class="containe">
<div style="position:absolute;"> </div>
<div >
<object type='application/x-shockwave-flash' data='http://www.sample.it/banner/banner-one.swf' width='190' height='505'>
<param name='flashvars' value='clickTag=&clickTarget=_self' />
<param name='allowScriptAccess' value='always' />
<param name='movie' value='banner-one.swf' />
<param name='wmode' value='transparent' >
</object>
</div>
</div>
There is a best way i've got found
<div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Flash Size*/
height:220px;
/*background: url('images/0.gif') no-repeat;*/ /*You should uncommented this line for support old IE version.*/
}
https://gist.github.com/m-pokrovskii/6558817
<div id="logo" >
<div id="linklogo" style="position:absolute;"><img src="transparent.png"></div>
<div id="flashlogo" >
<object type='application/x-shockwave-flash' data='1.swf' width='200' height='86'> <param name='flashvars' value='clickTag=&clickTarget=_self' /><param name='allowScriptAccess' value='always' /><param name='movie' value='1.swf' /><param name="wmode" value="transparent"></object>
</div>
certainly
eliminates the problem in all cases
This worked for me:
<a target="_blank" href="{{ entity.link }}">
<object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="true">
</object>
</a>
Thank You!
now. It worked
<div style="width: 400px; height: 100px;">
<a href="http://www.sample.com" target="_blank">
<object height="100" width="400"><param name="movie" value="1.swf">
<embed src="1.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="400" height="100" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed>
</object>
<i style="display: block; height: 100px; width: 400px; position: relative;z-index: 9;margin-top: -102px;"></i>
</a>
</div>
You can't add a link to a flash object, but you can overlap a transparent image with a link, over the flash object.
This is my example:
<div style="position: relative;">
<div style="position: absolute;
left: 250px;
top: 0px;
z-index: 9999;">
<a href="http://terrazasmedicina.com.ar/hometerrazas.html">
<img src="logoLinkTR.png" width="504" height="103"></a>
</div>
<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','106','src','banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner' ); //end AC code
</script></div>
In my case the object is embeded by a script, but it should work the same.
You have to wrap in a relative div the object and a div with the image, and then position as absolute the div with the image aligning it by left, top, right and bottom properties, and asigning z-index property to overlap the image.