今天公司決定要為網站加入Google Seach功能，但是當加入後，搜索結果被首頁的Flash覆蓋。
之後那個技術問題就落在我身上。
小弟雖然愛玩Web，不過一向對Flash興趣不大。
要學多種語言太煩了，而且一向沒有藝術天份。為免費時失事，Flash帶來的動感就靠其它東西補充。
動畫效果、滑鼠MouseOn/MouseOver、文字陰影都可以用CSS3、jQuery、jQuery UI解決。
我才懶得學多一種語言 Action Script(貌似由2代到3代的改變也超級多)，而且Adobe Flash要$買，jQuery免費。
如果我不是製作網上遊戲，我完全看不到的Flash的優勢。
即使網上遊戲，現在也可以完全不依賴Flash進行，單單是HTML5+CSS3+Javascript 技術已經可以滿足到我們。
但是好不幸地，我的老闆堅持要用Flash，沒法子了。老一輩的人就是有自己一思考模式。
好了，你是老闆，我都只是打工，正所謂受人錢財替人消災。
只好在用Flash的前提下解決那個問題。
為什麼Flash 會顯示在最上方?
完全不懂Flash的小弟，要我忽然解決那個問題。好，沒問題，讓我先找出為什麼那個笨Flash會永遠最前端顯示。用我最信任的Google，按照傳統，找那些還是用英文較好。
flash always on top，之後一大堆結果，現在是爬文時間
http://sierakowski.eu/list-of-tips/54-flash-on-top-of-the-html-elements-changing-the-window-mode-parameter.html
但實際的結果是被綠色Flash庶蓋了下拉菜單(就是你鼠標指著然後自己伸出來的菜單)
之後它就說到重點，<object> 或 <embed> 標籤都有一個屬性叫wmode
wmode 有三個有效的值分別是
- window (那個是預設值) - Flash 會在自己容器內標示在最上方
- opaque - Flash 和其它HTML元素將會由css z-index 決定誰高誰低
- transparent - 與 opaque 類同，在Flash下方的HTML元素可以透過Flash的透明區域看見
(即是暗示opaque HTML元素即使在透明Flash下也看不見?)
所以解決辦法就是將wmode設定為opaque
object 標籤
<object>
...
<param name="wmode" value="opaque">
...
</object>
embed 標籤
<embed ... wmode="opaque" ... >
好，之後文章又說些題外話。
其實那個問題亦都可以在Flash匯出/譯出/發佈的時候設置
好自然老毛病又發作了，原來原生可以設置的。
如果用Html去設置好像有點不可靠，不如在Flash的時候就限制它啦。
細問之下，原來首頁的Flash是外判給其它公司完成。
那source呢(即*.xfl, *.fla)? 當然沒有啦!!
唉，即是說不知是那個開發笨笨忘了選opaque? 害我~!@#$%^&*(
算了，繼續看下去
Flash player 10 新增了兩個wmode，分別是Direct and GPU
詳情在Adobe 官網
http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html
按進去，英文一大篇。已經不想看，知道了關鍵字找一找opaque，
掃一掃子標題Using Window Mode (wmode) values，看完。
好像已經找到結果，但我嘗試後都是失敗。那裡出錯呢。
難道那篇文章已經過時，內容失實?
今次找到另一篇，中文內容真好
https://developers.google.com/+/plugins/+1button/?hl=zh-tw#faqs
為什麼 Adobe Flash 內容會截斷游標懸停泡泡？
那個小標題的下方就是了，
原來根據預設，Flash 內容會顯示在所有其他 HTML 內容上方
哈哈，上一篇也有說到wmode 預設值是window，如果沒有指名，它本來就是預設顯示在最上方。那時啥預設值，很霸度。
如果Flash是透過指令碼加入的情況，您就需要使用更複雜的解決方案。
只要 Flash 元素不是內嵌在 iframe 中，這個方法都可以順利運作。
我不知道我的情況是否複雜，但我又知道我的情況不是透過指令碼加入的情況。
不過就是想玩玩看
https://github.com/scribd/flash_heed
那個複雜的解決方案就是匯入一個flash_heed.js，再呼叫FlashHeed.heed();
好像很有趣，但是呢我也不可以在公司網站那樣做。
加一個flash_heed.js好像有點少提大做，而且我也沒有權利做。
可以存取網頁伺服器的帳戶都不在我手，一個官僚的運作。
我只是負責找出解決辦法，即是叫你Debug但你只可以看源代碼。
多少有點白白的一件事。
算了算了，我可以做到的事做只有。
打開https://github.com/scribd/flash_heed/blob/master/flash_heed.js
把程式碼複製，在Chrome按F12，哈哈，貼上執行。再執行FlashHeed.heed();
然後試試Google search，哇，彈出來的結果真的沒有再被Flash覆蓋，好犀利呀。
好，回到起點，假設不採納那個方案。
我依然想找出為什麼設定了wmode=opaque，也沒有效果?當中肯定是有些東西
找下找下，原來embed已經在HTML5重新定義，
<embed> Tag is redefine in HTML5
it have 4 attributes only.
http://www.w3schools.com/tags/tag_embed.asp
http://webdesign.about.com/od/htmltags/p/bltags_embed.htm
不過公司的網頁宣告還是<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
即是不用理會了，雖然現在有很多quality, title, pluginspage
最後搞了我半天，我把embed 放進一個Div，再加上style="overflow:hidden;"。
embed增加一個wmode屬性，設定值為opaque
刪除embed附近的
embed 的Flash爆了出來，令到Flash 的容器(Container)變成Body，雖然我不知道為什麼Flash會爆了出來。不過最後做到想要的結果就算了。
以上一看便知那都不知是那個舊Adobe DW自動生成的代碼，見到就不順眼。
重點是竟然在用HTML4.01，重點要用Flash當預上Mobile的時候。就會Redirect去另一頁，那頁用的是GIF，真的整個傻眼了。
細問之下，原來是可以話事的那位頭兒堅持要用Flash?! 因為首頁沒有Flash很單調。
哦，不！？Flash那些Mouse Hover亮燈的Effect，我可以靠Css hover解決，加少少javascript。算了，我想說的都說完。
其它參考資金
object tag
http://www.w3schools.com/tags/tag_object.asp
沒有留言:
張貼留言