CODEWITHSUNDEEP
flashinternet-explorerhtml
Fizzix
Fizzix

Reputation: 24375

Why is my overlaying div not working in Internet Explorer?

So basically to sum it up, I have a flash banner at the top of my website, with an overlaying div that creates the link for it. This was literally the only way that I could get the flash banner to link since it had an embedded actionscript that created an unwanted link.

It works absolutely perfect in Chrome and Firefox, although refuses to work within Internet Explorer.

I am using wordpress, and it is placed within the Header.php file. The piece of shortcode is the flash banner.

<div align="center">
<div id="example" align="center" style="width:900px; height:90px; position:absolute; cursor:pointer;" >
</div>
[kml_flashembed movie="http://linktoflashbanner/728x90.swf" height="90" width="728" /]
</div>

<script type="text/javascript">
document.getElementById("example").onclick = function() {
    window.open("http://www.domaintolinkto.com.au/"); 
}
</script>

Upvotes: 1

Views: 1873

Answers (1)

3dgoo
3dgoo

Reputation: 15794

It seems Internet Explorer requires a background colour defined for an overlay to catch mouse events over the top of an embedded flash object.

Also, there are better ways to apply your link by using a link tag. Here is a working example:

HTML

<div class="flashWrapper">
    <a href="http://www.google.com" target="_blank"></a>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="728" height="90">
        <param name="movie" value="http://www.flashvortex.com/examples/289.swf?divId=289&amp;autoWidth=0&amp;autoHeight=0" />
        <param name="allowScriptAccess" value="always" />
        <param name="wmode" value="opaque" />
        <embed src="http://www.flashvortex.com/examples/289.swf?divId=289&amp;autoWidth=0&amp;autoHeight=0" width="728" height="90" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</div>

CSS

.flashWrapper {
    width:728px;
    height:90px;
    position: relative;
}
.flashWrapper > a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(0,0,0,0.0);
}

Demo

Upvotes: 4

Related Questions