1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [JS]動態變換CSS樣式(Yahoo為例)
js 網頁開發

[JS]動態變換CSS樣式(Yahoo為例)

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

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

[範例預覽] [範例下載]