為了方便解說，因此就容許梅干桑偷懶一下，直接用替換整張圖片的方式，但原理是一樣的，只要將各塊狀的圖示與顏色設定好，之後就剩下切換的動作啦!而切換也相當的簡易，梅干桑寫了簡短幾行的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>
[範例預覽] [範例下載]