用CSS製作可交換帶事件處理的圖片按鈕

來源:互聯網
上載者:User
      按鈕是網頁最常用的控制項了,怎樣設計一個更好看的按鈕,這兩天實驗了幾種方法:
      1、用Javascript交換圖片的方式先在網頁中製作圖片,然後把圖片轉換為伺服器端控制項,為該控制項添加事件處理。不過,很遺憾,運行時不響應,我估計跟圖片被交換了有關。
      2、按鈕在交到頁面時,其實就是一個input,那麼用css寫一個樣式就ok了。結果,發現用戶端的頁面中,按鈕的ID雖然是原來的ID,但是寫的CSS並沒有起作用。原來,.net自己為按鈕加了一個style,優先順序顯然比自訂的要高了。看來得想辦法把系統自動加的style屏蔽掉才行。
      3、再試HyperLink,為它寫css,結果圖片交換沒有問題,可是又無法把按鈕事件加上。
      4、最後,用LinkButton,仍然以LinkButton的ID寫css,然後把文字去掉。結果,交換圖片效果和事件處理都能兼顧。
      也許還有更好的辦法吧,不過這樣已經比較簡單了。只要改css就基本搞定一切了。CSS很簡單:#ok{}{
    position:relative;
    border:0px solid #000000;
    height:42px;
    width:110px;
    top:85px;
    left:60px;
    position:relative;

}
#OkBtn{}{
    display:block;
    width:100%;
    height:100%;
    background-image:url(../images/login_ok_1.jpg);
}
#OkBtn:hover{}{
    background-image:url(../images/login_ok_2.jpg);
}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.