Hyperlinking a flash

Question

I'm having a little problem here: I want to set a flash object with an anchor surrounding it. However, that doesn't seem to work. Is there any easy way to do this? I can think about setting up a transparent rectangle over it with the hyperlink, but I'm actually a dba and sql programmer and have no idea how to do this. In fact, this should be the result of a query.

Any ideas? This is what isn't working, my flash doesn't even show up =-( :

<a href="/Portals/0/Banners/modal.aspx?page=olive_p" onclick="$(this).modal({width:200, height:200}).open(); return false;">
<embed src="Images/olive_publish.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="205" height="230"></embed></a>

score 2 · Accepted Answer · edited Feb 16 '12 at 15:22

The problem is that sometimes z-index wont work on certain flash files and they will always be on top of everything in that case you need to put a container around the flash, and say:

<script type='text/javascript'>
    $('#flash_file').click(function(){//in fact I would use a #flash_file_container if you are gonna do a modal
       $(this).modal({width:200, height:200}).open(); 
       return false;
    });
</script>

if you want to do it your way try:

<a id="flash_link" href="/Portals/0/Banners/modal.aspx?page=olive_p" onclick="$(this).modal({width:200, height:200}).open(); return false;">
<div></div>
</a>
<embed id="flash_file" src="Images/olive_publish.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="205" height="230"></embed>

CSS:

#flash_link { 
 position:absolute;
 width:205px; /*width of flash */
 height:230px; /*height of flash*/
 display:block;
z-index:999;
}
#flash_file {
  z-index:0;
}

.....

Well, I chose to do it my way, and first it didn't work. However, I added a wmode = "transparent" on the embed and it worked flawlessly! Thanks very much — Gaspa79, Feb 16 '12 at 15:48
I don't know what you are doing with a transparent flash, but you might want to test on Safari for Windows (which is kind of popular): http://stackoverflow.com/a/2204730/405238 — Neo, Feb 16 '12 at 21:09

score 1 · Answer 2 · answered Feb 15 '12 at 16:07

make an HTML a-tag with a css-class before your flash with width and height you want (maybe as big as the whole flash?) set CSS properties like:

a.flash-overlay-link {
  display: block;
  position: absolute;
  width: 205px;
  height: 230px;
  z-index: 1
}

object, embed, .your-flash {
  z-index: 0;
}

this should be enough. i dont think theres a crossbrowser solution to link an object tag in another way. maybe you need to set wmode=transparent to your flash so thats possible that HTML overlays flash

Hyperlinking a flash

2 Answers2