HTML-оболочка над встроенным flash-объектом не может быть «кликабельной» с помощью jQuery

Question

Я пытался сделать так, как просил клиент: перенаправить на страницу кампании, а затем на страницу назначения, как только клиент нажмет на верхний баннер в формате swf.

Вы можете проверить, что было сделано по адресу: http://ausdcf.org

Если вы используете Firefox, Chrome или Safari, я подозреваю, что вы можете перейти на страницу назначения.

Однако, если вы используете IE или Opera, я сомневаюсь в этом.

Я думаю, что причиной такой странной проблемы является:

Объекты swf не имеют ссылки на URL, SO

Мне нужно взломать файл шаблона темы следующим образом:

<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>';

И соответствующий код jQuery выглядит так:

/* master.js */

$(document).ready(function()
{
    $("#top_banner_clickable").click(function()
    {
        window.location ="http://ausdcf.org/campaign/";
    });
});

Я абсолютно ничего не знаю о Flash или встроенных объектах. Я думаю, что это причина этой проблемы. Кроме того, я не знаю, почему это работает с некоторыми браузерами, но не со всеми ...

Я даже пытался добавить z-index в div-обертку в css следующим образом:

#top_banner_clickable
{
    z-index : 100;
}

Нет, этого тоже не будет ...

Есть ли способ обойти эту проблему?

Обновление:

Я пытаюсь убедить клиента использовать Google AdSense для такого рода вещей сейчас ...

Большое спасибо заранее.

Answer 1

Вы не можете использовать javascript, чтобы отлавливать события кликов поверх флэш-объекта. Вы можете найти похожие вопросы здесь и здесь .

Вы можете предложить своему клиенту изменить исходный код флеш-памяти для обработки кликов. Если это невозможно, используйте для размещения баннеров флэш-объект контейнера.

Answer 2

Мне кажется, проблема в том, что Flash проглатывает событие click и не дает пузыриться сквозь остальную часть документа. Или Flash вмешивается в решение jQuery для несовместимых моделей для распространения событий . Поэтому я думаю, что нужно добавить div, который всплывает над флэш-фильмом, но является родным братом (фильма или одного из его родителей). Примерно так:

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>';

Используйте CSS, чтобы #clickableoverlay лежал поверх фильма и примените к этому click(). Я не думаю, что вам нужно использовать z-index здесь, если <div> появляется после <object>. Будьте осторожны, используйте wmode="transparent" (который вы есть!) Или wmode="opaque". Если вы используете wmode="window", флэш-фильм всегда будет на вершине всего, независимо от того, какой CSS вы пытаетесь дать ему.