HTML wrapper div over embedded flash object cannot be "clickable" by jQuery

Posted by Michael Mao on Stack Overflow See other posts from Stack Overflow or by Michael Mao
Published on 2010-05-27T23:59:34Z Indexed on 2010/05/28 0:01 UTC
Read the original article Hit count: 292

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery