Click event over flash object – full browser compatibility (IE, Firefox, Chrome, Safari)

Hi everybody,

It’s been a long time I’ve posted here, and it is a great pleasure to come back in the coding game.

Last week, I needed to put a flash ad in my website, a custom ad that must be redirected to the announcer website.
The flash animation doesn’t contain a link, so, I’ve naturally inserted a link that wraps my html object, but my link got none effects on browsers expected Chrome.

This is because click events (detection) over flash object are not well supported by all the browsers.

This is what I’ve written:

<a href="http://www.xxx.com/redirect.php?utm_source=xxxxx&utm_medium=display&utm_content=mega&utm_campaign=ST-20151012&url=http://www.xxx.fr" target="_blank">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="movie_name" align="middle">
        <param name="movie" value="/sites/default/files/pub/banniere_landscape.swf"/>
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="play" value="true" />
        <param name="loop" value="true" />
        <param name="scale" value="showall" />
        <param name="menu" value="true" />
        <param name="devicefont" value="false" />
        <param name="salign" value="" />
        <param name="allowScriptAccess" value="sameDomain" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="/sites/default/files/pub/banniere_seapiax_landscape.swf" width="728" height="90">
            <param name="movie" value="/sites/default/files/pub/banniere_landscape.swf"/>
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <!--<![endif]-->
                <a href="http://www.adobe.com/go/getflash">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                </a>
            <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
    </object>
</a>

To solve this, the better and easier way is to disbale the CSS point-events attribute, put the object element in the back with negative z-index, put the “a” link to the front, and set the object element with wmode parameter to transparent, juste like this:

<a ... style="display: block; z-index: 1;">
<object ... style="z-index: -1; pointer-events: none;">*
    <param name="wmode" value="transparent" />
</object>
</a>

This fix will work fine on Chrome and Firefox, but not in old Internet Explorer versions.
The hack for the full browser compatibility is to set a transparent html tag in front of the flash element, that will listen to the click event.
It’s as simple as this:

    <i style="display:block; height: 90px; width: 728px;  position: relative; z-index: 9; margin-top: -90px;"></i>
</a>

Now, you can click on any html object element with full browsers compatibility, including Safari.

See the full code below:

<a href="http://www.xxx.com/redirect.php?utm_source=xxxx&utm_medium=display&utm_content=pave&utm_campaign=ST-20151012&url=http://www.xxxx.fr" target="_blank" style="display: inline-block; z-index: 1; position: relative;">
    <span>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="movie_name" align="middle" style="z-index: -1; pointer-events: none;" allownetworking="internal">
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="wmode" value="transparent" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="/sites/default/files/pub/banniere_square.swf"/>
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="/sites/default/files/pub/banniere_square.swf" width="728" height="90" style="z-index: -1; pointer-events: none;" allownetworking="internal">
                <param name="movie" value="/sites/default/files/pub/banniere_landscape.swf"/>
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="wmode" value="transparent" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                    </a>
                    <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </span>
        <i style="display:block; height: 90px; width: 728px;  position: relative; z-index: 9; margin-top: -90px;"></i>
</a>
Advertisements
Click event over flash object – full browser compatibility (IE, Firefox, Chrome, Safari)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s