IE・Chrome・Firefoxでcursorプロパティの画像を使う方法

カテゴリー：javascript,PC,Web

IE・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
今回はこの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は,（カンマ）の前後にはスペースをあける癖があるんですが、そのせいでバグが発生して時間を浪費しました、、、

ちょっと憧れだったデモを作っておきました！

、、、初めてブログらしいブログを書いたかも笑

↑