網路城邦
上一篇 回創作列表 下一篇 　 字體：小 中 大
【教學】游標穿新衣
2008/05/04 01:11:25瀏覽10528｜回應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
    →其他游標素材網站：
    語法放置位置：
    進階教學：
    附註１：引用自：

    滑鼠游標樣式可運用在任何標籤.例如:
    整個網頁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) 這是錯誤的
    附註２：請使用游標素材者下載游標後上傳自個人網路空間，請勿直接連結。
    為了原提供素材者的流量著想，也為自己著想吧！

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

    引用
    引用網址：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 頁　 回應文第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁