Auto-Enabling Flash Objects

If you embed Flash elements on your web site, you may have discovered something strange - that people have to "click to enable" the element before they can interact with it, particularly when using the Internet Explorer web browser. This is usually accompanied by a strange border around the element when you point at it with the mouse, which goes away after you click the element.

This was a change that Microsoft made in their handling of Flash objects, due to security issues with certain objects in the past.

But this behavior completely invalidates some of the things that people try to use small flash elements for - such as individual buttons on a left-nav-bar that have a cool moving "shine" that goes across them when you point at them, or behave in a cool way when you click them. None of that functionality works until the person "clicks" the element to enable it!

This totally defeats the purpose of the mouseover part of the flash element, and the user now has to click the button twice to make it work. Not very user-friendly at all.

The Solution

There's a trick you can do in your HTML to get around this problem and enable all of your flash objects when the page loads. Simply add this code to the bottom of your HTML, just inside the BODY tag:

<script type="text/javascript">
objects = document.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++)
{
    objects[i].outerHTML = objects[i].outerHTML;
}
</script>

This code simply copies each object to itself, which (for some reason) validates the object so that the user doesn't have to. No matter how many flash objects you have on your web page.

Voila - your cool flash buttons all work right again.

Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:

Privacy Policy

See other tricks: Web | Unix | Perl | SQL | General

Phone toll free 1-866-464-6688, Phoenix Metro area 480-895-6688

Problem with this web site? please let us know