IE・Chrome・Firefoxでcursorプロパティの画像を使う方法
カテゴリー:javascript,PC,WebIE・Chrome・Firefoxでcursorプロパティの画像を使うのにすごく(2時間ぐらい)手こずりました、、、
次は手こずらないためにもメモをします!
案の定IEが立ちふさがる
Chrome・Firefoxは「.png」「.jpg」「.gif」などが使えるけど
やはり「IE」さんだけは邪魔をしてくるんですよね、、、
だったら、とことん戦ってやる!
って意気込みでいろいろやってみました。
「.cur」っていう拡張子のファイルが行けるっぽい!
、、、って思った時期がMaMoTaKuにもありました、、、
Chromeさんだと表示されない(泣)
お前らいったいなんなんだよ!
もういいよ、ブラウザによって使う画像変えればいんだろ
てことで、ブラウザによってアイコン画像を出し分けることにしました。
※注意
pngの画像は32×32以下だったらいくつでも大丈夫(だったはず)なのですが、
curの画像は16×16または、32×32で作らないと使えません!
かなり重要!(png , cur両方とも32×32で作るのが無難です!)
まずは画像を作りましょ
pngでアイコン画像をまずつくります!
今回はこのzoomIcon.pngを使って進めて行きます!
そんで、ここからが本番!
png画像をcur画像に変換しましょう!
ちなみに、変換ソフトはWindowsのみです笑!
http://www.vector.co.jp/soft/dl/win95/art/se295068.html
こちらのサイトで『ポチの手』をダウンロードし、ソフトを起動します。
起動したら、
・変換したいアイコン画像を読み込む
・保存先を決める
・書き出す拡張子をcurにして実行する
これで「png」と「cur」のアイコン画像の完成です!
楽しい楽しいJSのお時間ですよ!
JavaScriptで今回やってあげなきゃいけないことは
・ブラウザの判定
・FirefoxとChromeは「png」が使えるのでIEの時だけ「cur」に書き換えるプログラムを書く
大きく別けるとこの2つです!
// IE判定 function IECheck() { var userAgent = window.navigator.userAgent.toLowerCase(); if ((userAgent.indexOf("msie") == -1 && userAgent.indexOf('trident') != -1) || userAgent.indexOf("msie") != -1) { // IEの場合 return true; } else { // IE以外の場合 return false; } } // ブラウザによって与えるスタイルを分ける $(function() { if (IECheck()) { // IEだった場合 // #zoomAreaにスタイルでcursorを設定する $("#zoomArea").css({"cursor" : "url(/images/zoomIcon.cur), pointer"}); } else { // IEじゃない場合 $("#zoomArea").css({"cursor" : "url(/images/zoomIcon.png), pointer"}); } });
これで完成です!
注意点が2つだけあり、
・IEだとhtmlから見たパスで画像を取得しに行ってしまうため、階層によっては画像が表示されません。
なので、絶対パスで記述しましょう!
(ついでにFirefoxとChromeの方も絶対パスで書いておけば管理が楽かも?)
・〜〜.cur) , pointerの様に「)カッコ」の後ろにスペースをあけるとなぜかアイコンが表示されないバグがあるので、
おとなしくソースをコピーして使って下さい。
MaMoTaKuは,(カンマ)の前後にはスペースをあける癖があるんですが、そのせいでバグが発生して時間を浪費しました、、、
ちょっと憧れだったデモを作っておきました!
、、、初めてブログらしいブログを書いたかも笑