Ever since Microsoft released an update of Internet Explorer 6, users have been getting the ‘Click to activate and use this control‘ when rolling over Flash content. This is particularly frustrating when using Flash for navigation, as it means having to double click.
There are a variety of Javascript solutions to this problem, and in my mind the most simplest form of implementation is this straight forward Javascript function that should only take 2 minutes to integrate.
Javascript function
You need to declare this in an external Javascript file and then link the Javascript file to your HTML page like so (this goes between the head tags):
<script type="text/JavaScript" language="javascript" src="<strong>myscript.js</strong>"></script>
Within this external Javascript file, you then type the following:
function flashFile() {
document.write('<object type="application/x-shockwave-flash" data="<strong>myflash.swf</strong>" width="<strong>750</strong>" height="<strong>220</strong>">\n');
document.write('<param name="movie" value="<strong>myflash.swf</strong>" />\n');
document.write('</object>\n'); }
Very simple script. All you are doing here is writing the flash code with Javascript. You should replace the highlighted words with your own values. Now within your HTML, wherever you want to place the Flash file, simply write:
<script type="text/javascript">flashFile();</script>
This is calling the Javascript function that you have already declared. That’s you finished, you should no longer get the ‘Click to activate and use this control’ border in Explorer.
Additional parameters
You can easily add additional parameters to the Javascript function above, for example, wmode and quality.
function flashFile() {
document.write('<object type="application/x-shockwave-flash" data="myflash.swf" width="750" height="220">\n');
document.write('<param name="movie" value="myflash.swf" />\n'); <strong>
document.write('<param name="quality" value="high" />\n');
document.write('<param name="wmode" value="transparent" />\n');</strong>
document.write('</object>\n'); }
Drawbacks
If the user has Javascript disabled, the Flash file will not appear. Therefore I recommend if you are using Flash for navigation, you ensure that you have an alternative way of navigating the site, e.g. links in the footer of the page.
Written with love from Lee Munroe.
Follow @leemunroe or subscribe to the blog for more web design articles.
November 15th 2007
Paul McKeever says:
Thanks Chief, that code worked well for my website.
November 15th 2007
Frederik says:
Nice, but it’s not necessary to make you’re own script. When you publish with Flash CS (3.0), it will create a Javascript file for you, called ‘ActiveContent’ or something like that… What can we say… Firefox rules