DIV圖層 被 Flash 覆蓋解決方式

ok，這篇單純是因為google下的關鍵字第一篇找不到能夠直接用的，就找自己已經完成可用的方式做個紀錄。
前面幾篇過於冗長，不必要的資料太多了..
基於有點批評，就不說我下了什麼關鍵字了。 （或許是關鍵字下的太精簡？）

照例一行關鍵字：DIV、CSS、z-index、flash、swf、圖層、覆蓋、被蓋住、遮住、absolute

相信網頁設計者會碰到使用flash時，將原本在其上的圖層蓋住，而這篇文章就是講解如何將其恢復到正常的圖層位置。

通常在越上方的圖層會將下方的圖層蓋住。

例如：

我是上方圖層

我是banner圖層

正常情況下top圖層若使用 position:absolute; ，則在相同位置時，top的資料會蓋住下方的banner圖層。
但flash通常都會浮在最上方，跳脫了原本的層次，所以下面將講解如何處理。

處理方式為將置入的object（物件）標籤 embed加入個參數 wmode="transparent" 即可。
保險的話在加入 ，並在css上方div圖層加入z-index:10，而下方div則加入z-index:1。


看不懂對不對？ 沒錯，google第一頁的就是這樣，不清不楚的。
下面例子：（使用meebo的meebo me做示範）
環境解釋：top圖層放圖片、banner圖層放flash檔。


原始：

　　

增加部份：（使用粗體橘字）

　　

------------手工分隔線-------------

簡單來說只需要在 object 標籤內加入
並在embed標籤內，認src參數，在其加入 wmode="transparent" 即可。

而加入後也會有flash背景透明的效果。


css部份的話，可以用此方式：（也是用上方的top跟banner例子來舉例。）

連結/匯入方式

#top {
position:absolute;
z-index:10;
}

#banner{
position:absolute;
z-index:1;
}

z-index上只要數字越大，圖層將會在越上面。下方的圖層則會被上方的遮住（若為同一位置的話）。



HTML內方式

.... 後面省略


------------------------------------
後記：

因為meebo me widget的標題不能使用中文，本來打算使用gif檔用圖層方式覆蓋，但若使用了 wmode="transparent" ，則無法輸入中文，所以只能作罷。

以上
因為google第一頁沒辦法直接處理所以發文 XD

reference: http://ezcshi.pixnet.net/blog/post/25515486

Photoshop切圖出來的HTML在Firefox中,版型跑掉

情境：
美工同事用Photoshop切圖出來的HTML，套版後，在IE看是正常，
但在Firefox中,版型卻跑掉

解決：
原來是Photoshop切圖會產生一個間距檔「間距.gif」，
把它改成space.gif，Firefox的版型即可恢復正常

[Browser]“取消”和“停止”流覽器事件 stopEvent

這種做法是從Bret Taylor的blog上面抄來的，原文地址在這裡（好像是，不是也別怪我。）。對於避免ajax應用中不同層的事件干擾很有用的。

先說一下“取消(cancel)”和“停止(stop)”的區別:說白了，停止就是當事件發生後，阻止它自動冒泡到父容器內；而取消則是當冒泡發生到父容器之後停止，也就是不在當前元素中回應。天哪，這東西說起來話長了，代碼說話：

function stopEvent(e) {
if (!e) e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}

var link = document.getElementById("link");
link.onclick = stopEvent;

以上這一段是阻止父容器事件的

function cancelEvent(e) {
if (!e) e = window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}

var link = document.getElementById("link");
link.onclick = function(e) {
cancelEvent(e);
stopEvent(e);
}

以上這一段是阻止子元素事件的

例子位址在這裡：demo

[Debug]將input type=file的value清空

用以下的語法即可

<input type="file" onclick="this.outerHTML=this.outerHTML;">