FusionCharts flash設置div的層次(swfobject對swf透明支持)。

我不是作網頁設計的，因此碰到這個問題時感受好偏啊，不過，最後有幸解決了，高興一下，也總結一下。

問題的狀況是這樣的，作了一個頁面，頁面中有一個日期選擇的js，日期下面是FusionChartsFree 生成的flash圖表，他們都是放在div標籤裏面的，在頁面加載完成後，點擊日期選擇時，出現的日期圖片被flash遮住了，無法選擇。

我猜就是div有層次的問題，因而我就在網上查資料，有點收穫，知道div層次是能夠用z-index 來設置的。可是對這兩個div ,我怎麼設置就沒效果，日期依然在flash下面。正當我準備放棄的時候，忽然想到是否是flash有些特殊呢，而後我又在網上搜了一下，發現了這篇文章

引用

<param name="WMODE" value="transparent">

<param name="wmode" value="Opaque">

<param name="wmode" value="Window">

NOTE: 支持其它瀏覽器(firefox opera etc.) 則使用 <embed wmode="transparent" />在embed節點中加入wmode值.

window 模式

默認狀況下的顯示模式，在這種模式下flash player有本身的窗口句柄，這就意味着flash影片是存在於Windows中的一個顯示實例，而且是在瀏覽器核心顯示窗口之上的，因此flash只 是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。因爲他是獨立於瀏覽器的HTML渲染表面，這就致使默認顯示方式下flash老是會遮 住位置與他重合的全部DHTML層。

可是大多數蘋果電腦瀏覽器會容許DHTML層顯示在flash之上，但當flash影片播放時會出現比較詭異的現象，好比DHTML層像被flash刮掉一塊同樣顯示異常。

Opaque 模式

這是一種無窗口模式，在這種狀況下flash player沒有本身的窗口句柄，這就須要瀏覽器須要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其餘元素同樣在同一個頁面上,所以你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。

Transparent 模式

透明模式，在這種模式下flash player會將stage的背景色alpha值將爲0而且只會繪製stage上真實可見的對象，一樣你也能夠使用z-index來控制flash影片的 深度值，可是與Opaque模式不一樣的是這樣作會下降flash影片的回放效果，並且在9.0.115以前的flash player版本設置wmode=」opaque」或」transparent」會致使全屏模式失效。

瞭解了各類模式的實現方式和意義在之後的開發中就能夠按照具體狀況選擇設置wmode屬性的值了。

看完這個我明白了，把flash的wmode設置成opaque就好了，剩下的事情就是改FusionCharts的參數了，這東西今天剛剛試着在用，把他的js文件拿出來看了一遍才知道怎麼設置，在頁面上加載flash的js代碼中加上這句

chart.addParam("wmode","Opaque");就ok了~

 

今天使用swfobject,居然發現沒有參數指定swf透明。汗~~

不過能夠看看它源代碼，而後稍作修改：

一、在 swfobject.js 裏面找到：

if(c){this.addParam(」bgcolor」,c);}

2：改成if(c){this.addParam(」bgcolor」,c);} else {this.addParam(」wmode」,」transparent」);}

3：傳遞背景顏色爲空：

var so = new SWFObject(」test.swf」, 「test」, 「550″, 「400″, 「9″, null);

so.write(」flashcontent);

其實還能夠這樣:

var so = new SWFObject(」test.swf」, 「test」, 「550″, 「400″, 「9″, 「#ffffff」);

so.addParam(」quality」, 「low」);

so.addParam(」wmode」, 「transparent」);

so.addParam(」salign」, 「t」);

so.write(」flashcontent」);