Web Design and Development
There are a lot of cool effects that we see across the internet, many of which use flash. Unfortunately, while flash is a great tool for slideshows, animations, and other interactive features, it is not good for search engine optimization. This is because much of the flash content such as text, links, and images, cannot be indexed by search engines. And even though some engines, such as Google, are capable of indexing some content in flash files, simple HTML text is still the best option for complete indexing of your website.
As a result, some webmasters create HTML web pages and simply embed flash elements. This way, all of the textual content and links can be indexed. Some webmasters have even opted to place HTML elements over flash, to have the best of both worlds; an interactive website and search engine optimization. Unfortunately, these div overlays are not cross-browser compatible.
To overlay your flash element with HTML, you generally do three things:
1. Use a parameter known as wmode and set it to transparent. It should be added to the embed tag. In addition, you need to create a parameter tag as shown below.
<param name="wmode" value="transparent">
2. Create a div element containing your HTML text and absolutely position it over your flash element using CSS.
3. Set a z-index for both elements to set which element is ‘on top’.
This method will work in most browsers. Unfortunately, there is one browser which has a problem rendering the code properly. This browser is Safari version 2 for Mac, which has a problem rendering the wmode parameter. This often results in ‘flickers’ or disappearing parts of an element.
Unfortunately, there is no quick solution to solve this problem. But here are three options that you might consider:
The flash icon that we included is courtesy of VistaIcons.com, a great source of free Vista-style icons.Tags: browsers, cross-browser compatibility, CSS, flash, Mac, Safari