以前在我對CSS還是怕怕的不敢碰的時候,對於這個效果我永遠都是向DW求救。
所以寫出來的javascript總是超多又長而且還看不太懂:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

 
而且,光是連結的部份要寫的動作,就有得寫了:
<a href="show_all_case.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','../image/bt_02_on.gif',1)"><img name="Image2" border="0" src="../image/bt_02_off.gif" width="62" height="13"></a>
 
自從我跟CSS相遇之後,我發現,只要一開始跟它搞好關係,以後的路都會比較好走....
來源:飛肯教學
先把你要做變化的兩個圖片做好,就像這樣兩個不同的圖檔(至少看得出變化,不然就沒意義了不是?):
cats-crop-vert.jpg 
再來呢,就是先把你要做成按鈕的部份準備好(HTML):
<div id="MENU">
<ul>
  <li><a href="#" title="【飛肯設計學苑】">Flycan.com</a> </li>
  <li><a href="#" title="Dreamweaver CS3">Dreamweaver CS3 課程</a></li>
  <li><a href="#" title="Flash CS3">Flash CS3 課程</a></li>
  <li><a href="#" title="Photoshop CS3">Photoshop CS3 課程</a></li>
 </ul></div>
 
最後就是最關鍵的部份了(CSS):
#MENU {  /*在條例項目之外用一個<DIV>區塊包起來*/
  width: 720px;  /*設定<DIV>區塊寬度為720px*/
  margin:0 auto;  /*將<DIV>區塊置中*/
}


ul{
  list-style-type: none;  /*將條例項目左邊的黑點取消*/
  margin: 0;  /*將條例項目的外邊界設定為0;IE和FF就會一致*/
}


li{
  float: left;  /*讓條例項目呈現水平排列*/
}

li a{
  display: block;  /*將超連結設定為區塊模式*/
  width: 180px;  /*設定超連結區塊的寬度*/
  height: 40px;  /*設定超連結區塊的高度*/
  background-image: url(button_01.gif);  /*設定超連結區塊的背景圖片*/
  line-height: 40px;  /*設定超連結文字的行高*/
  text-align: center; /*設定超連結文字置中*/
  color: #000000;  /*設定超連結文字的顏色*/
  font-family: Arial, Helvetica, sans-serif;  /*設定超連結文字的字型*/
  font-weight: bold;  /*設定超連結文字的為粗體*/
  text-decoration: none;  /*將超連結的底線去除*/
  font-size: 12px;  /*設定超連結文字的大小*/
}


li a:hover{
  background-image: url(button_02.gif);  /*設定滑鼠摸到超連結時會改變背景圖片*/
}
要是還想有更多變化,飛肯的論壇還有指令列表文字大小的說明,都可以去看看。這是另外一個類似但不同的範例1範例2

如果飛肯有在高雄開課該有多好....
arrow
arrow
    全站熱搜

    Joy 發表在 痞客邦 留言(0) 人氣()