Add a Link Around an Embedded Flash File

html css flash clicktag
JWM picture JWM · Jan 22, 2010 · Viewed 42.8k times · Source

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!

Answer

Gary V picture Gary V · Mar 14, 2012

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.

Related questions

Make flash file scale to div width and maintain height according to its aspect ratio

We're having a problem to make a flash file scale 100% according to the parent div width, while still maintaining the height according to its aspect ratio. Please check out the code on jsFiddle (http://jsfiddle.net/LgegF) or paste the …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More