IEでカーソルをオリジナルの画像に指定、変更するにはどう指定すればいいのでしょうか？

IEでカーソルをオリジナルの画像に変更するには
どう指定すればいいのでしょうか？
今、スタイルシートで以下のように指定しています。

body{
cursor:url(../images/sample.gif),url(../images/sample.cur),url(../images/sample.png),url(../images/sample.ani),default;
}

これだとIEではカーソルが変更されませんでした。
使用しているIEは11です。
chrome,Firefox,Edgeでは確認済です。

やってみた事
指定する順番を変えてみました。
画像のサイズを32と40で指定してやってみました。
色数は256と16bitでやってみました。
curやaniに変換したサービスの不具合？（ウェブ上で変換するサービスを利用）
変換方法は１通りしか試してません。

どう指定すればIEでカーソルが変更できますか？
IEでは「出来ない」という回答でも構いませんのでお教えください。
その場合は何か解説ページなどお教えいただけますと幸いです。

x_x

2018/03/28 05:43

再現しません。どこのサービスを利用したのでしょうか？ IEはcurとaniが使えます。

行動規範の内容に同意します

回答2件

ベストアンサー

原因がわかりました。

CSSのcursorでマウスポインタをオリジナルにアレンジ
https://norm-nois.com/blog/archives/3368#ie

念のためサーバーを立てて検証してみたところ、IE11においてCSSファイルからのパスではなく、HTMLファイルからのパスで見にいっているようです。
そのため、このブログでも言っているように、絶対パスで記述するのが無難です。(NN4みたい……)

CSS
1body {
2  cursor: url("/foo/bar/images/sample.gif"), url("/foo/bar/images/sample.cur"), url("/foo/bar/images/sample.png"), url("/foo/bar/images/sample.ani"), default;
3}

投稿2018/03/28 06:57

x_x

総合スコア13749

Samson818

2018/03/28 07:38

わ～！ありがとうございます！！表示されました一歩前進です！！！一歩前進というのはアルファチャンネルがうまく抜けてくれてません。 .curの限界でしょうか？ひとまずもう少しいろいろ探してみます。ありがとうございます！！

Samson818

2018/03/28 07:41

違いました。curファイルではない違うファイルが表示されてました汗どうやら最後に読み込んでいる.aniが表示されていたようです。

x_x

2018/03/28 08:40

こちらではcurファイルが表示できてしまったのでわかりませんが、ここに気になる記事がありました。GIMPで保存(ico形式)してみてはどうでしょうか？ > CURファイルは圧縮形式または非圧縮形式で保存できますが、すべてのブラウザで圧縮形式を読み取ることはできません。 http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/

Samson818

2018/03/29 07:22 編集

実は絶対パスで書いたところ他のブラウザでカーソルが表示されなくなり最終的に以下のようにしました。（タダのミスかもしれませんが・・・） cursor: url(../images/sample.cur),url(../images/sample.gif),url(../images/sample.png),url(/foo/bar/images/sample.ani),default; ひとまずaniファイルの変換さえアルファチャンネルが出せればってところで止まりました。 aniの方はいい変換サイトがないです。どこかからアプリをダウンロードして試してみます。

x_x

2018/03/28 09:01

GraphicsGaleというのがあるみたいですが、どうでしょ？ https://graphicsgale.com/

Samson818

2018/03/29 07:50 編集

結局、ファイル形式、相対パス、絶対パス、総当たりで確認していきました。 IE,Edge,Chrome,Firefoxすべてに1行で対応できた形がありました。画像の変換ミスも重なってエライ苦労しました。。。皆さん、ありがとうございました。 cursor:url(http://foo/ba/images/sample.cur),auto;/*chrome,Firefox,Edge,IE対応*/ 「先端」を指定できる形もありますが、IE,Edgeは対応していないようです。 cursor:url(http://foo/ba/images/sample.cur) 1 1,auto;/*Edge,IE未対応*/

行動規範の内容に同意します

こうしたらどうでしょう。

CSS
1body {
2    cursor:url(../images/sample.gif);
3    cursor:url(../images/sample.gif),url(../images/sample.cur),url(../images/sample.png),url(../images/sample.ani),default;
4}

【cursor - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/cursor

投稿2018/03/28 05:44

kei344

総合スコア69400

x_x

2018/03/28 05:49

IEではgifが使えないため、一行目は単に無視されると思います。

kei344

2018/03/28 05:52

未検証ですがcurなら使えるでしょうか？とりあえず複数指定が失敗している可能性があるのでは、という回答になります。

x_x

2018/03/28 05:55

手元のIE11では複数指定(gif,aniの順)でani形式が読み込めました。使っているサービスで画像形式を正しく変換できていないのではないかと思っています。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

kei344

2018/03/28 05:59

To: x_xさんそうなのですね、内容的にもそちらのURLが適切ですね。

Samson818

2018/03/28 06:57

ありがとうございます。教えていただいたサイトを参考に下記の様に修正いたしました。 cursor:url(../images/sample.cur);/*IEは.curと.aniのみ対応*/ cursor:url(../images/sample.gif),url(../images/sample.png),url(../images/sample.ani),default; ダメでした。現在普通に表示される.curファイルを探しております。これが表示されれば、変換が悪いですよね。変換はこちらで行っております。 https://convertio.co/ja/png-converter/

行動規範の内容に同意します

あなたの回答