利用css做圖片按鈕特效

利用篩選器讓滑鼠事件做Alpha的變化

css的部份

.bnt a img {
opacity: .7; /* 70% for Firefox */
filter: Alpha(Opacity=70,style=0); /* 70% for IE */
}
.bnt a:hover img {
opacity: .1; /* 100% for Firefox */
filter: Alpha(Opacity=100,style=0); /* 100% for IE */
}

html的部份

<div class="bnt">
  <a href="javascript:void( 0 )"><img src="bnt.jpg" /></a>
</div>

css去除連結框線

瀏覽器每次點選連結總有討人厭的虛線很討厭，想要去除他只要在CSS設定可能會有滑鼠事件的標籤作一次宣告即可

css的部分

a,input{
outline: none; /* for Firefox */
hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

純css的預載圖片

原理是先設定一份css的背景樣式然後再隱藏它,因此是看不到圖片的 但是他還是存在 所以達到預先下載的功能

css的部份

#preloader{
/*Imsges you want to preload*/
background-image:url(image1.jpg);
background-image:url(image2.jpg);
width: 0px;
height: 0px;
display: inline;
}

html部分

<div id="preloader"></div>

延伸作法 把圖片合成成一張大張的圖 這樣只需要下載一張
然後利用div區塊只顯示設定的寬高內區域的特性
對背景設定它的垂直 水平 位移量 這樣也是能夠有預載的功能
因為圖片都是同一張