HTML wrapper div over embedded flash object cannot be "clickable" by jQuery
- by Michael Mao
Hi all:
I've been trying to do as the client requested : redirect to campaign page then to destination page once a customer clicks on the top banner in swf format.
You can check what's been done at :http://ausdcf.org
If you are using Firefox, Chrome or Safari, I suspect you can reach the destination page.
However, if you are using IE or Opera, I doubt it.
I think to cause of such a weird problem is:
The swf ojbects don't have a link to url, SO
I have to hack the theme template file like this :
<div id="header">';
/*
* A quick and dirty way to put some swf into PHP, and rotate among them ...
*/
//available banners
$banners = array(
'http://localhost/smf/flash/banner_fertalign_1.swf',
'http://localhost/smf/flash/banner_fertalign_2.swf',
'http://localhost/smf/flash/banner_fertalign_3.swf'
);
//get random banner
srand((double) microtime() * 1000000);
$rand = rand(0,count($banners)-1);
echo '<div id="top_banner_clickable">';
echo '<div id="top_banner_wrapper">';
echo '<object width="400" height="60">';
echo '<param name="wmode" value="transparent">';
echo '<embed wmode="transparent" src="'.$banners[$rand].'" ';
echo 'width="400" height="60" type="application/x-shockwave-flash"';
echo 'pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />';
echo '</object>';
echo '</div>';
echo '</div>';
And the related jQuery code is like this:
/* master.js */
$(document).ready(function()
{
$("#top_banner_clickable").click(function()
{
window.location ="http://ausdcf.org/campaign/";
});
});
I absolutely know nothing about Flash or embedded objects. I guess that's the cause of this problem. Plus, I don't know why it works with some browsers but not all...
I even tried to add a z-index to the wrapper div in css like this:
#top_banner_clickable
{
z-index : 100;
}
No this wouldn't do, either...
Is there a way to go around this issue?
Many thanks in advance.
