滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語(組圖系列)

2008050517:13

自訂樣式應用                         語法應用編輯         (二度空間) 

本教學圖片感謝e e 部落格製作提供 。圖片出現不完全時，請點我

←指標滑過圖面示範
 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/22-6.gif) no-repeat;width:130px;height:48px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/22-5.gif) no-repeat;width:130px;height:48px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/21-5-1.gif) no-repeat;width:131px;height:69px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/21-5.gif) no-repeat;width:131px;height:69px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/12-4-1.gif) no-repeat;width:132px;height:92px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/12-4.gif) no-repeat;width:132px;height:92px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/08-6-1.gif) no-repeat;width:125px;height:96px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/08-6.gif) no-repeat;width:125px;height:96px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/19-6.gif) no-repeat;width:128px;height:90px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/20-6.gif) no-repeat;width:128px;height:90px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/09-4-1.gif) no-repeat;width:125px;height:105px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/09-4.gif) no-repeat;width:125px;height:105px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/05-7-1.gif) no-repeat;width:126px;height:106px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/05-7.gif) no-repeat;width:126px;height:106px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/03-7-1.gif) no-repeat;width:125px;height:115px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/03-7.gif) no-repeat;width:125px;height:115px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/07-6-1.gif) no-repeat;width:126px;height:100px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/07-6.gif) no-repeat;width:126px;height:100px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/02-7-1.gif) no-repeat;width:125px;height:100px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/02-7.gif) no-repeat;width:125px;height:100px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/01-7-1.gif) no-repeat;width:125px;height:118px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/01-7.gif) no-repeat;width:125px;height:118px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/13-4-2.gif) no-repeat;width:134px;height:130px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/13-4.gif) no-repeat;width:134px;height:130px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/04-8-1.gif) no-repeat;width:125px;height:125px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/04-8.gif) no-repeat;width:125px;height:125px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/81-1-1.gif) no-repeat;width:132px;height:134px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/81-1.gif) no-repeat;width:132px;height:134px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/80-1-1.gif) no-repeat;width:132px;height:134px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/80-1.gif) no-repeat;width:132px;height:134px;text-indent:-300px;}

 /*滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖語*/
#ymodmsgbd h3 a:hover,#ymodmsgbd h3 a:active {display:block;background:url(http://connie-ee.t35.com/601/05/82-1-1.gif) no-repeat;width:132px;height:176px;font-size:0;text-indent:-300px;}		  /*留言板按紐自訂圖片*/
#ymodmsgbd h3 a {display:block;background:url(http://connie-ee.t35.com/601/05/82-1.gif) no-repeat;width:132px;height:176px;text-indent:-300px;}

PS : 如果同時使用了滑鼠靠近超連結加邊框語法，建議例如:width:132px;height:134px
的高度值減掉邊框的設定值倍數，例如 : 滑鼠靠近超連結加邊框粗細值為 2px 那麼
width:132px;height:134px 的調整值是width:132px;height:130px ，這麼做的原因是，當
滑鼠指標滑過按壓『留言板』按鈕，轉換招呼圖時，比較不會有圖片位移的感覺。
另外 : 某些情況下須用到圖片置中時，在 no-repeat 的前端空一格加上 center ，
例如 : center no-repeat 即可，其它語法不變。左右組語法必需同時使用，才有作用。

貼語法路徑→管理部落格→面板設定→自訂樣式→加入語法→確定

自訂樣式檢圖說明→ http://xs320.xs.to/xs320/07421/W6-4.jpg

嵌入式引用語法 : ↓↓

<embed src="http://t7220865.googlepages.com/Message.htm" width="640" height="4450" ></embed>

上一篇

招呼語圖框自訂樣式應用(適合2008/2月以後CSS新制)

下一篇

滑鼠指標滑過按壓『留言板』按鈕，轉換成招呼圖 1

相關文章

我要留言