以前在我對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;　　/*將條例項目的外邊界設定為０；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 的頭像
    Joy

    正Man's World

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