自從奇摩首頁改版後，不難發現除了整體的視覺效果提昇外，還新增許多的互動效果，讓使用者可自行設定操作界面與色彩，但神奇的是當變換色系時，畫面則會即時變更，不會出現重新整理的情形，那是否何辦到的呢?其方法相當的簡單，首先，先將樣式設定好，每個色系都有個自獨立的CSS檔，當使用者觸發變色時，再將該色系的樣式載入進來。
為了方便解說，因此就容許梅干桑偷懶一下，直接用替換整張圖片的方式，但原理是一樣的，只要將各塊狀的圖示與顏色設定好，之後就剩下切換的動作啦!而切換也相當的簡易，梅干桑寫了簡短幾行的javascript來作切換，接下來就與各位一同來分享梅干桑的製作方法啦!
放在＜head＞…＜/head＞之間
<link href="css/style01.css" rel="stylesheet" type="text/css" id="cssStyle">
<script type="text/javascript">
function mm_changeStyle(file){
document.getElementById("cssStyle").setAttribute("href",file);
}
</script>
放在＜body＞…＜/body＞之間
<img src="img/changeStylebt.gif" alt="" width="101" height="4" usemap="#Map" border="0"/>
<map name="Map" id="Map">
<area shape="rect" coords="39,15,50,27"
href="javascript:mm_changeStyle('css/style01.css');" />
<area shape="rect" coords="56,15,68,26"
href="javascript:mm_changeStyle('css/style02.css');" />
<area shape="rect" coords="73,15,84,27"
href="javascript:mm_changeStyle('css/style03.css');"/>
</map>
[範例預覽] [範例下載]
