網路城邦
上一篇 回創作列表 下一篇   字體:
【教學】游標穿新衣
2008/05/04 01:11:25瀏覽10539|回應14|推薦25


你是不是也想讓游標穿新衣呢?

跟著做,就ok哩!

滑鼠游標樣式語法: 引用自:

<STYLE type="text/css">
<!--
body{選擇想要的游標樣式語法;} 
-->
</STYLE>

例如:

<STYLE type="text/css">
<!--
body{cursor:move;} 
-->
</STYLE>

此為十字箭頭的游標

  • 作業中 cursor:progress
  • 十字型 cursor:crosshair
  • 箭頭朝上 cursor:n-resize
  • 箭頭朝下 cursor:s-resize
  • 十字箭頭 cursor:move
  • 箭頭朝右 cursor:e-resize
  • 箭頭朝左 cursor:w-resize
  • 加一問號 cursor:help
  • 箭頭朝左上 cursor:nw-resize
  • 箭頭斜右下 cursor:se-resize
  • 文字I型 cursor:text
  • 箭頭斜左下 cursor:sw-resize
  • 箭頭朝右上 cursor:ne-resize
  • 漏斗 cursor:wait
  • 手型(IE6) cursor:pointer
  • 無法使用(IE6) cursor:not-allowed  

    游標圖案語法:

    <STYLE type="text/css">
    <!--
    body{cursor:url(游標網址);}/*移到網頁時的滑鼠游標*/
    a{cursor:url(游標網址);}/*移到超連結時的滑鼠游標*/ 
    -->
    </STYLE>

    PS.游標副檔名須為.ani / .cur / .ico

    游標素材:感謝栀baby做的整理

     

  • →游標的對應網址:
    游標編號1-5
    游標編號6-10
    游標編號11-15
    游標編號16-20
    游標編號21-25
    游標編號26-30
    游標編號31-35
    →其他游標素材網站:
    語法放置位置:
    進階教學:
    附註1:引用自:

    滑鼠游標樣式可運用在任何標籤.例如:
    整個網頁body{cursor:e-resize}
    所有表格內table{cursor:e-resize}
    使用圖案滑鼠游標例如:
    body {cursor:url("mything.cur"),url("mything.cur"),text;}
    當無法處理游標名單的第一個游標,則會以第二個游標代替
    若無法處理任何定義的游標,最後便以一般游標text顯示
    (圖案滑鼠游標寫法是W3C發佈的標準)
    |X| 大部份常寫為 cursor:url(img/cur_f4.ani) 這是錯誤的
    附註2:請使用游標素材者下載游標後上傳自個人網路空間,請勿直接連結。
    為了原提供素材者的流量著想,也為自己著想吧!

    延伸閱讀:css教學 -- 變更ฺ滑鼠指標
  • ( 休閒生活網路生活 )
    回應 推薦文章 列印 加入我的文摘
    上一篇 回創作列表 下一篇

    引用
    引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=eg0501&aid=1836195
     引用者清單(2)  
    2009/05/25 20:45 【*紫米漿 * 的部落格】 【教學】游標穿新衣
    2008/05/04 01:15 【網路公關與行銷】 【教學】游標穿新衣

     回應文章 頁/共 2 頁  回應文章第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁

    雪莉酒
    等級:7
    留言加入好友
    麻煩學姊
    2010/04/06 00:09

    我把照片po在我部落格的相本裡

    可以請學姐去看看嗎?

    上面就會很清楚

    ─=☆EG☆=─(eg0501) 於 2010-04-12 23:37 回覆:

    學妹你有在按確定之前~點選在"編輯自定模式"嗎?

    如下圖的第5點處!


    雪莉酒
    等級:7
    留言加入好友
    貼上照片
    2010/03/22 20:58

    這是未貼上游標前

    這是貼上游標後,游標是有了,但,背景不見ㄌ,而且連標題也沒了

    ─=☆EG☆=─(eg0501) 於 2010-03-23 10:31 回覆:

    學妹我看不到你貼的圖片


    雪莉酒
    等級:7
    留言加入好友
    游標可以用但.....
    2010/03/21 16:31

    首先先感謝學姐提供游標^^

    可是我PO上去時

    游標可以用,但背景圖卻不見了

    已經試了好幾次都這樣

    可以告訴我是什麼原因嗎?

    ─=☆EG☆=─(eg0501) 於 2010-03-22 19:21 回覆:

    阿勒

    不會是去動到背景圖的語法了吧!?

    ─=☆EG☆=─(eg0501) 於 2010-03-22 19:23 回覆:

    你可以拍下畫面給我看嗎?我比較方便瞭解!

    或是把全部語法貼給我看!


    Meil
    3Q
    2009/11/21 00:23
    謝謝大大分享=D
    ─=☆EG☆=─(eg0501) 於 2010-02-05 15:56 回覆:

    ~*御楓*~
    等級:6
    留言加入好友
    分享
    2009/08/25 23:05

    分享囉!

    謝囉

    ─=☆EG☆=─(eg0501) 於 2009-08-29 12:59 回覆:


    等級:7
    留言加入好友
    = =
    2009/02/01 17:44

    看了你的說明

    還是不太懂

    游標要線上傳到相簿嗎?

    還是...


    ─=☆EG☆=─(eg0501) 於 2009-02-03 21:22 回覆:

    不是唷!

    是網路空間!

    例如~如果你有申請gmail那他會有個網頁空間給你!


    susan
    感謝分享
    2008/11/22 12:37
    我拿走一些嚕!!
    感謝分享喔!!
    ─=☆EG☆=─(eg0501) 於 2008-11-22 19:06 回覆:

    ok的!哈


    黃色呆鴨
    等級:4
    留言加入好友
    游標穿新衣
    2008/11/21 14:59

    好多流星的背景~不知道可否許願~

    感謝EC游標穿新衣的教學~

    ─=☆EG☆=─(eg0501) 於 2008-11-22 00:04 回覆:

    可以許願呀^^

    你也可以點播歌曲唷^^cc

    不客氣,這都是搜集來的!

    如果有不懂再問我吧^^

    我會盡力去幫你解答的^^


    V家
    等級:7
    留言加入好友
    字好小啊
    2008/10/31 19:36

    文章的字好小哦~~
    我要去拿放大鏡才能看到您的教學指導
    謝謝這個教學貼
    有空也要學著弄一個玩一玩

    ─=☆EG☆=─(eg0501) 於 2008-11-01 10:23 回覆:

    哈~因為EG調皮~把字縮小了!ㄎㄎ

    好好玩唷!


    ─=☆EG☆=─
    等級:8
    留言加入好友
    預覽游標圖案
    2008/10/25 17:28

    ◎  預覽游標圖案+顯示游標網址 

    <font style="cursor: url('游標網址')">☆把滑鼠移來此處就會顯示游標☆:游標網址>

     

     

    ◎  預覽游標圖案 +下載 

    <font style="CURSOR: url('游標網址')">☆把滑鼠移來此處就會顯示游標☆</font></font> </font><a href="游標網址" target="_blank">按此下載</a>

    FROM: 安妮的窩


    頁/共 2 頁  回應文第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁