自訂網頁中的滑鼠游標

筆者在修改滑鼠游標中有提到如何修改自訂的滑鼠游標，一開始也以為 FireFox 並不支援，不過經網友提到說是可支援時，就也去看了文件，發現確實是沒問題的。所以就來跟大家分享交流一下心得！

網頁中滑鼠要用自訂的游標的話，就要把 cursor 的值設為 url(游標檔路徑) 才行。而 cursor 的屬性值有18種之多：auto、crosshair、default、hand、move、help、wait、text、w-resize、s-resize、n-resize、e-resize、ne-resize、sw-resize、se-resize、nw-resize、pointer 及 url。常用的大多是：default、hand、pointer 及 url 等。

全部的效果可以參考範例網頁：http://demonstration.abgne.tw/css/0002/css-cursor.html

其中 hand 跟 pointer 都是一樣的手指狀，不過 pointer 才是標準的用法， hand 應該是只有 IE 才認得！

在範例網頁中，除了最後二格的滑鼠是 Wii 的形狀外，其它的都是內建的造型，看起來應該是蠻不顯眼的。另外若是用 FireFox 來瀏覽的話，是不支援 url 屬性值的！



雖然並不是全部瀏覽器都支援，但我們的重點還是在 cursor 的 url 屬性上！url() 中要放的是滑鼠游標的檔案路徑。

這邊我準備了四個不同的滑鼠游標：

檔案位置：http://demonstration.abgne.tw/css/0002/wii.ani
檔案位置：http://demonstration.abgne.tw/css/0002/select.ani
檔案位置：http://demonstration.abgne.tw/css/0002/point.cur
檔案位置：http://demonstration.abgne.tw/css/0002/link.cur
其中的 ani 游標算是動態的，而 cur 游標算是靜態的。(如要使用請利用：滑鼠遊標包下載)

讓我們先直接來看個範例吧：

1

<div id="mouse">這是 IE 滑鼠游標的範例</div>

先在 Body 中放置一個 Div 區塊來做滑鼠游標的改變

1
2
3
4
5
6

#mouse{
    width:300px;
    height:300px;
    border:1px solid black;
    cursor:url(wii.ani);
}

指定了 Div 區塊的寬高及邊框，並把它的滑鼠游標改成自訂的，接著就能看效果了



在 Div 區塊中的滑鼠游標就變成我們自訂的了。

不過若是用 FireFox 來瀏覽的話，會發現到並沒有任何的效果，ㄟ~難道是 FireFox 不支援嗎？非也非也！

就 W3C 的 Spec 中的解釋，若是要用 url(游標檔路徑) 的方式的話，則要像 font-family 這些屬性一樣，要多放幾個備用的游標。假如第一個指定的游標不存在或是不支援時，還能用其它的游標，當然系統預設的游標是一定會有的。

因此，不管是在 IE 或是 FireFox 中，若要用自訂游標的話，就得再多設幾個備用的游標。

那現在我們只要稍稍修改一下就能在 FireFox 中用自訂的游標了

1
2
3
4
5
6

#mouse{
    width:300px;
    height:300px;
    border:1px solid black;
    cursor:url(point.cur), default;
}

當自訂的游標不存在或是不支援時，我們就再指定一個 default 的游標，接著看 FireFox 是否有改變囉



嘿~現在 FireFox 也能用自訂的游標囉。

不過，FireFox 好像不支援 ani動態游標，若是用 gif 檔來當動態游標的話，是支援 gif檔，不過不會有動畫的效果。另外，雖然 FireFox 能支援像是 gif 檔或是 png 檔來當游標，但換 IE 不支援了！

範例瀏覽：
http://demonstration.abgne.tw/css/0002/0002_1.html
http://demonstration.abgne.tw/css/0002/0002_2.html
http://demonstration.abgne.tw/css/0002/0002_3.html