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

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

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