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

Question

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?

Update :

I am trying to convince the client to use Google AdSense for this sort of thing now...

Many thanks in advance.

Answer 1

I think the problem is that Flash is swallowing the click event and preventing from bubbling up through the rest of the document. Or Flash is interfering with jQuery's solution for inconsistent models for event propagation. So I think the thing to do is to add a div that floats above the flash movie, but is a sibling (of the movie or one of its parents). Something like this:

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 id="clickableoverlay"></div>'; // float this div above the movie
echo     '</div>';
echo '</div>';

Use CSS to make #clickableoverlay lie on top of the movie and apply your click() to that. I don't think you should need to use z-index here if the <div> appears after the <object>. Be careful to use wmode="transparent" (which you are!) or wmode="opaque". If you use wmode="window", the flash movie will always be on top of everything else, no matter what CSS you try to give it.

Answer 2

You can't use javascript to catch click events on top of a flash object. You can find similar questions here and here.

You could suggest to your client that the source code of the flash should be modified to handle the clicks. If this is not possible, then use a container flash object to host the banners.