Add a Link Around an Embedded Flash File

Question

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!

score 14 · Answer 1 · answered Mar 14 '12 at 21:30

14

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.

answered Mar 14 '12 at 21:30

Gary V

141
1
2

Thanks, this is what I did except I used a `div` instead of an `i` tag, and I used `top` instead of `margin-top` in the style tag. Seems to do just what I need it to do. Thanks again. – James Dec 05 '12 at 21:40
I also had to change the Flash mode from window to opaque by adding this inside the object tag `` and this attribute of the embed tag `wmode="opaque"`. – Michael Hinds Nov 01 '13 at 10:47

score 6 · Accepted Answer · edited May 23 '17 at 11:45

6

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)

edited May 23 '17 at 11:45

Community

1
1

answered Jan 22 '10 at 18:13

Richard Inglis

5,888
2
33
37

1

I tried implementing this and it did not work. Also, your link goes to a forum page that appears un-related to this topic. – JWM Jan 22 '10 at 18:47
The link is to a page with a flash banner ad: look at the page source to see how they did it! – Richard Inglis Jan 22 '10 at 23:34
Ok, I looked at the source code, and it's a little unclear because of the way they're setting up that example. They have the tag going around the flash element and the text that comes after it. It's not clear if that tag enables the linking for the flash element or not. For example, it could be because of the tag or it could be because of the way the flash swf file is constructed. In any case, as I explained in my first comment, I tried implementing this with a simple tag as you described, but it did not work. I don't think this is the appropriate fix. – JWM Jan 23 '10 at 00:26
You're right - I can't make it work either! Maybe there's a reason neither method works, like one of the parameters used to embed the swf? I'll do some more digging... – Richard Inglis Jan 23 '10 at 09:44
Thank you, this helps me get where we need to go. – JWM Jan 24 '10 at 15:02

score 3 · Answer 3 · answered Apr 01 '11 at 20:50

3

Put a transparent .gif or .png file over the flash using z-index and just anchor that transparent image with your URL.

answered Apr 01 '11 at 20:50

GreaseJunkie

31
1

score 1 · Answer 4 · answered Aug 02 '13 at 10:15

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;"> <a href="http://www.sample.com" target="_blank" > <img src="http://www.sample.it/banner/trasparent-190-505.png"> </a> </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>

you do not need the png. a simple empty div (with same dimension) also works for me. but thanks anyway! — xxxbence, Apr 12 '15 at 08:43

Maxim Pokrovskii · Answer 5 · 2013-09-14T04:26:48.947

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

score 1 · Answer 6 · answered Mar 14 '12 at 21:55

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.

score 0 · Answer 7 · answered Jul 28 '13 at 23:35

<div id="logo" >
   <div id="linklogo" style="position:absolute;"><a href="http://www.gogle.com"><img src="transparent.png"></a></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

score 0 · Answer 8 · answered Sep 12 '14 at 10:08

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>

score 0 · Answer 9 · answered Sep 28 '14 at 02:13

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>

score 0 · Answer 10 · answered Aug 04 '15 at 13:52

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.

Add a Link Around an Embedded Flash File

10 Answers10