載入所要使用的*.cur或*.ani檔，然後大多是對於自己部落格之類的教學。
而我試著將自己開發的專案加入自訂的游標，而非使用別人寫好的框架，當然不外乎一定要去修改css檔案，正常來說網路上大多提供了此兩個方式寫法舉例來說如下body{cursor:url(http://home.kimo.com.tw/seek2007tw/ani/12/055.ani)}
a:hover {cursor:url(http://home.kimo.com.tw/seek2007tw/ani/12/055.ani)}
http://home.kimo.com.tw/seek2007tw/ani/12事實上這一串是網路空間的url，用這種方式你還必須去申請一個網路空間或是自己花錢架Web Server，而我所在意的是由於我的開發環境並不能連結外部的URL，所以這方式對我而言是沒有用的，因為提供以下方式供大家參考。
首先開發一個Web Application會有WebContent的目錄，此時將你的*.ani或*.cur(游標檔案)放至
WebContent下，這個時候你就可以得到你所在的url，例如我的專案名稱為xxx而測試環境為127.0.0.1此時可以得到此URL為http://127.0.0.1/xxx/*.ani再將此URL放至你的CSS檔案中，如此一來你就可以得到專屬於你自己網路的游標圖示，而非呼叫外部的URL。
----------------------------------------------------------------------------------------------------------
延伸閱讀---由於先前測試時是使用IE6,IE8,IE9測試，利用上面方式已可正確執行，但這是利用直接修改CSS檔來定義自訂游標，由於我的專案擁有許多頁面，我只希望在部分頁面有這樣的效果，那麼只需在你的頁面原始碼<head></head>之間加入
body{
cursor:url("http://127.0.0.1/xxx/*.ani");
}
</style>
那麼你的效果就可以只在那個網頁產生，而其實更進一步其實由於我們是開發自己的Web Application所以其實我們的URL可以指定絕對路徑，意思就是目錄，
ex:cursor:url('/web/resource/images/*.ani');(建議新增一個目錄，注意加入'')
由於我開發的專案需要滿足客戶的需求是支援 IE及Chrome瀏覽器，但結果我使用上列語法執行時在Chrome並不會顯示出我想的效果，首先我試著查找是否是語法API問題，根據http://www.quirksmode.org/css/cursor.html這裡說明了關於cursor的 API用法以及所支援瀏覽器的版本，其中Chrome是使用Safiri核心，我先前文章有提過，找到url這段，看起來是支援的，而看到許多網路上的建議是使用cursor:url("http://127.0.0.1/xxx/*.ani"),pointer;這樣的寫法(default,pointer,...)看你想將你的自訂游標取代什麼游標，而我使用上列語法後在IE仍為正常，而Chrome卻出現了pointer的預設圖案(跟hand一樣)，我更加確定了Chrome確定有支援，但為何沒有跑出我的.ani檔呢!?沒錯，Chrome不支援使用*.ani檔案，但有支援.cur以及.png&.gif的檔案，所以首先你可以 download網路上有提供免費的.cur檔案，再將檔案放至於ani相同路徑的，但是.ani是一個動畫游標，如果我希望能在IE使用，可以使用下列語法
而事實上你還必須找到可將ani轉換成png的軟體，如此一來現在不管什麼瀏覽器都能使用了(除了Opera不支援url寫法)。
參考網站:
http://www.coursesweb.net/css/css-cursor-property-custom-cursors
http://www.w3schools.com/cssref/pr_class_cursor.asp
----------------------------------------------------------------------------------------------------------
延伸閱讀---由於先前測試時是使用IE6,IE8,IE9測試，利用上面方式已可正確執行，但這是利用直接修改CSS檔來定義自訂游標，由於我的專案擁有許多頁面，我只希望在部分頁面有這樣的效果，那麼只需在你的頁面原始碼<head></head>之間加入
body{
cursor:url("http://127.0.0.1/xxx/*.ani");
}
</style>
那麼你的效果就可以只在那個網頁產生，而其實更進一步其實由於我們是開發自己的Web Application所以其實我們的URL可以指定絕對路徑，意思就是目錄，
ex:cursor:url('/web/resource/images/*.ani');(建議新增一個目錄，注意加入'')
由於我開發的專案需要滿足客戶的需求是支援 IE及Chrome瀏覽器，但結果我使用上列語法執行時在Chrome並不會顯示出我想的效果，首先我試著查找是否是語法API問題，根據http://www.quirksmode.org/css/cursor.html這裡說明了關於cursor的 API用法以及所支援瀏覽器的版本，其中Chrome是使用Safiri核心，我先前文章有提過，找到url這段，看起來是支援的，而看到許多網路上的建議是使用cursor:url("http://127.0.0.1/xxx/*.ani"),pointer;這樣的寫法(default,pointer,...)看你想將你的自訂游標取代什麼游標，而我使用上列語法後在IE仍為正常，而Chrome卻出現了pointer的預設圖案(跟hand一樣)，我更加確定了Chrome確定有支援，但為何沒有跑出我的.ani檔呢!?沒錯，Chrome不支援使用*.ani檔案，但有支援.cur以及.png&.gif的檔案，所以首先你可以 download網路上有提供免費的.cur檔案，再將檔案放至於ani相同路徑的，但是.ani是一個動畫游標，如果我希望能在IE使用，可以使用下列語法
cursor: url('*.ani'), url('*.png'), default;
而事實上你還必須找到可將ani轉換成png的軟體，如此一來現在不管什麼瀏覽器都能使用了(除了Opera不支援url寫法)。
參考網站:
http://www.coursesweb.net/css/css-cursor-property-custom-cursors
http://www.w3schools.com/cssref/pr_class_cursor.asp
沒有留言:
張貼留言